/**
 * Hero: homepage (bibliotheek: kopie van "tekst gecentreerd", buitenste
 * rij met de klassen "herowrapper hero-home").
 *
 * Figma: SECTIONS → Navigation → "Navigatie" (desktop) en "Hero - Mobile".
 * Anders dan "Big Image Centered" (hero-text-centered.css):
 * - alles staat ín het verloopvlak: label, kop, foto/video en daaronder
 *   de introtekst met knoppen (de foto valt niet over de onderkant);
 * - tekst links uitgelijnd; de kop en de introtekst springen elk een
 *   stukje in t.o.v. de foto;
 * - de header (transparant, Customizer) ligt bovenin over het vlak heen,
 *   dus het vlak heeft bovenin veel ruimte;
 * - het draaiende verloop komt uit hero-_basis.css (geldt voor alle
 *   hero's).
 *
 * Opbouw (zoals het patroon): rij .hero-home > kolom (verloop, zie
 * hero-_basis.css) > geneste rij > kolom met: label, H1, rij
 * .hero-home-media (afbeelding, óf de rij zelf met een achtergrondvideo +
 * klasse .video), rij .hero-home-intro (tekst en knoppen).
 *
 * Voorkant en editor hebben andere wrappers, daarom steeds beide:
 * voorkant .kt-row-column-wrap / .kt-inside-inner-col, editor
 * .innerblocks-wrap / .kadence-inner-column-inner.
 *
 * Desktop nagemeten in Figma (200%, ±1px) op de basislijnen van de tekst,
 * vanaf de bovenkant van het vlak: label (midden) 229, kop 1e regel 321,
 * foto 511–1183, intro 1e regel 1295, tekst 1e regel 1430, knoppen 1560.
 */

