/**
 * Image & Text (Figma: SECTIONS → Image & Text).
 *
 * 01 en 03 (.text-image-pattern): afbeelding en tekst naast elkaar, bij 01
 * twee rijen om en om. Kolommen van 640px met 160px ertussen; afbeelding
 * 640 × 640; tekstblok ±460px breed, horizontaal en verticaal gecentreerd
 * in zijn kolom. Twee rijen van hetzelfde patroon: 80px ertussen.
 * Mobiel: eerst de tekst, dan de afbeelding.
 *
 * Teksten (Figma-info): kop 1–2 regels (±40 tekens), tekst ±180–250 tekens
 * + optionele knop.
 *
 * 02 (.text-header-left-image-right): links label + kop (bovenaan),
 * rechts een afbeelding van 680 × 680 tegen de rechterrand, daaronder de
 * tekst over de volle breedte van de afbeelding en twee knoppen. Kop 2–3
 * regels (±60 tekens),
 * tekst ±180–240 tekens.
 *
 * 04 (.two-images-textblock + .two-images-textblock-images): bovenaan
 * links label + kop, rechts een tekstkolom van 446px met knop; 80px lager
 * twee afbeeldingen van 616px hoog (±2 : 1, 40px ertussen). Kop 2 regels
 * (±44 tekens), tekst ±160–220 tekens.
 */

.text-image-pattern {
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        padding: 0 !important;
        column-gap: 160px !important;
        align-items: center;
    }

    /* Afbeelding: vierkant, afgerond. De figure staat in het patroon op
       alignright (float + 32px marge onder); hier gewoon blok. */
    .wp-block-kadence-image figure,
    figure.wp-block-kadence-image,
    .wp-block[data-align] {
        display: block !important;
        float: none !important;
        height: auto !important; /* editor: uitgelijnde blokken staan op height: 0 */
        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);
    }

    /* Tekstblok */
    .text-image-pattern-textsection > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        width: 100%;
        max-width: 460px;
        margin-inline: auto;
        padding: 0 !important; /* patroon: 96px links/rechts */
        justify-content: center;
        align-items: flex-start;
    }

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

    :is(h2, h3) {
        margin: 0 0 24px !important;
    }

    p {
        margin: 0 !important;
        font-size: var(--carmel-font-size-body-medium) !important;
        line-height: var(--carmel-line-height-body-medium) !important;
    }

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

/* ---------------------------------------------------------------
   02
   --------------------------------------------------------------- */
.text-header-left-image-right {
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) 680px !important;
        column-gap: 80px !important;
        padding: 0 !important;
        align-items: start;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding: 0 !important;
    }

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

    h2 {
        margin: 0 !important;
    }

    .wp-block-kadence-image figure,
    figure.wp-block-kadence-image,
    .wp-block[data-align] {
        display: block !important;
        float: none !important;
        height: auto !important; /* editor: uitgelijnde blokken staan op height: 0 */
        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);
    }

    p {
        margin: 48px 0 0 !important;
        font-size: var(--carmel-font-size-body-medium) !important;
        line-height: var(--carmel-line-height-body-medium) !important;
    }

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

/* ---------------------------------------------------------------
   04
   --------------------------------------------------------------- */
.two-images-textblock {
    margin-bottom: 80px !important; /* tot de afbeeldingen eronder */

    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) 446px !important;
        column-gap: 80px !important;
        padding: 0 !important;
        align-items: start;
    }

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

    h2 {
        margin: 0 !important;
    }

    p {
        margin: 0 !important;
        font-size: var(--carmel-font-size-body-medium) !important;
        line-height: var(--carmel-line-height-body-medium) !important;
    }

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

.two-images-textblock-images {
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 940fr) minmax(0, 461fr) !important;
        column-gap: 40px !important;
        padding: 0 !important;
    }

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

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

/* Twee rijen van hetzelfde patroon (01): 80px ertussen i.p.v. de gewone
   sectie-afstand */
.text-image-pattern:has(+ .text-image-pattern) {
    margin-bottom: 80px !important;
}

@media (max-width: 1024px) {
    .text-image-pattern > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        column-gap: 48px !important;
    }
}

@media (max-width: 767px) {
    .text-image-pattern {
        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            row-gap: 32px !important;
        }

        /* Tekst altijd boven de afbeelding */
        .text-image-pattern-textsection {
            order: -1;
        }

        .text-image-pattern-textsection > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
            max-width: none;
        }

        .wp-block-kadence-image img {
            aspect-ratio: 358 / 320;
        }

        :is(h2, h3) {
            margin-bottom: 16px !important;
        }

        p {
            font-size: var(--carmel-font-size-body-medium-mobile) !important;
        }

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

    .text-image-pattern:has(+ .text-image-pattern) {
        margin-bottom: 64px !important;
    }

    /* 04: tekst onder de kop, afbeeldingen onder elkaar */
    .two-images-textblock {
        margin-bottom: 32px !important;

        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            grid-template-columns: minmax(0, 1fr) !important;
            row-gap: 24px !important;
        }

        p {
            font-size: var(--carmel-font-size-body-medium-mobile) !important;
        }

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

    .two-images-textblock-images {
        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            grid-template-columns: minmax(0, 1fr) !important;
            row-gap: 16px !important;
        }

        .wp-block-kadence-image img {
            height: auto !important;
            aspect-ratio: 358 / 300;
        }
    }

    /* 02: alles onder elkaar (label, kop, afbeelding, tekst, knoppen) */
    .text-header-left-image-right {
        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            grid-template-columns: minmax(0, 1fr) !important;
            row-gap: 32px !important;
        }

        .wp-block-kadence-image img {
            aspect-ratio: 358 / 320;
        }

        p {
            margin-top: 24px !important;
            font-size: var(--carmel-font-size-body-medium-mobile) !important;
        }

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