/**
 * Hero: splitscreen met grote foto (bibliotheek: .ptrn-herobigimage met
 * daarin een geneste .ptrn-bighero-rij; kop links, tekst en knop rechts,
 * gevolgd door .hero-text-centered-image).
 *
 * Figma: SECTIONS → Hero → "Splitscreen". Het verloop zit op het vlak
 * (hero-_basis.css), de foto eronder op hero-text-centered.css.
 */

/* De geneste rij is alignfull en zou anders tot de rand van het scherm
   uitsteken; binnen het vlak blijft hij binnen het vlak. */
.ptrn-herobigimage .ptrn-bighero {
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;

    > .kt-row-column-wrap {
        padding-inline: clamp(24px, 5vw, 80px) !important;
    }
}

/* desktop: de tekst gelijk met het logo (Figma); op breed scherm is dat
   ook de inhoudslijn van de foto eronder */
@media (min-width: 1025px) {
    .ptrn-herobigimage .ptrn-bighero > .kt-row-column-wrap {
        padding-inline: var(--global-content-edge-padding, 16px) !important;
    }
}

/* Big Image - Centered (.ptrn-herobigimage gevolgd door de rij
   .hero-text-centered-image): de foto begint 64px onder de tekst en valt
   340px over de onderkant van het verloop (Figma: foto 1440 × 800, het
   vlak loopt 340px door achter de foto). */
body {
    --alma-hero-overlap: 340px;
}

.ptrn-herobigimage .ptrn-bighero {
    padding-bottom: var(--alma-hero-overlap) !important; /* de 64px onder de tekst zit al in de binnenste rij */

    > .kt-row-column-wrap {
        padding-bottom: 0 !important;
    }
}

:is(.entry-content, .is-root-container) > .ptrn-herobigimage + .hero-text-centered-image {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--alma-hero-overlap)) !important;
}

/* Carousel Centered (Figma): de middelste foto (465 hoog) valt voor de
   helft over het verloop. Carousel Left Aligned: de fotorij valt 360px
   over het verloop. De ruimte onder in het vlak volgt via :has. */
.ptrn-herobigimage:has(+ .hero-gallery-gallery) {
    --alma-hero-overlap: 232px;
}

.ptrn-herobigimage:has(+ .hero-text-centered-image-carousel) {
    --alma-hero-overlap: 360px;
}

:is(.entry-content, .is-root-container) > .ptrn-herobigimage + :is(.hero-gallery-gallery, .hero-text-centered-image-carousel) {
    position: relative;
    z-index: 1;
}

:is(.entry-content, .is-root-container) > .ptrn-herobigimage + .hero-gallery-gallery {
    margin-top: -232px !important;
}

:is(.entry-content, .is-root-container) > .ptrn-herobigimage + .hero-text-centered-image-carousel {
    margin-top: -360px !important;
}

/* label 16px boven de kop (zoals de homepage-hero; de regelhoogte van
   de kop geeft er zelf 2px bij) */
.ptrn-herobigimage .ptrn-bighero .wp-block-carmel-core-label {
    margin-bottom: 14px !important;
}

/* Bovenaan de pagina schuift het vlak onder de menubalk (header.css); de
   tekst begint dan 124px onder de menubalk, net als bij de homepage-hero
   (16px wit tussen de bovenkant van het vlak en de inhoud zit al in de
   rij). */
@media (min-width: 1025px) {
    .entry-content > .ptrn-herobigimage:first-child .ptrn-bighero {
        padding-top: calc(var(--alma-header-gap, 16px) + var(--alma-mainbar-h, 80px) + 104px) !important;
    }
}

/* tablet en mobiel: zoals de homepage-hero schuift het vlak 86px omhoog
   onder de menubalk en staat het label 36px onder de balk */
@media (max-width: 1024px) {
    .entry-content > .ptrn-herobigimage:first-child {
        margin-top: -86px !important;

        .ptrn-bighero {
            padding-top: 104px !important;
        }
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .entry-content > .ptrn-herobigimage:first-child .ptrn-bighero {
        padding-top: 144px !important; /* tablet: zoals de homepage-hero */
    }
}

@media (max-width: 767px) {
    body,
    .ptrn-herobigimage:has(+ :is(.hero-gallery-gallery, .hero-text-centered-image-carousel)) {
        --alma-hero-overlap: 120px;
    }

    :is(.entry-content, .is-root-container) > .ptrn-herobigimage + :is(.hero-gallery-gallery, .hero-text-centered-image-carousel) {
        margin-top: -120px !important;
    }

    /* mobiel: alleen de 24px van de rij hierboven, niet ook nog de
       binnenruimte van twee geneste kolommen (samen 72px per kant) */
    .ptrn-herobigimage .ptrn-bighero :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding-inline: 0 !important;
    }
}