/**
 * Intro & tekst (Figma TCC: SECTION COMPONENTS → Intro & Text 01–05) —
 * blok carmel-core/intro-tekst. Varianten in functions.php (filter
 * carmel_section_blocks); de opbouw (kopdeel + inhoud) is de standaard
 * van de plugin.
 *
 * - gecentreerd (01): label, kop (1 regel), tekst max. 708 breed, knop,
 *   in het midden; 40px tussen kop, tekst en knop. Bollen links (324 ×
 *   394, 126px boven de onderkant van de sectie) en rechts (263 × 364,
 *   142px onder de bovenkant), tegen de schermrand.
 * - kop-lang (02): links label + kop (464), rechts de tekst (708), uit
 *   elkaar geschoven. Geen bollen.
 * - label-groot (03): links alleen een label (564), 40px ernaast de tekst
 *   in Body xLarge. Bollen links onderin (219 × 266).
 * - kop-tekst (04): links de kop (564), rechts de tekst. Bollen links
 *   onderin (219 × 266). Gespiegeld (05): tekst links, kop rechts
 *   uitgelijnd; bollen rechts onderin (179 × 248).
 * Label 24px boven de kop, tekst Body Large (alinea's een witregel uit
 * elkaar; tekstgrootte "groot": Body xLarge), knop 32px onder de tekst. Mobiel: alles onder elkaar, 24
 * ertussen; alleen 01 en 05 kleine bollen rechts onderin.
 *
 * De bollen schalen mee met de schermbreedte (maten bij 1600, mobiel bij
 * 390), staan achter de tekst en hangen aan de sectie (de onderkant ligt
 * een --section-gap onder het blok). Alleen op de voorkant: in de editor
 * is de schermrand niet de rand van het canvas.
 */

/* ---------------------------------------------------------------
   Gedeeld
   --------------------------------------------------------------- */
.carmel-it__kop {
    margin: 0 !important;
    color: var(--tcc-blauw) !important;
}

.carmel-it__tekst {
    color: var(--tcc-blauw);

    /* div: in de editor is het typveld zelf de tekst (zonder alinea's) */
    p,
    &:is(div) {
        font-size: var(--carmel-font-size-body-large) !important;
        line-height: var(--carmel-line-height-body-large) !important;
        letter-spacing: -0.03em !important;
    }

    p {
        margin: 0 0 1.3em !important; /* een witregel */

        &:last-child {
            margin-bottom: 0 !important;
        }
    }

    a {
        color: inherit;
        text-decoration: underline;
    }
}

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

/* twee kolommen (02–05); zelfde gewicht als de regels per variant
   hieronder, zodat die winnen */
:is(.carmel-it--kop-lang, .carmel-it--label-groot, .carmel-it--kop-tekst) .carmel-it__rij {
    grid-template-columns: minmax(0, 564px) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
}

/* tekstgrootte "groot": Body xLarge (32, mobiel 20), zoals bij 03 */
.carmel-it--groot :is(.carmel-it__tekst p, div.carmel-it__tekst) {
    font-size: var(--carmel-font-size-body-xlarge) !important;
    line-height: 120% !important;
    letter-spacing: normal !important;
}

/* ---------------------------------------------------------------
   01 — gecentreerd
   --------------------------------------------------------------- */
