/**
 * Quote (Figma: SECTIONS → Image & Text → Quote).
 *
 * Een licht, afgerond vlak 16px van de rand. Links het citaat (VAG, H2
 * 56px, 2–4 regels, ±max 120 tekens) met daaronder de naam als label
 * (18px); rechts een vierkante foto van 340px. Binnenin 144px boven en
 * onder; citaat en foto samen in een gecentreerde strook van 1200px.
 *
 * Het vlak heeft de papierstructuur uit Figma (images/quote-papier.jpg),
 * met het lichte grijs eronder zolang de afbeelding laadt.
 *
 * Patroon: .quote-pattern > kolom .hasbackgroundcolor (het vlak) > rij
 * (citaat | foto).
 */

.quote-pattern {
    /* alignfull: Kadence zet de marge op 0, dus de sectie-afstand terug */
    .entry-content &.alignfull {
        margin-bottom: var(--section-gap) !important;
    }

    .hasbackgroundcolor >:is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        background: var(--alma-neutral-100) url("../../images/quote-papier.jpg") center / cover no-repeat !important;
        border-radius: var(--carmel-radius-lg) !important;
    }

    .hasbackgroundcolor :is(.kb-row-layout-wrap, [data-type="kadence/rowlayout"]) > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 640px) 340px !important;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px !important; /* op 1600: tekst vanaf 200, foto tot 1400 */
        margin-inline: auto;
        padding: 144px 0 !important;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding: 0 !important; /* patroon: 96px links/rechts */
    }

    h2 {
        margin: 0 0 24px !important;
        color: var(--alma-donker-blauw) !important;
    }

    .carmel-label__text {
        font-size: 18px;
    }

    .wp-block-kadence-image figure,
    figure.wp-block-kadence-image,
    .wp-block[data-align] {
        display: block !important;
        float: none !important;
        height: auto !important;
        width: 100%;
        max-width: none;
        margin: 0 !important;
    }

    .wp-block-kadence-image img {
        display: block;
        width: 100% !important;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--carmel-radius-md);
    }
}

@media (max-width: 1024px) {
    .quote-pattern .hasbackgroundcolor :is(.kb-row-layout-wrap, [data-type="kadence/rowlayout"]) > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) 280px !important;
        column-gap: 48px !important;
        padding: 80px 48px !important;
    }
}

@media (max-width: 767px) {
    .quote-pattern {
        .hasbackgroundcolor :is(.kb-row-layout-wrap, [data-type="kadence/rowlayout"]) > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            grid-template-columns: minmax(0, 1fr) !important;
            row-gap: 32px !important;
            padding: 48px 24px !important;
        }

        .carmel-label__text {
            font-size: 16px;
        }
    }
}