@charset "UTF-8";
/*
 * Carousel — gestyled voor `<div class="carousel">` zoals gegenereerd door
 * Framework\Carousel\CarouselRenderer. JS-laag (Embla wrapper) hangt klassen
 * dynamisch toe: `.carousel__slide--active`, `.carousel__dot--selected` etc.
 *
 * Werkt al als CSS-only scroll-snap voordat JS geladen is — geen lay-out
 * shift bij hydration.
 *
 * Elke `var()` hier heeft een fallback. Niet elke site laadt `variables.css`: sites met
 * hun eigen stylesheet-architectuur definiëren een deel van de tokens wél en een deel
 * niet, en een `var()` zónder fallback laat dan de héle declaratie vallen. Dat kostte de
 * pijl-knoppen op zo'n site hun `box-shadow` — de knop is spierwit, dus op een witte
 * sectie bleef er een zwevend chevrontje over de tekst over. Onzichtbaar in de code,
 * zichtbaar op de pagina.
 */

.carousel {
    position: relative;
    /* Container-queries op carousel-level voor slide-count breakpoints */
    container-type: inline-size;
    /* Voorkom 0-breedte in nested flex-parents */
    width: 100%;
    min-width: 0;
}

.carousel__viewport {
    overflow: hidden;
    width: 100%;
}

.carousel__container {
    display: flex;
    /* Spacing via slide-padding i.p.v. flex `gap`: Embla meet slide-breedtes en
       werkt niet betrouwbaar met `gap`. De negatieve margin compenseert de
       leading padding van de eerste slide zodat 'ie flush links staat. */
    margin-left: calc(var(--space-3, 1rem) * -1);
    /* Vóór JS-init: scroll-snap maakt 't al een werkende carousel */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.carousel__container::-webkit-scrollbar { display: none; }

/* Default: één slide volle viewport breed.
   `data-layout-cols=N` (op container) splits naar N kolommen.
   `--layout-peek` (custom property, inline): toon X% van de volgende slide.

   Eén regel bepaalt de breedte, gevoed door twee variabelen. Dat is bewust: hiervoor stond het
   kolom-aantal in de SELECTOR (`[data-layout-cols="3"]`) en de peek-variant in een selector met
   een attribuut méér (`[style*="--layout-peek"][data-layout-cols="3"]`, specificiteit 0,4,0).
   De responsive `@container`-regels hadden er maar drie (0,3,0) en verloren het dus zodra peek
   aanstond -- óók binnen een matchende container-query. Gevolg: een carousel met 3 kolommen en
   peek toonde op een smal scherm gewoon 3 opgepropte slides, terwijl de breakpoints er wel
   degelijk waren. Gevonden door de svs-agent op site 466.

   Meer selectoren met een hogere specificiteit erbij zetten lost dat op tot de volgende variant.
   Daarom staat het kolom-aantal nu in `--carousel-cols` en verzetten de breakpoints alleen die
   variabele. Peek en kolommen vermenigvuldigen niet meer in de selector, ze tellen op in de calc. */
.carousel__slide {
    /* max() maakt de breakpoint-peek een ONDERGRENS: een smalle container laat altijd een
       randje van de volgende slide zien (dat was de 80% van de oude 24rem-regel), en een hoger
       ingestelde peek blijft gewoon staan. */
    flex: 0 0 calc(
        (100% - max(var(--layout-peek, 0%), var(--carousel-peek-min, 0%)))
        / var(--carousel-cols, 1)
    );
    box-sizing: border-box;
    padding-left: var(--space-3, 1rem);   /* slide-spacing (binnen flex-basis via border-box) */
    scroll-snap-align: start;
    min-width: 0;
}
.carousel__container[data-layout-cols="2"] { --carousel-cols: 2; }
.carousel__container[data-layout-cols="3"] { --carousel-cols: 3; }
.carousel__container[data-layout-cols="4"] { --carousel-cols: 4; }
.carousel__container[data-layout-cols="5"] { --carousel-cols: 5; }
.carousel__container[data-layout-cols="6"] { --carousel-cols: 6; }

/* Smaller container: minder slides naast elkaar voor leesbaarheid. Deze regels zetten alleen
   het kolom-aantal; de peek erin blijft gelden in plaats van hem te overschrijven. */
@container (max-width: 60rem) {
    .carousel__container[data-layout-cols="5"],
    .carousel__container[data-layout-cols="6"] { --carousel-cols: 3; }
}
@container (max-width: 40rem) {
    .carousel__container[data-layout-cols] { --carousel-cols: 2; }
}
@container (max-width: 24rem) {
    /* Eén slide plus een randje van de volgende -- de oude regel schreef dat als 80%. */
    .carousel__container[data-layout-cols] { --carousel-cols: 1; --carousel-peek-min: 20%; }
}

/* Arrows */
.carousel__controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-2, .5rem);
}
.carousel__buttons {
    display: contents;
}
.carousel__button {
    pointer-events: auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0;
    /* Themable surface (light-dark): wit in light, donker in dark.
       Voorheen rgba(255,255,255,.9) = spierwit in dark-mode. */
    background: color-mix(in srgb, var(--color-bg-elev, #fff) 90%, transparent);
    color: var(--color-fg, #222);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-1, 0 2px 10px rgba(0, 0, 0, .18));
    transition: transform .15s ease, opacity .15s ease;
}
.carousel__button:hover { transform: scale(1.05); }
.carousel__button:disabled { opacity: .4; cursor: default; }

/* Chevron via mask + currentColor — geen extra SVG-files nodig */
.carousel__button::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.carousel__prev::before { transform: rotate(180deg); }

/* Dots */
.carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2, .5rem);
    padding: var(--space-3, 1rem) 0 0;
}
.carousel__dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    border: 0;
    background: var(--color-border, rgba(0, 0, 0, .18));
    cursor: pointer;
    padding: 0;
    transition: transform .15s ease, background .15s ease;
}
.carousel__dot > span { position: absolute; left: -9999px; }
.carousel__dot:hover { transform: scale(1.2); }
.carousel__dot--selected {
    background: var(--color-primary, currentColor);
    transform: scale(1.3);
}