.carmel-it--gecentreerd {
    .carmel-it__rij {
        max-width: 708px;
        margin-inline: auto;
        row-gap: 40px;
        text-align: center;
    }

    .carmel-it__label {
        justify-content: center;
    }

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

/* ---------------------------------------------------------------
   02 — kop met lange tekst
   --------------------------------------------------------------- */
.carmel-it--kop-lang .carmel-it__rij {
    grid-template-columns: minmax(0, 464px) minmax(0, 708px);
    justify-content: space-between;
}

/* ---------------------------------------------------------------
   03 — label met grote tekst
   --------------------------------------------------------------- */
.carmel-it--label-groot {
    .carmel-it__label {
        margin-bottom: 0 !important;
    }

    :is(.carmel-it__tekst p, div.carmel-it__tekst) {
        font-size: var(--carmel-font-size-body-xlarge) !important;
        line-height: 120% !important;
        letter-spacing: normal !important;
    }
}

/* ---------------------------------------------------------------
   04 / 05 — kop met tekst (gespiegeld: kop rechts)
   --------------------------------------------------------------- */
.carmel-it--kop-tekst.carmel-it--spiegel {
    .carmel-it__rij {
        grid-template-columns: minmax(0, 1fr) minmax(0, 564px);
    }

    .carmel-it__kopdeel {
        text-align: right;
    }
}

/* ---------------------------------------------------------------
   Bollen tegen de schermrand (alleen op de voorkant)
   --------------------------------------------------------------- */
.entry-content > .carmel-it {
    --tcc-rand: calc((100% - 100vw + var(--carmel-scrollbar-width, 15px)) / 2);
    position: relative;
    isolation: isolate;

    &::before,
    &::after {
        position: absolute;
        z-index: -1; /* achter de tekst */
        background: no-repeat center / 100% 100%;
        pointer-events: none;
    }
}

/* 01: links (324 × 394, 126 boven de sectierand) en rechts (263 × 364,
   142 onder de sectierand); het blok heeft geen eigen binnenruimte, de
   sectierand ligt een --section-gap boven en onder de inhoud */
.entry-content > .carmel-it--gecentreerd {
    &::before {
        content: '';
        bottom: 6px;
        left: var(--tcc-rand);
        width: 20.25vw; /* 324 bij 1600 */
        aspect-ratio: 219 / 266;
        background-image: var(--tcc-bollen-svg-pil-rondje);
    }

    &::after {
        content: '';
        top: 22px;
        right: var(--tcc-rand);
        width: 16.44vw; /* 263 bij 1600 */
        aspect-ratio: 263 / 364;
        background-image: var(--tcc-bollen-svg-rechts);
    }
}

/* 03 en 04: links onderin (219 × 266, op de onderkant van de sectie) */
.entry-content > :is(.carmel-it--label-groot, .carmel-it--kop-tekst:not(.carmel-it--spiegel))::before {
    content: '';
    bottom: calc(-1 * var(--section-gap));
    left: var(--tcc-rand);
    width: 13.67vw; /* 219 bij 1600 */
    aspect-ratio: 219 / 266;
    background-image: var(--tcc-bollen-svg-pil-rondje);
}

/* 05: rechts onderin (179 × 248) */
.entry-content > .carmel-it--kop-tekst.carmel-it--spiegel::after {
    content: '';
    bottom: calc(4px - var(--section-gap));
    right: var(--tcc-rand);
    width: 11.2vw; /* 179 bij 1600 */
    aspect-ratio: 263 / 364;
    background-image: var(--tcc-bollen-svg-rechts);
}

/* ---------------------------------------------------------------
   Kleiner scherm
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    :is(.carmel-it--kop-lang, .carmel-it--label-groot, .carmel-it--kop-tekst) .carmel-it__rij,
    .carmel-it--kop-tekst.carmel-it--spiegel .carmel-it__rij {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        column-gap: 48px;
    }
}

@media (max-width: 767px) {
    .carmel-it {
        padding-inline: 8px; /* 16 paginamarge + 8 = 24 (Figma mobiel) */
    }

    .carmel-it .carmel-it__rij,
    .carmel-it--kop-lang .carmel-it__rij,
    .carmel-it--kop-tekst.carmel-it--spiegel .carmel-it__rij {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    :is(.carmel-it__tekst p, div.carmel-it__tekst) {
        font-size: var(--carmel-font-size-body-large-mobile) !important;
    }

    /* 03 en "groot": Body xLarge mobiel (20px) */
    :is(.carmel-it--label-groot, .carmel-it--groot) :is(.carmel-it__tekst p, div.carmel-it__tekst) {
        font-size: var(--carmel-font-size-body-xlarge) !important;
    }

    /* 05: kop eerst, links */
    .carmel-it--kop-tekst.carmel-it--spiegel {
        .carmel-it__kopdeel {
            order: -1;
            text-align: left;
        }
    }

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

    /* Bollen: alleen bij 01 en 05, klein rechts onderin (82 × 114 bij
       390) */
    .entry-content > .carmel-it::before {
        content: none !important;
    }

    .entry-content > :is(.carmel-it--gecentreerd, .carmel-it--kop-tekst.carmel-it--spiegel)::after {
        top: auto;
        bottom: calc(-1 * var(--section-gap));
        width: 21.1vw;
    }
}