/**
 * Hero (Figma TCC: SECTION COMPONENTS → Hero) — blok carmel-core/hero,
 * varianten in functions.php. De Home-hero is een eigen blok
 * (hero-bollen.css). Maten overgenomen uit de patronen (hero-_basis,
 * hero-bigimage, hero-text-centered, hero-gallery, hero-carousel.css),
 * die tegen Figma gemeten en getest zijn.
 *
 * Opbouw: .carmel-hero > .carmel-hero__vlak (TCC Grijs, 16px van de
 * schermrand, mobiel 8, afronding 24 / 16) > .carmel-hero__inhoud
 * (binnen de container: kopdeel + tekstdeel), en daaronder het beeld dat
 * --carmel-hero-overlap over het vlak valt.
 *
 * - splitscreen: label en kop (Display D-2) links, tekst (Body Large) en
 *   knoppen rechts (560 breed), onderaan gelijk; 64 eronder de foto (16:9,
 *   afronding 24), 416 over het vlak. Bollen links achter de foto en
 *   rechts eroverheen. Mobiel: alles onder elkaar, foto 400 hoog, overlap
 *   314.
 * - groot-beeld (Big Image Centered): gecentreerd, kop Display D-1 (max.
 *   800), tekst 24 onder de kop; foto 1440 × 600, overlap 220. Mobiel:
 *   foto 326 × 400, overlap 310.
 * - carousel-gecentreerd: zoals groot-beeld (max. 920), eronder de
 *   afbeeldingen-slider van de plugin over de volle breedte; middelste
 *   foto 920 breed, overlap 220 (mobiel 84vw, 357).
 * - carousel-links: zoals splitscreen, kop Display D-1 (max. 700), tekst
 *   Body xLarge (max. 560); eronder een rij foto's van de containerlijn
 *   tot de schermrand (actief 972 × 731, de rest 449, 24 ertussen),
 *   overlap 346 (mobiel 84vw × 400, 318). Schuiven: js/hero-carousel.js.
 */

.carmel-hero {
    /* rand van de inhoud tot de schermrand (negatief) */
    --tcc-hero-rand: calc((100% - 100vw + var(--carmel-scrollbar-width, 15px)) / 2);
    --carmel-hero-overlap: 416px;
    --tcc-hero-boven: 64px; /* boven het label, onder de menubalk */
}

/* ---------------------------------------------------------------
   Het vlak en de tekst
   --------------------------------------------------------------- */
.carmel-hero__vlak {
    position: relative;
    overflow: hidden; /* de bollen links worden afgesneden op het vlak */
    margin-inline: calc(var(--tcc-hero-rand) + 16px);
    padding-bottom: var(--carmel-hero-overlap);
    border-radius: var(--carmel-radius-lg);
    background: var(--tcc-grijs);
    color: var(--tcc-blauw);
}

.carmel-hero__inhoud {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) 560px;
    column-gap: 32px;
    align-items: end;
    max-width: var(--global-content-width, 1471px);
    margin-inline: auto;
    padding: var(--tcc-hero-boven) var(--global-content-edge-padding, 16px) 64px;
}

/* bovenaan de pagina schuift het vlak onder de menubalk (header.css):
   het label 64 onder de balk (16 + 80 + 64 vanaf de bovenkant van het
   vlak) */
.entry-content > .carmel-hero:first-child {
    --tcc-hero-boven: calc(var(--alma-header-gap, 16px) + var(--alma-mainbar-h, 80px) + 64px);
}

.carmel-hero__label {
    margin: 0 0 14px !important; /* 16; de regelhoogte van de kop geeft er 2 bij */
}

.carmel-hero__kop {
    margin: 0 !important;
    font-size: var(--carmel-font-size-display2) !important;
    line-height: var(--carmel-line-height-display2) !important;
    letter-spacing: var(--carmel-letter-spacing-display2) !important;
    color: var(--tcc-blauw) !important;
}

.carmel-hero__tekst {
    color: var(--tcc-blauw);

    p,
    &:is(div) {
        font-size: var(--carmel-font-size-body-large) !important;
        line-height: var(--carmel-line-height-body-large) !important;
        letter-spacing: var(--carmel-letter-spacing-body-large) !important;
    }

    p {
        margin: 0 0 1em !important;

        &:last-child {
            margin-bottom: 0 !important;
        }
    }
}

.carmel-hero__knoppen {
    margin-top: 40px;

    :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
        margin: 0 !important;
    }
}

/* ---------------------------------------------------------------
   Het beeld
   --------------------------------------------------------------- */
