/* SkyHills - components
 * Order follows the page: topbar, hero, legal strip, escapes, rhythm,
 * manifest, footer, consent bar, age gate, article pages, media queries.
 * Photo paths sit in this file so the markup stays clean.
 */

/* Topbar
   -------------------------------------------------------------- */

.sh-topbar {
    height: 88px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    gap: 40px;
    border-bottom: 1px solid #ffffff22;
}

.sh-logo {
    font: 24px var(--display);
    letter-spacing: .08em;
}

.sh-logo span {
    color: var(--mint);
}

.sh-logo small {
    display: block;
    margin-top: 2px;
    font: 7px var(--text);
    letter-spacing: .27em;
}

.sh-topbar-nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
    font-size: 13px;
    color: #bcd1d0;
}

/* Hero
   The curved photo is a pseudo element so the copy keeps its own flow.
   -------------------------------------------------------------- */

.sh-hero {
    position: relative;
    min-height: 760px;
    padding: 110px 8vw;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 45%, #19495c 0 16%, transparent 42%),
        linear-gradient(105deg, #071a24 42%, #0d2f3d);
}

.sh-hero::after {
    content: "";
    position: absolute;
    right: -6%;
    bottom: -20%;
    width: 58%;
    height: 80%;
    border-radius: 50% 50% 0 0;
    background: url('../img/heuvelland-avond.jpg') center / cover;
    box-shadow: 0 0 0 20px #79e5d01a;
}

.sh-hero-mark {
    position: absolute;
    right: 11%;
    top: 14%;
    font-size: 70px;
    color: var(--mint);
}

.sh-hero h1,
.sh-section-head h2,
.sh-rhythm h2,
.sh-manifest h2,
.sh-doc h1 {
    margin: 20px 0;
    font: 400 clamp(52px, 7vw, 104px)/.96 var(--display);
}

.sh-hero h1 em {
    color: #7be0cd;
}

.sh-hero > p:not(.u-overline) {
    max-width: 580px;
    font-size: 18px;
    line-height: 1.75;
    color: #bdd0d1;
}

.sh-hero-card {
    position: absolute;
    z-index: 1;
    right: 6%;
    bottom: 7%;
    width: 270px;
    padding: 22px;
    background: var(--paper);
    color: #0b2630;
}

.sh-hero-card span,
.sh-hero-card small {
    display: block;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sh-hero-card strong {
    display: block;
    margin: 8px 0;
    font: 28px var(--display);
}

/* Legal strip
   -------------------------------------------------------------- */

.sh-legal-strip {
    padding: 24px 8vw;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 25px;
    background: var(--mint);
    color: #08242b;
}

.sh-legal-strip p {
    margin: 0;
    line-height: 1.55;
}

/* Escapes
   -------------------------------------------------------------- */

.sh-escapes {
    padding: 120px 7vw;
}

.sh-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.sh-section-head h2 {
    font-size: 64px;
}

.sh-section-head > p {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sh-escape {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 5vw;
    align-items: center;
    padding: 45px 0;
    border-top: 1px solid #ffffff2b;
}

/* Alternating layout: odd rows put the photo on the right. */
.sh-escape:nth-child(odd) {
    grid-template-columns: 1fr 1.2fr;
}

.sh-escape:nth-child(odd) .sh-escape-shot {
    order: 2;
}

.sh-escape-shot {
    position: relative;
    height: 420px;
    padding: 24px;
    background-size: cover;
    background-position: center;
}

.sh-escape-shot span {
    color: var(--mint-soft);
}

.sh-escape-shot h3 {
    position: absolute;
    bottom: 35px;
    margin: 0;
    font-size: 52px;
}

.sh-escape-shot small {
    position: absolute;
    bottom: 20px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* One modifier per destination - easier than inline styles when the
   photos get swapped. */
.sh-escape-shot--valkenburg {
    background-image: linear-gradient(180deg, transparent, #071a24cc),
        url('../img/valkenburg-heuvels.jpg');
}

.sh-escape-shot--nijmegen {
    background-image: linear-gradient(180deg, transparent, #071a24cc),
        url('../img/nijmegen-waalkade.jpg');
}

.sh-escape-shot--venlo {
    background-image: linear-gradient(180deg, transparent, #071a24cc),
        url('../img/venlo-architectuur.jpg');
}

.sh-escape > div:last-child h3 {
    font-size: 38px;
}

.sh-escape p {
    color: var(--body-copy);
    line-height: 1.75;
}

/* Weekend rhythm
   -------------------------------------------------------------- */

.sh-rhythm {
    padding: 100px 9vw;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8vw;
    align-items: center;
    background: #e8f3ef;
    color: #0a2630;
}

.sh-rhythm h2 {
    font-size: 62px;
}

.sh-rhythm p {
    color: #345059;
    line-height: 1.75;
}

.sh-rhythm-orb {
    height: 560px;
    border-radius: 50% 50% 8px 8px;
    background: url('../img/spa-ochtend.jpg') center / cover;
}

.sh-rhythm ul {
    list-style: none;
    padding: 0;
}

.sh-rhythm li {
    padding: 15px 0;
    border-bottom: 1px solid #b7ceca;
}

.sh-rhythm li b {
    display: inline-block;
    width: 110px;
}

/* Manifest
   -------------------------------------------------------------- */

.sh-manifest {
    padding: 120px 8vw;
    text-align: center;
}

.sh-manifest span {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #7be0cd;
}

.sh-manifest h2 {
    font-size: 65px;
}

.sh-manifest p {
    max-width: 630px;
    margin: auto;
    color: var(--body-copy);
    line-height: 1.75;
}

/* Footer
   -------------------------------------------------------------- */

.sh-footer {
    padding: 55px 6vw;
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.4fr;
    gap: 35px;
    background: #041017;
}

.sh-footer p,
.sh-footer small {
    color: #8aa5a6;
}

.sh-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
}

.sh-footer small {
    grid-column: 1 / -1;
}

/* Consent bar
   -------------------------------------------------------------- */

.sh-consent {
    position: fixed;
    z-index: 8;
    right: 18px;
    bottom: 18px;
    max-width: 520px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper);
    color: #09212a;
    box-shadow: 0 10px 40px #0008;
}

.sh-consent span {
    font-size: 12px;
}

.sh-consent button {
    padding: 10px;
    border: 1px solid #0a2630;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.sh-consent button:last-child {
    background: #0a2630;
    color: #fff;
}

/* Age gate
   Hidden until the script decides it is needed, so a returning visitor
   never sees it flash.
   -------------------------------------------------------------- */

.sh-gate {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(4, 16, 23, .93);
}

.sh-gate.is-open {
    display: flex;
}

.sh-gate-panel {
    width: min(560px, 100%);
    padding: 36px 38px 32px;
    background: var(--paper);
    color: #0a2630;
    border-left: 6px solid var(--mint);
}

.sh-gate-panel h2 {
    margin: 0 0 14px;
    font-size: 30px;
}

.sh-gate-panel p {
    max-width: 480px;
    margin: 0 0 24px;
    line-height: 1.6;
    color: #345059;
}

.sh-gate-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sh-gate-buttons button {
    padding: 14px 20px;
    border: 1px solid #9ab7b4;
    background: transparent;
    color: #0a2630;
    font: 15px var(--text);
    cursor: pointer;
}

.sh-gate-buttons button:first-child {
    background: #0a2630;
    border-color: #0a2630;
    color: var(--paper);
}

.sh-gate-buttons button:focus-visible {
    outline: 3px solid #0a2630;
    outline-offset: 3px;
}

/* Article pages
   -------------------------------------------------------------- */

.sh-doc {
    min-height: 100vh;
    max-width: 850px;
    margin: auto;
    padding: 80px 30px;
}

.sh-doc h1 {
    font-size: 68px;
}

.sh-doc > p:not(.u-overline) {
    margin: 26px 0;
    font-size: 18px;
    color: var(--body-copy);
    line-height: 1.75;
}

/* Small screens
   -------------------------------------------------------------- */

@media (max-width: 760px) {
    .sh-topbar-nav,
    .sh-btn-outline {
        display: none;
    }

    .sh-hero {
        padding: 80px 6vw 500px;
    }

    .sh-hero::after {
        width: 110%;
        height: 480px;
    }

    .sh-legal-strip,
    .sh-rhythm,
    .sh-footer {
        grid-template-columns: 1fr;
    }

    .sh-escape,
    .sh-escape:nth-child(odd) {
        grid-template-columns: 1fr;
    }

    .sh-escape:nth-child(odd) .sh-escape-shot {
        order: 0;
    }

    .sh-rhythm-orb {
        height: 400px;
    }

    .sh-section-head {
        display: block;
    }

    .sh-consent {
        left: 16px;
        right: 16px;
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .sh-gate-panel {
        padding: 28px 22px;
    }

    .sh-gate-buttons {
        flex-direction: column;
    }

    .sh-gate-buttons button {
        width: 100%;
    }
}