/* Fade-effect: opacity-transition i.p.v. slide-translate (Embla fade plugin) */
.carousel--fade .carousel__container > .carousel__slide {
    position: relative;
}

/* ── Uitgezet ("Actief" = Nee op de interface_carousel) ──────────────────────────────────────
 * Geen viewport, geen track, geen JS: alle slides op een rij, zodat de opmaak van de slides
 * blijft kloppen. De redacteur zette de bewéging uit, niet z'n beelden — vandaar dat ze er
 * allemaal staan en niet alleen de eerste.
 *
 * Grid en geen flex, met opzet: `.carousel__slide` draagt een `flex-basis` voor de carrousel-
 * breedte, en die hoort op precies één plek te staan (CarouselCssLayoutTest bewaakt dat, na een
 * eerdere ronde waarin twee regels om die breedte concurreerden). In een grid doet die eigenschap
 * niets, dus hier is geen tweede breedte-regel nodig en kan de eerste niet in de weg zitten. */
.carousel--static {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--carousel-gap, 1rem);
}
.carousel--static[data-layout-cols] {
    grid-template-columns: repeat(var(--carousel-cols), minmax(0, 1fr));
}
.carousel--static[data-layout-cols="2"] { --carousel-cols: 2; }
.carousel--static[data-layout-cols="3"] { --carousel-cols: 3; }
.carousel--static[data-layout-cols="4"] { --carousel-cols: 4; }
.carousel--static[data-layout-cols="5"] { --carousel-cols: 5; }
.carousel--static[data-layout-cols="6"] { --carousel-cols: 6; }