/*
 * Carousel — gestyled voor `<div class="carousel">` zoals gegenereerd door
 * App\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.
 */

.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) * -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): toon X% van de volgende slide. */
.carousel__slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding-left: var(--space-3);   /* slide-spacing (binnen flex-basis via border-box) */
    scroll-snap-align: start;
    min-width: 0;
}
.carousel__container[data-layout-cols="2"] .carousel__slide { flex-basis: 50%;     }
.carousel__container[data-layout-cols="3"] .carousel__slide { flex-basis: 33.333%; }
.carousel__container[data-layout-cols="4"] .carousel__slide { flex-basis: 25%;     }
.carousel__container[data-layout-cols="5"] .carousel__slide { flex-basis: 20%;     }
.carousel__container[data-layout-cols="6"] .carousel__slide { flex-basis: 16.667%; }

/* Peek van volgende slide (default 0%) */
.carousel__container[style*="--layout-peek"] .carousel__slide {
    flex-basis: calc(100% - var(--layout-peek, 0%));
}

/* Smaller container: minder slides naast elkaar voor leesbaarheid */
@container (max-width: 60rem) {
    .carousel__container[data-layout-cols="5"] .carousel__slide,
    .carousel__container[data-layout-cols="6"] .carousel__slide { flex-basis: 33.333%; }
}
@container (max-width: 40rem) {
    .carousel__container[data-layout-cols] .carousel__slide { flex-basis: 50%; }
}
@container (max-width: 24rem) {
    .carousel__container[data-layout-cols] .carousel__slide { flex-basis: 80%; }
}

/* Arrows */
.carousel__controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-2);
}
.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) 90%, transparent);
    color: var(--color-fg);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-1);
    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);
    padding: var(--space-3) 0 0;
}
.carousel__dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    border: 0;
    background: var(--color-border);
    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);
    transform: scale(1.3);
}

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

/* Alles past in beeld (≤1 scroll-positie): niets te schuiven, dus geen
   navigatie tonen. De wrapper zet de class op basis van Embla's snap-lijst. */
.carousel--static .carousel__dots,
.carousel--static .carousel__buttons {
    display: none;
}

/* ── Marquee-variant (transitionTimingFunction: linear) ──────────────────────
   Doorlopende, vloeiende band i.p.v. Embla's discrete slides. De renderer
   dupliceert de items; de -50%-loop is daardoor naadloos. Duur via
   `--marquee-duration` (uit het CMS-veld "Snelheid"). Pauzeert bij hover en
   respecteert prefers-reduced-motion. */
.strip {
    overflow: hidden;
    width: 100%;
}
.strip__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: strip-marquee var(--marquee-duration, 40s) linear infinite;
}
.strip__track > .carousel__slide {
    flex: 0 0 auto;
    /* Strakke, vaste box; de foto vult 'm vol (geen witte kaart-chrome). Uniforme
       rechter-marge zodat de -50%-loop naadloos blijft. */
    width: clamp(240px, 30vw, 360px);
    height: clamp(180px, 24vw, 260px);
    margin-right: var(--space-3, 16px);
}
/* Kaart-chrome (cream-achtergrond, shadow, radius) weg in de band: alleen de foto. */
.strip .card,
.strip .card__content,
.strip .card__link,
.strip .card__media {
    height: 100%;
    background: none;
    box-shadow: none;
    aspect-ratio: auto;
}
/* Ronde hoeken op de box die het beeld clipt (card__content heeft overflow:hidden). */
.strip .card__content {
    border-radius: var(--bl-radius, 12px);
    overflow: hidden;
}
.strip .card__media,
.strip .media__viewport { overflow: hidden; height: 100%; }
.strip .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    border-radius: 0;
}
@keyframes strip-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.strip:hover .strip__track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .strip__track { animation: none; }
}

/* In de doorlopende band geen kaart-hover (lift/shadow) — dat oogt raar terwijl
   de band scrollt. */
.strip .card--banner:hover,
.strip .card:not(.card--product):hover .card__content {
    transform: none;
    box-shadow: none;
}