/**
 * Hero Carousel - Left Aligned (Figma: Hero → Carousel Left Aligned):
 * onder de hero (.ptrn-herobigimage) een rij foto's die op de
 * containerlijn begint en rechts doorloopt tot de schermrand. De actieve
 * foto is 972 × 731, de andere 449 breed, 24px ertussen; de rij valt
 * 360px over de onderkant van het verloop (hero-bigimage.css).
 *
 * Overgenomen uit theme-bce (style.css, "Hero-carousel"); schuiven,
 * slepen en de oneindige lus zitten in js/hero-carousel.js. De rij is
 * een Kadence-rij met de klasse .hero-text-centered-image-carousel; elk
 * Afbeelding-blok in de kolom is een slide.
 */

.hero-text-centered-image-carousel {
    --carmel-hero-carousel-active-width: 972px;
    --carmel-hero-carousel-inactive-width: 449px;
    --carmel-hero-carousel-gap: 24px;
    --carmel-hero-carousel-height: 731px;
    --carmel-hero-carousel-duration: 0.7s; /* het script gebruikt GSAP (0.7s power3.inOut), dit is de terugval */
    --carmel-hero-carousel-ease: cubic-bezier(0.76, 0, 0.24, 1);

    /* van de containerlijn tot de rechter schermrand; de klonen aan
       weerszijden blijven buiten beeld */
    width: calc(100% + (100vw - var(--carmel-scrollbar-width, 15px) - 100%) / 2) !important;
    max-width: none !important;
    overflow: hidden;
    border-radius: var(--carmel-radius-md) 0 0 var(--carmel-radius-md);

    > div {
        margin-left: 0 !important;
        padding: 0 !important;
    }
}

/* het spoor: de kolom van Kadence wordt een flex-rij (Kadence zet daar
   zelf display: block op, vandaar !important) */
.hero-text-centered-image-section :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--carmel-hero-carousel-gap);
    padding: 0 !important;
    transition: transform var(--carmel-hero-carousel-duration) var(--carmel-hero-carousel-ease);
    will-change: transform;
}

/* een slide = een Afbeelding-blok */
.hero-text-centered-image-section .wp-block-kadence-image {
    flex: 0 0 var(--carmel-hero-carousel-inactive-width) !important;
    width: var(--carmel-hero-carousel-inactive-width) !important;
    height: var(--carmel-hero-carousel-height);
    margin: 0 !important;
    overflow: hidden;
    border-radius: var(--carmel-radius-md);
    cursor: grab; /* alleen slepen/swipen */
    transition: flex-basis var(--carmel-hero-carousel-duration) var(--carmel-hero-carousel-ease);

    &.is-active {
        flex-basis: var(--carmel-hero-carousel-active-width) !important;
        width: var(--carmel-hero-carousel-active-width) !important;
        cursor: default;
    }

    figure {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-height: var(--carmel-hero-carousel-height);
        object-fit: cover;
        border-radius: 0;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-text-centered-image-section :is(.kt-inside-inner-col, .kadence-inner-column-inner),
    .hero-text-centered-image-section .wp-block-kadence-image {
        transition: none;
    }
}

@media (max-width: 782px) {
    .hero-text-centered-image-carousel {
        --carmel-hero-carousel-active-width: 75vw;
        --carmel-hero-carousel-inactive-width: 90px;
        --carmel-hero-carousel-height: 400px;
    }
}

/* editor: geen script, dus de foto's gewoon naast elkaar */
.editor-styles-wrapper .hero-text-centered-image-carousel {
    width: auto !important;
}