/* ==========================================================================
   DOMEIN PAGINA – style-domein.css
   Pixel-accurate op basis van PDF meting (1920px referentie)

   Layout:
   – Linkerkolom foto: 36.5% breed, fullscreen hoog, sticky
   – Rechterkolom: start op 45.1%, tekstbreedte ~27%
   – Submenu: sticky, boven de tekst
   – Actief submenu item: donker (#10100E), inactief: licht (~rgba 50,50,47,0.35)
   – [meer info] rechts uitgelijnd

   Font:
   – Tekst body: PP Neue Montreal, ~0.75vw (~14px op 1920)
   – Team namen: PP Museum, ~1.35vw (~26px op 1920), uppercase, gecentreerd
   – Submenu: PP Neue Montreal, ~0.57vw (~11px), uppercase, letter-spacing
   ========================================================================== */


/* --------------------------------------------------------------------------
   PAGINA LAYOUT
   -------------------------------------------------------------------------- */
.page-domein {
    display: flex;
    min-height: 100svh;
    background: var(--c-page);
}


/* --------------------------------------------------------------------------
   LINKERKOLOM – STICKY FOTO'S
   Gemeten: 36.5% van 1920 = 700px
   Sticky: blijft op zijn positie terwijl content scrolt
   -------------------------------------------------------------------------- */
.domein-fotos {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100svh;
    overflow: hidden;
    background: #2A2820;
    z-index: 1;
}

/* Mobiele foto's: verborgen op desktop, zichtbaar op mobiel */
.domein-sectie__foto-mobiel {
    display: none;
}

/* Elke foto vult de volledige linkerkolom */
.domein-fotos__item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.domein-fotos__item.is-active {
    opacity: 1;
}

.domein-fotos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.domein-fotos__placeholder {
    width: 100%;
    height: 100%;
    background: #D8D4CC;
}


/* --------------------------------------------------------------------------
   RECHTERKOLOM – CONTENT
   Gemeten: start x = 45.1% van 1920
   Dus: margin-left van 36.5% foto + tussenruimte van 8.6%
   -------------------------------------------------------------------------- */
