/* =========================================================== */
/* ===================== THEME CONTRAST ====================== */
/* =========================================================== */
/* Bouwt voort op light (theme_style: [light, contrast]): donkere home, tegels, tekst over de foto, bedrijfsblokken. */
:root {
    --font-regular: 400;
    --font-light: 300;
    --label-margin-bottom: 2rem;
}

/* --------------- HOME DONKER --------------- */
body:has(section.video-header) {
    --background-color: var(--my-black);
    --margin-y: 2.5rem;
    --section-padding-top: 3rem;

    &, & header, & :is(main, .programs-block) > section:not(.has-facilities) { --faded-color: var(--my-white-40); background: var(--my-black); color: var(--my-soft-white); }
    & header :is(.logo img, button) { filter: invert(1); }
    & header::before { background: var(--my-black); }
    & header a { color: var(--my-white); }
    /* Weg van de bovenkant is de header wit (js/hasscrolled.js zet body.scrolled), terug bovenaan vervaagt hij weer naar donker. Bij het wegschuiven wisselt hij pas als hij uit beeld is. */
    --header-overgang: .4s ease;
    &.scrolled.header-hidden { --header-overgang: 0s .3s; }
    & header { transition: transform .3s ease, background-color var(--header-overgang), color var(--header-overgang); }
    & header::before { transition: background-color var(--header-overgang); }
    & header a { transition: color var(--header-overgang); }
    & header :is(.logo img, button) { transition: filter var(--header-overgang); }
    &.scrolled header { --background-color: var(--my-white); background: var(--my-white); color: var(--my-black); }
    &.scrolled header::before { background: var(--my-white); }
    &.scrolled header a { color: var(--my-black); }
    &.scrolled header :is(.logo img, button) { filter: none; }
    & :is(main, .programs-block) > section:is(:not(.reveal), .visible):not(.has-facilities, .wide:has(+ .featured-image)) h2 { border-color: var(--my-soft-white); }
    & :is(main, .programs-block) > section.has-facilities { --faded-color: var(--my-black-40); padding-bottom: 5rem; background: var(--my-soft-white); color: var(--main-color); }
    & section.video-header .media { margin-bottom: 0; }
    & section.video-header + section { --section-padding-top: 2rem; }
    /* Het label boven de bedrijven: donker op wit. */
    & main > section.wide:has(+ section.featured-image) { --faded-color: var(--my-black-40); padding-bottom: var(--label-margin-bottom); background: var(--my-white); color: var(--my-black);
        & h2 { margin-bottom: 0; }
    }
    & .programs .tabbable-nav button { color: var(--my-white-40); }
    & .programs .tabbable-nav button:is(:hover, .active) { color: var(--my-white); border-color: var(--my-white); }
}

/* --------------- NUMBERS --------------- */
ul.numbers {
    grid-template-columns: repeat(3, 1fr); gap: .8rem;
    & > li { padding: 1.33rem; background: var(--my-full-black); }
    & h3 { font-size: var(--font-size-lead); white-space: nowrap; }
    & p { max-width: none; font-family: var(--mono-font); font-size: var(--font-size-small); text-transform: uppercase; letter-spacing: .1em; color: inherit; }

    @media only screen and (max-width: 768px) { grid-template-columns: 1fr 1fr; }
}

/* --------------- OVERLAY --------------- */
section.overlay {
    display: grid;
    & > img { grid-area: 1 / 1; height: 100%; object-fit: cover; filter: brightness(.3); }
    & > .container { grid-area: 1 / 1; z-index: 1; align-self: center; }
    & .container > div { max-width: 50rem; padding-block: 8rem; }
    & .container > div > p:first-child { font-family: var(--mono-font); font-size: var(--font-size-h6); text-transform: uppercase; letter-spacing: .1em; }
    & .container h2 { font-size: var(--font-size-h1); }
    & .container h2 + p { margin-block: 2rem; }
    & a.btn { display: flex; width: fit-content; font-weight: var(--font-bold); }
}

/* --------------- PROGRAMS --------------- */
section.has-programs { padding-block: 4.5rem 4rem; }
@media only screen and (min-width: 1001px) {
    section.has-programs { --label-margin-bottom: 3.5rem; }
}
div.programs {
    & h3 { margin: .125rem 0 2rem; }
    & .tabbable-nav button { font-size: var(--font-size-body); }
    & + p { font-size: var(--font-size-small); }
}
/* Brede schermen: de slider blijft met de secties ervoor en erna midden in beeld en de scroll schuift de kaarten door (js/programs.js); het blok is slow-sticky. */
.programs-block { --aanloop: .4; --uitloop: .4; position: sticky; top: var(--top, 0); }
/* Staan main en de footer in het blok, dan is de stage een item in de grid van body: niet breder dan het scherm, net als main en footer. */
.programs-stage { min-width: 0; }
@media only screen and (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    div.programs {
        --programs-pin: 1;
        & .tabbable-items { display: flex; gap: 4rem; will-change: translate; }
        & .tabbable-items > li { flex: 0 0 calc(100% - 8rem); visibility: visible; opacity: .3; transition: opacity 500ms; }
        & .tabbable-items > li.active { opacity: 1; }
    }
}
/* Smalle schermen: de kaarten staan in één rij die je swipet (scroll-snap); js/programs.js laat de nummers meelopen. Lenis staat hier niet aan (alleen boven 1000px). */
@media only screen and (max-width: 768px) {
    div.programs {
        --programs-swipe: 1;
        & .tabbable-items { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; &::-webkit-scrollbar { display: none; } }
        & .tabbable-items > li { flex: 0 0 100%; min-width: 0; align-items: start; align-content: start; scroll-snap-align: start; visibility: visible; opacity: 1; transition: none; }
    }
}

