/*
 * 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;
    gap: var(--space-3);
    /* 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%;
    scroll-snap-align: start;
    min-width: 0;
}
.carousel__container[data-layout-cols="2"] .carousel__slide { flex-basis: calc(50%      - var(--space-3) * 1 / 2); }
.carousel__container[data-layout-cols="3"] .carousel__slide { flex-basis: calc(33.333%  - var(--space-3) * 2 / 3); }
.carousel__container[data-layout-cols="4"] .carousel__slide { flex-basis: calc(25%      - var(--space-3) * 3 / 4); }
.carousel__container[data-layout-cols="5"] .carousel__slide { flex-basis: calc(20%      - var(--space-3) * 4 / 5); }
.carousel__container[data-layout-cols="6"] .carousel__slide { flex-basis: calc(16.667%  - var(--space-3) * 5 / 6); }

/* 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: calc(33.333% - var(--space-3) * 2 / 3); }
}
@container (max-width: 40rem) {
    .carousel__container[data-layout-cols] .carousel__slide { flex-basis: calc(50% - var(--space-3) / 2); }
}
@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;
    background: rgba(255, 255, 255, .9);
    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;
}