.domein-content {
    /* Duwt rechterkolom naar 50% zodat fixed foto niet overlapt */
    margin-left: 50%;
    width: 50%;
    /* Padding binnen de rechterkolom: links en rechts ~8.6vw van de kolombreedte */
    padding-left: clamp(24px, 4.5vw, 86px);
    padding-right: clamp(24px, 4.5vw, 86px);
    position: relative;
    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   STICKY SUBMENU
   Gemeten:
   – Bovenmarge in sectie: ~185px = 9.6vw
   – Ruimte tussen items: ~140px = 7.3vw
   – Actief: #10100E (donker), inactief: rgba(16, 16, 14,0.35) (licht)
   – Font: ~11px PP Neue Montreal, uppercase, letter-spacing 0.08em
   – Sticky: blijft boven in rechterkolom hangen
   -------------------------------------------------------------------------- */
/* Header direct zichtbaar op domein pagina, geen transform nodig */
body.is-domein-page .site-header {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: all !important;
}

/* Hero menu knop verbergen op domein pagina (geen hero foto) */
body.is-domein-page .hero-menu-btn {
    display: none;
}

.domein-subnav {
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.domein-subnav.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
}
.domein-subnav {
    position: fixed;
    /* Achtergrond trekt door van top:0 */
    top: 0;
    left: 50%;
    width: 50%;
    z-index: 50;
    background: var(--c-page);
    /* Padding top = hoogte header (48px) + extra ruimte naar submenu */
    padding-top: calc(80px + clamp(20px, 5vh, 40px));
    padding-bottom: clamp(16px, 2vh, 28px);
    padding-left: clamp(24px, 4.5vw, 86px);
    padding-right: clamp(24px, 4.5vw, 86px);
}

.domein-subnav__list {
    display: flex;
    align-items: center;
    justify-content: center;   /* Gecentreerd binnen rechterkolom */
    gap: clamp(24px, 7.3vw, 140px);
    list-style: none;
}

.domein-subnav__link {
    font-family: var(--f-body);
    font-size: var(--fs-nav);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(16, 16, 14, 0.35);  /* Inactief: licht */
    transition: color 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

.domein-subnav__link.is-active {
    color: var(--c-tekst);  /* Actief: donker */
}

.domein-subnav__link:hover {
    color: var(--c-tekst);
}


/* --------------------------------------------------------------------------
   SECTIES
   Elke sectie is één viewport hoog (min) zodat scroll-trigger werkt
   Padding top: ruimte voor submenu + ademruimte
   -------------------------------------------------------------------------- */
.domein-sectie {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Extra padding-top: ruimte voor fixed subnav (~80px) + ademruimte */
    padding-top: clamp(100px, 14vh, 160px);
    padding-bottom: clamp(48px, 8vh, 96px);
}

/* Tekstblok */
.domein-sectie__tekst {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Font-size normaal: body tekst, ~14px, justify */
.domein-sectie--fs-normaal .domein-sectie__tekst p,
.domein-sectie--fs-normaal .domein-sectie__tekst {
    font-family: var(--f-display);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.75;
    color: var(--c-tekst);
    margin: 0 auto;
    width: 100%;
    text-align: justify;
}

.domein-sectie--fs-normaal .domein-sectie__tekst p + p {
    margin-top: 1.1em;
}

/*
 * Font-size medium: team namen, PP Museum uppercase
 * Gemeten: ~26px op 1920 = 1.35vw, gecentreerd, met ruimte tussen namen
 */
.domein-sectie--fs-medium .domein-sectie__tekst {
    text-align: center;
    align-items: center;
}

.domein-sectie--fs-medium .domein-sectie__tekst p {
    font-family: var(--f-display);
    font-size: var(--fs-quote);  /* clamp(20px, 1.35vw, 26px) */
    font-weight: 300;
    line-height: 1.4em;
    color: var(--c-tekst);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* Ruimte tussen namen */
    padding: clamp(6px, 0.7vw, 14px) 0;
}

/* CTA: [meer info] — rechts uitgelijnd */
.domein-sectie__cta {
    text-align: right;
    margin-top: clamp(32px, 4vw, 80px);
    padding-bottom: clamp(24px, 3vw, 48px);
}

.domein-sectie__cta-link {
    font-family: var(--f-body);
    font-size: var(--fs-nav);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--c-tekst);
    transition: opacity 0.2s ease;
}

.domein-sectie__cta-link:hover {
    opacity: 0.45;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

    /* ----------------------------------------------------------------
       MOBIEL: foto fixed uitschakelen, layout stapelen
       Structuur per sectie: [foto] [inhoud] [foto] [inhoud] ...
    ---------------------------------------------------------------- */

    /* Verberg de fixed foto-kolom volledig op mobiel */
    .domein-fotos {
        display: none;
    }

    /* Toon de inline foto's per sectie op mobiel */
    .domein-sectie__foto-mobiel {
        display: block;
    }

    /* Verberg het fixed submenu op mobiel */
    .domein-subnav {
        display: none;
    }

    /* Reset rechterkolom layout */
    .domein-content {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* Elke sectie krijgt zijn eigen foto bovenaan */
    .domein-sectie {
        min-height: auto;
        padding-top: 0;
        padding-bottom: 0;
        display: block;
    }

    /* Foto binnen elke sectie op mobiel */
    .domein-sectie__foto-mobiel {
        width: 100%;
        display: block;
    }

    .domein-sectie__foto-mobiel img {
        width: 100%;
        height: auto;        /* Volledige foto, geen bijsnijden */
        object-fit: unset;
        display: block;
    }

    .domein-sectie__foto-mobiel-placeholder {
        width: 100%;
        height: 50vw;
        background: #D8D4CC;
        display: block;
    }

    /* Tekst en CTA krijgen normale padding */
    .domein-sectie__tekst {
        padding: clamp(40px, 8vw, 80px) var(--gutter-s);
        justify-content: flex-start;
    }

    .domein-sectie__cta {
        padding-left: var(--gutter-s);
        padding-right: var(--gutter-s);
        padding-bottom: clamp(40px, 8vw, 80px);
    }

    .domein-sectie--fs-medium .domein-sectie__tekst {
        align-items: flex-start;
        text-align: left;
    }

    .domein-sectie--fs-medium .domein-sectie__tekst p {
        font-size: clamp(18px, 5vw, 26px);
        text-align: left;
    }
}