/* --------------- FACILITIES --------------- */
ul.facilities {
    margin-top: 0; grid-gap: 2rem; 
    & > li { min-width: 0; }
    & :is(.card .focus, .caption) { font-size: var(--font-size-small); }
    & .caption { padding: .25rem 4.5rem .25rem .5rem; overflow: hidden; line-height: 1.5rem; white-space: nowrap; text-overflow: ellipsis; }
    & .caption .flag { max-width: 4rem; object-fit: cover; }

    & dialog { width: min(33.5rem, calc(100% - 2rem)); }
    & dialog[open] { animation: facility-in 500ms var(--my-ease); }
    & dialog[open]::backdrop { animation: facility-backdrop-in 500ms var(--my-ease); }
    & dialog.closing { animation: facility-out 500ms var(--my-ease) reverse forwards; }
    & dialog.closing::backdrop { animation: facility-backdrop-out 500ms var(--my-ease) reverse forwards; }
    & dialog > div { padding: 1rem 1.2rem 1.5rem; }
    & dialog .close { display: grid; place-items: center; top: 1rem; right: 1rem; border: 1px solid var(--my-black); border-radius: 50%; }
    & dialog .close svg { width: 1rem; height: 1rem; fill: var(--my-black); }
    & dialog .location { font-size: var(--font-size-small); }
    & dialog h3 { font-size: var(--font-size-h5); font-weight: var(--font-regular); }
    & dialog .focus { font-weight: var(--font-light); }
    & dialog dt { font-size: var(--font-size-small); }
    & dialog dd { font-size: var(--font-size-body); }

    @media (prefers-reduced-motion: reduce) {
        & dialog:is([open], .closing), & dialog:is([open], .closing)::backdrop { animation: none; }
    }
}
@keyframes facility-in { from { opacity: 0; transform: translateY(1rem); } }
@keyframes facility-out { from { opacity: 0; transform: translateY(1rem); } }
@keyframes facility-backdrop-in { from { opacity: 0; } }
@keyframes facility-backdrop-out { from { opacity: 0; } }

/* --------------- PAGE TITLE --------------- */
section.page-title {
    & .container { max-width: var(--max-width); }
    & ul { border-color: var(--faded-color); }
    & ul > li { padding: 0; &::before { content: none; } }
}

/* --------------- FEATURED IMAGE --------------- */
section.featured-image {
    & .container:first-child { display: none; }
    & .container:last-child > div:first-child img { aspect-ratio: 3 / 2; object-fit: cover; }
    & .container:last-child > div:last-child > h2 { margin-top: 0; padding-bottom: 0; margin-bottom: 0; border: 0; font-size: var(--font-size-body); }
    & .container:last-child > div:last-child > h3 { margin-block: .25rem 2rem; font-size: var(--font-size-h2); }
    & .container:last-child > div:last-child > p:first-child { font-size: inherit; font-weight: inherit; }
    & a.btn:not(:last-child) { margin-right: 1.75rem; }

    @media only screen and (min-width: 1201px) {
        & .container:last-child > div:first-child { padding-right: 2rem; }
    }
}

/* --------------- BEDRIJVEN OP HOME --------------- */
/* Foto zacht sticky over de volle breedte (js/slow-sticky.js), de tekst schuift er in een donker paneel overheen. */
/* Het paneel is zo hoog als de tekst, dus de foto laat los zodra de tekst helemaal in beeld is en schuift dan met het paneel weg naar het volgende bedrijf. */
body:has(section.video-header) section.featured-image {
    padding-block: 0;
    & .container:last-child { display: block; width: 100%; max-width: none; margin: 0; }
    & .container:last-child > div:first-child { --aanloop: 0; --uitloop: 0; position: sticky; top: 0; width: 100%; height: 100vh; height: 100lvh; padding: 0; }
    & .container:last-child > div:first-child img { height: 100%; aspect-ratio: auto; }
    /* De foto staat er meteen, zonder de fade van js/scroll-reveal.js. */
    & img.fade-in { opacity: 1; transition: none; }
    & .container:last-child > div:last-child { position: relative; display: flow-root; padding: 4rem max(var(--gutter-side), (100% - var(--max-width)) / 2) 3.75rem; background: rgb(0 0 0 / .5); backdrop-filter: blur(1rem); }
    & .container:last-child > div:last-child > :is(h2, h3) { float: left; clear: left; width: 40%; }
    & .container:last-child > div:last-child > p { margin-left: 50%; }
    & a.btn::after { background-image: url('/img/arrow-right-small-white.svg'); }

    /* Zonder Lenis doet de browser de scroll-snap (js/snap.js zet html.scroll-snap): de tekst onderaan in beeld, of in de vrije vlakken ervoor en erna. */
    & [data-snap] { scroll-snap-align: end; scroll-snap-stop: always; }

    @media only screen and (max-width: 768px) {
        & .container:last-child > div:last-child { padding-block: 2.5rem 2.25rem; }
        & .container:last-child > div:last-child > :is(h2, h3) { float: none; width: auto; }
        & .container:last-child > div:last-child > p { margin-left: 0; }
    }
}
html.scroll-snap { scroll-snap-type: y mandatory; }
/* De vrije stukken voor en na de reeks: hoger dan het scherm, dus de browser mag er overal stoppen. */
.snap-vrij { position: absolute; left: 0; width: 1px; pointer-events: none; visibility: hidden; scroll-snap-align: start; }

/* --------------- FOOTER --------------- */
@media only screen and (min-width: 1001px) and (max-width: 1100px) {
    footer .left > ul { padding-right: 0; }
}
@media only screen and (max-width: 1000px) {
    footer .socials { justify-content: flex-start; padding-inline: 0; }
}