/**
 * Hero: tekst gecentreerd + grote foto (bibliotheek: .herowrapper
 * .hero-text-centered, gevolgd door .hero-text-centered-image).
 * Ook gebruikt onder .ptrn-herobigimage.
 *
 * Figma: SECTIONS → Hero → "Big Image Centered": kop, tekst en knoppen
 * gecentreerd op het verloop; de foto loopt over (bijna) de volle breedte
 * en valt half over de onderkant van het verloop. De overlap zelf (220px
 * ruimte onder het vlak, −220px op de foto) regelt de plugin al.
 */

.hero-text-centered {
    text-align: center;

    .kb-buttons-wrap {
        justify-content: center;
    }
}

/* Foto: liggend, over de volle breedte van het vlak, bijgesneden. */
.hero-text-centered-image {
    /* Kadence zet de figure op display: table; dan werkt aspect-ratio
       daar niet, dus de verhouding staat op de img. */
    figure {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0 auto;
    }

    figure img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1408 / 720;
        object-fit: cover;
    }
}

@media (max-width: 767px) {
    .hero-text-centered-image figure img {
        aspect-ratio: 358 / 400;
    }
}