.carmel-hero__foto {
    /* wint van de algemene figure-marge (32px) */
    margin: calc(-1 * var(--carmel-hero-overlap)) 0 0 !important;

    :is(img, video) {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--carmel-radius-lg);
    }
}

/* ---------------------------------------------------------------
   Splitscreen: bollen links achter de foto (aan het vlak, 320 boven de
   onderkant) en rechts over de foto (111 erboven, tot 16 van de
   schermrand)
   --------------------------------------------------------------- */
.carmel-hero--splitscreen {
    /* kopkolom 707 breed (Figma), de tekst blijft rechts */
    .carmel-hero__inhoud {
        justify-content: space-between;
    }

    .carmel-hero__kopdeel {
        max-width: 707px;
    }

    .carmel-hero__vlak::before {
        content: '';
        position: absolute;
        top: calc(100% - 320px);
        left: 0;
        width: 324px;
        height: 394px;
        background: var(--tcc-bollen-svg-links) no-repeat center / 100% 100%;
        pointer-events: none;
    }

    .carmel-hero__foto::after {
        content: '';
        position: absolute;
        z-index: 2;
        top: -111px;
        right: calc(var(--tcc-hero-rand) + 16px);
        width: 263px;
        height: 364px;
        background: var(--tcc-bollen-svg-rechts) no-repeat center / 100% 100%;
        pointer-events: none;
    }
}

/* ---------------------------------------------------------------
   Gecentreerd: Big Image Centered en Carousel Centered
   --------------------------------------------------------------- */
:is(.carmel-hero--groot-beeld, .carmel-hero--carousel-gecentreerd) {
    --carmel-hero-overlap: 220px;
    --tcc-hero-max: 800px;

    .carmel-hero__inhoud {
        display: block;
        text-align: center;
    }

    .carmel-hero__label,
    .carmel-hero__kop,
    .carmel-hero__tekst {
        max-width: var(--tcc-hero-max);
        margin-inline: auto !important;
        text-align: center;
    }

    .carmel-hero__kop {
        font-size: var(--carmel-font-size-display1) !important;
        line-height: var(--carmel-line-height-display1) !important;
        letter-spacing: var(--carmel-letter-spacing-display1) !important;
    }

    .carmel-hero__tekst {
        margin-top: 24px !important;
    }

    .carmel-hero__knoppen :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
        justify-content: center !important;
    }
}

.entry-content > :is(.carmel-hero--groot-beeld, .carmel-hero--carousel-gecentreerd):first-child {
    --tcc-hero-boven: calc(var(--alma-header-gap, 16px) + var(--alma-mainbar-h, 80px) + 74px);
}

.carmel-hero--groot-beeld .carmel-hero__foto :is(img, video) {
    aspect-ratio: 1440 / 600;
}

.carmel-hero--carousel-gecentreerd {
    --tcc-hero-max: 920px;

    /* de slider over de volle breedte van het scherm */
    .carmel-hero__beeld--slider {
        margin-inline: var(--tcc-hero-rand);
    }

    /* de foto's: afronding 24, 920 breed (op 1600; schaalt mee, max.
       1104); de hoogtes (465/380, mobiel 400/340) komen uit de plugin */
    .carmel-image-slider__slide {
        flex-basis: min(57.5vw, 1104px) !important;
        overflow: hidden;
        border-radius: var(--carmel-radius-lg);

        img {
            border-radius: var(--carmel-radius-lg);
        }
    }
}

/* ---------------------------------------------------------------
   Carousel Left Aligned
   --------------------------------------------------------------- */
.carmel-hero--carousel-links {
    --carmel-hero-overlap: 346px;

    .carmel-hero__kop {
        max-width: 700px;
        font-size: var(--carmel-font-size-display1) !important;
        line-height: var(--carmel-line-height-display1) !important;
        letter-spacing: var(--carmel-letter-spacing-display1) !important;
    }

    .carmel-hero__tekst {
        max-width: 560px;

        p,
        &:is(div) {
            font-size: var(--carmel-font-size-body-xlarge) !important;
            line-height: 120% !important;
            letter-spacing: normal !important;
        }
    }
}

.entry-content > .carmel-hero--carousel-links:first-child {
    --tcc-hero-boven: calc(var(--alma-header-gap, 16px) + var(--alma-mainbar-h, 80px) + 113px);
}