.hero-home {
    --alma-hero-home-content: 1200px; /* breedte foto/video */
    text-align: left;

    /* Het verloopvlak: ruimte bovenin voor de header */
    > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding: 216px 24px 152px !important;

        /* Geneste rij (alignfull in het patroon) binnen het vlak houden */
        > :is(.kb-row-layout-wrap, [data-type="kadence/rowlayout"]) {
            width: 100% !important;
            max-width: var(--alma-hero-home-content) !important;
            margin: 0 auto !important;
            padding: 0 !important;
        }
    }

    /* Kadence geeft de geneste rijen een eigen inhoudsbreedte (±948px);
       hier bepaalt de 1200px van het vlak de breedte. */
    :is(.kb-row-layout-wrap, [data-type="kadence/rowlayout"]) > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        max-width: none !important;
        padding: 0 !important; /* Kadence-rij: 16px links/rechts, 160px boven in het patroon */
    }

    /* Het patroon centreert de kolommen (flex, align-items: center) */
    :is(.kb-row-layout-wrap, [data-type="kadence/rowlayout"]) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        align-items: stretch !important;
        padding-inline: 0 !important; /* anders blijft de foto 2×16px smaller dan 1200 */
    }

    :is(.hero-home-media, .hero-home-intro) {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    /* Label en kop links (het patroon centreert ze) en ingesprongen t.o.v.
       de foto (Figma ±123px bij 1200) */
    .wp-block-carmel-core-label,
    h1 {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10.25%;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .wp-block-carmel-core-label {
        margin: 0 !important;
    }

    /* Kop: Display 1 (88px / 90%), groter dan de gewone H1 */
    h1 {
        font-size: var(--carmel-font-size-display1) !important;
        line-height: var(--carmel-line-height-display1) !important;
        letter-spacing: var(--carmel-letter-spacing-display1) !important;
        margin-top: 14px !important;
        margin-bottom: 99px !important;
    }

    :is(.kb-buttons-wrap, .kb-btns-outer-wrap),
    .kb-btns-outer-wrap {
        justify-content: flex-start !important;
    }
}

/* Foto of video: liggend, afgerond, over de volle 1200px */
.hero-home-media {
    margin-bottom: 83px !important;

    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        padding: 0 !important; /* Kadence-rij: 16px rondom, foto blijft dan smaller */
    }

    figure {
        display: block; /* Kadence: display: table, dan werkt aspect-ratio niet */
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* Editor: Kadence zet een vaste breedte op het afbeeldingsvak */
    .components-resizable-box__container {
        width: 100% !important;
        height: auto !important;
    }

    figure img {
        display: block;
        width: 100% !important;
        height: auto;
        aspect-ratio: 1200 / 672;
        object-fit: cover;
        border-radius: var(--carmel-radius-md);
    }

    /* Video of afbeelding — wisselen met één klasse op deze rij:
       - zonder "video": de afbeelding (Kadence-afbeeldingsblok in de rij);
         een eventuele achtergrondvideo van de rij blijft verborgen;
       - met "video": de achtergrondvideo van de rij (Achtergrond → Video,
         liggend), de afbeelding verdwijnt. De rij krijgt dan zelf de
         verhouding, want zonder inhoud is hij 0px hoog. */
    &:not(.video) .kb-blocks-bg-video-container {
        display: none;
    }

    &.video {
        aspect-ratio: 1200 / 672;
        border-radius: var(--carmel-radius-md);
        overflow: hidden;

        .wp-block-kadence-image {
            display: none;
        }

        video {
            object-fit: cover;
        }
    }
}

/* Pauze- en geluidsknop van Kadence (rij → Achtergrond → Video → knoppen
   aan), zoals CCS en BCE: rechts in het midden, zichtbaar bij hover; op
   touchscreens altijd. */
.hero-home-media .kb-background-video-buttons-wrapper {
    top: 50%;
    transition: opacity 0.3s;
    opacity: 0;
}
.hero-home-media:is(:hover, :focus-within) .kb-background-video-buttons-wrapper {
    opacity: 1;
}
@media (hover: none) {
    .hero-home-media .kb-background-video-buttons-wrapper {
        opacity: 1;
    }
}

/* Intro onder de foto: springt verder in (Figma ±263px bij 1200), max ±584px */
.hero-home .hero-home-intro {
    padding-left: 22% !important;

    p {
        margin: 0 !important;
    }

    /* Eerste alinea: de vetgedrukte intro, in VAG Rounded 32px / 120% */
    p:first-of-type {
        font-family: var(--carmel-font-heading) !important;
        font-size: var(--carmel-font-size-h3) !important;
        line-height: var(--carmel-line-height-h3) !important;
        font-weight: 700 !important;
        margin-bottom: 26px !important;

        strong {
            font-weight: inherit;
        }
    }

    /* Daarna de gewone tekst: Poppins 20px, ruime regelafstand */
    p:not(:first-of-type) {
        font-size: var(--carmel-font-size-body-large) !important;
        line-height: 155% !important;
    }

    :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
        margin-top: 28px !important;
        gap: 8px !important;
    }

    /* Secundaire knop op het verloop: wit gevuld, donkerblauwe tekst */
    :is(.kb-button, .kt-button).wp-block-button__link.button-style-secondary {
        background-color: var(--alma-neutral-0) !important;
        color: var(--alma-donker-blauw) !important;
        border-color: var(--alma-neutral-0) !important;
    }

    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        max-width: 584px !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 1024px) {
    .hero-home {
        > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
            padding: 160px 24px 96px !important;
        }

        .wp-block-carmel-core-label,
        h1 {
            padding-left: 0;
        }

        h1 {
            margin-bottom: 48px !important;
        }
    }

    .hero-home .hero-home-intro {
        padding-left: 0 !important;
    }

    .hero-home-media {
        margin-bottom: 48px !important;
    }
}

@media (max-width: 767px) {
    .hero-home > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding: 120px 16px 32px !important;
    }

    .hero-home h1 {
        margin-bottom: 24px !important;
    }

    .hero-home-media {
        margin-bottom: 24px !important;

        figure img,
        &.video {
            aspect-ratio: 274 / 155; /* Figma mobiel: liggend, niet staand */
        }
    }
}