/* de rij: van de containerlijn tot de rechter schermrand */
.carmel-hero__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, dit is de terugval */
    --carmel-hero-carousel-ease: cubic-bezier(0.76, 0, 0.24, 1);

    width: calc(100% - var(--tcc-hero-rand));
    overflow: hidden;
    border-radius: var(--carmel-radius-lg) 0 0 var(--carmel-radius-lg);

    .carmel-hero__spoor {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--carmel-hero-carousel-gap);
        overflow: visible;
        transition: transform var(--carmel-hero-carousel-duration) var(--carmel-hero-carousel-ease);
        will-change: transform;
    }

    .carmel-hero__slide {
        flex: 0 0 var(--carmel-hero-carousel-inactive-width);
        width: var(--carmel-hero-carousel-inactive-width);
        height: var(--carmel-hero-carousel-height);
        overflow: hidden;
        border-radius: var(--carmel-radius-lg);
        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);
            width: var(--carmel-hero-carousel-active-width);
            cursor: default;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }
    }
}

/* editor: geen script, en niet tot de rand van het canvas */
.carmel-sectie-blok .carmel-hero__carousel {
    width: auto;
}

@media (prefers-reduced-motion: reduce) {
    .carmel-hero__carousel :is(.carmel-hero__spoor, .carmel-hero__slide) {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   Kleiner scherm
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .carmel-hero__inhoud {
        padding-inline: clamp(24px, 5vw, 80px);
    }

    /* tablet: het vlak schuift 86 omhoog onder de menubalk */
    .entry-content > .carmel-hero:first-child {
        --tcc-hero-boven: 144px;
        margin-top: -86px !important;
    }
}

@media (max-width: 782px) {
    .carmel-hero__carousel {
        --carmel-hero-carousel-active-width: 84vw; /* 326 op 390 */
        --carmel-hero-carousel-inactive-width: 90px;
        --carmel-hero-carousel-gap: 16px;
        --carmel-hero-carousel-height: 400px;
    }
}

@media (max-width: 767px) {
    .carmel-hero {
        --carmel-hero-overlap: 314px;
    }

    .carmel-hero--groot-beeld {
        --carmel-hero-overlap: 310px;
    }

    .carmel-hero--carousel-gecentreerd {
        --carmel-hero-overlap: 357px;
    }

    .carmel-hero--carousel-links {
        --carmel-hero-overlap: 318px;
    }

    /* het label 119 onder de bovenkant van het vlak (Figma mobiel) */
    .entry-content > .carmel-hero:first-child {
        --tcc-hero-boven: 119px;
    }

    .carmel-hero__vlak {
        margin-inline: calc(var(--tcc-hero-rand) + 8px);
        border-radius: var(--carmel-radius-md);
    }

    /* alles onder elkaar, 16 binnen het vlak (8 + 16 = 24 van de rand) */
    .carmel-hero__inhoud {
        display: block;
        padding: var(--tcc-hero-boven) 16px 48px;
    }

    .carmel-hero__tekstdeel {
        margin-top: 16px;
    }

    .carmel-hero__kop {
        font-size: var(--carmel-font-size-display2-mobile) !important;
        letter-spacing: var(--carmel-letter-spacing-display2-mobile) !important;
    }

    :is(.carmel-hero__tekst p, div.carmel-hero__tekst) {
        font-size: var(--carmel-font-size-body-large-mobile) !important;
        letter-spacing: -0.54px !important; /* -3% */
    }

    .carmel-hero__knoppen {
        margin-top: 24px;
    }

    .carmel-hero__foto :is(img, video) {
        aspect-ratio: auto;
        height: 400px;
    }

    /* de bollen ×0,365 (Figma mobiel), tot 8 van de schermrand */
    .carmel-hero--splitscreen {
        .carmel-hero__vlak::before {
            top: calc(100% - 279px);
            width: 118px;
            height: 144px;
        }

        .carmel-hero__foto::after {
            top: -29px;
            right: calc(var(--tcc-hero-rand) + 8px);
            width: 96px;
            height: 133px;
        }
    }

    /* gecentreerd blijft gecentreerd; kop Display D-1 mobiel */
    :is(.carmel-hero--groot-beeld, .carmel-hero--carousel-gecentreerd, .carmel-hero--carousel-links) .carmel-hero__kop {
        font-size: var(--carmel-font-size-display1-mobile) !important;
        letter-spacing: var(--carmel-letter-spacing-display1-mobile) !important;
    }

    :is(.carmel-hero--groot-beeld, .carmel-hero--carousel-gecentreerd) .carmel-hero__tekst {
        margin-top: 16px !important;
    }

    .carmel-hero--groot-beeld .carmel-hero__foto {
        max-width: 326px;
        margin-inline: auto !important;

        :is(img, video) {
            aspect-ratio: auto;
        }
    }

    .carmel-hero--carousel-gecentreerd .carmel-image-slider__slide {
        flex-basis: 84vw !important;
    }

    .carmel-hero--carousel-links :is(.carmel-hero__tekst p, div.carmel-hero__tekst) {
        letter-spacing: normal !important;
    }
}