/**
 * Tekst & beeld (Figma TCC: SECTION COMPONENTS → Image & Text) — blok
 * carmel-core/tekst-beeld. Varianten in functions.php (filter
 * carmel_section_blocks), opbouw van 02 en 04 in carmel-blocks/tekst-beeld/.
 *
 * - foto-bollen (01): foto 640 × 640, 248px ernaast een tekstblok van 448
 *   (label, kop, tekst Body Medium, knoppen). Bollen links onderin de
 *   foto; gespiegeld (tekst eerst, tegen de rechterkant) rechts. Twee na
 *   elkaar: 80px ertussen.
 * - pil (03): de foto als pil van 640 × 426 onder −15° (kader 728 × 577)
 *   met een icoon in een cirkel; bollen (gespiegeld) links tegen de
 *   schermrand, achter de foto.
 * - grote-foto (02): links label + kop (600), rechts een foto van 680 ×
 *   680 met bollen rechts, daaronder tekst (Body Large) en knoppen, 48px
 *   ertussen.
 * - twee-fotos (04): bovenaan links label + kop, rechts tekst (448) en
 *   knoppen; 80px lager twee foto's van 616 hoog (940 en de rest, 40px
 *   ertussen), bollen links op de eerste en rechts op de tweede.
 * - quote (Figma: Image & Text → Quote): grijs vlak tot 16px van de
 *   schermrand; citaat (kop), naam (label) en knop, rechts de foto als
 *   gekantelde pil met icoon (standaard hart); bollen rechts in het vlak.
 *   Opbouw in carmel-blocks/tekst-beeld/opbouw-quote.php.
 * Tekstgrootte "groot": één stap groter (Medium → Large, Large → xLarge).
 * Mobiel: alles onder elkaar, tekst boven de foto, bollen kleiner.
 *
 * De bollen hangen aan de figure (afgesneden op de rand van de foto) en
 * schalen mee. Iconen uit --tcc-icoon-* (variables.css).
 */

.carmel-tb {
    --tcc-tb-radius: var(--carmel-radius-lg);
    --tcc-tb-tekst: var(--carmel-font-size-body-medium);
    --tcc-tb-tekst-lh: 120%;
    --tcc-tb-tekst-ls: 0;

    &.carmel-tb--groot {
        --tcc-tb-tekst: var(--carmel-font-size-body-large);
        --tcc-tb-tekst-ls: -0.03em;
    }
}

.entry-content > .carmel-tb {
    margin-block: 0 var(--section-gap);
}

/* Twee keer "foto met bollen" na elkaar: 80px ertussen (voorkant en
   editor; de sectie-afstand zelf komt uit de plugin) */
.entry-content > .carmel-tb--foto-bollen:has(+ .carmel-tb--foto-bollen),
.carmel-tb-blok--foto-bollen:has(+ .carmel-tb-blok--foto-bollen) {
    margin-bottom: 80px;
}

/* ---------------------------------------------------------------
   Gedeeld: tekst, foto's
   --------------------------------------------------------------- */
.carmel-tb__kop {
    margin: 0 0 24px !important;
    color: var(--tcc-blauw) !important;
}

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

    p,
    &:is(div) {
        font-size: var(--tcc-tb-tekst) !important;
        line-height: var(--tcc-tb-tekst-lh) !important;
        letter-spacing: var(--tcc-tb-tekst-ls) !important;
    }

    p {
        margin: 0 0 1em !important;

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

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

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

.carmel-tb__foto {
    position: relative;
    overflow: hidden;
    margin: 0 !important; /* wint van de algemene figure-marge (32px) */
    border-radius: var(--tcc-tb-radius);

    img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
    }

    /* de bollen */
    &::after {
        position: absolute;
        background: no-repeat center / 100% 100%;
        pointer-events: none;
    }
}

.carmel-tb__inhoud {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* ---------------------------------------------------------------
   01 — foto met bollen, en 03 — pil (zelfde opbouw)
   --------------------------------------------------------------- */
:is(.carmel-tb--foto-bollen, .carmel-tb--pil) .carmel-tb__rij {
    grid-template-columns: minmax(0, 640px) minmax(0, 448px);
    justify-content: start;
    column-gap: clamp(40px, 15.5vw, 248px);
}

/* gespiegeld: tekst eerst, tegen de rechterkant */
.carmel-tb--foto-bollen.carmel-tb--spiegel .carmel-tb__rij {
    grid-template-columns: minmax(0, 448px) minmax(0, 640px);
    justify-content: end;
}

/* bollen: links onderin (219 × 266, 38px boven de onderkant), gespiegeld
   rechts (175 × 242, 233px onder de bovenkant) */
.carmel-tb--foto-bollen .carmel-tb__foto::after {
    content: '';
    left: 0;
    bottom: 5.94%;
    width: 34.18%;
    aspect-ratio: 219 / 266;
    background-image: var(--tcc-bollen-svg-pil-rondje);
}

.carmel-tb--foto-bollen.carmel-tb--spiegel .carmel-tb__foto::after {
    left: auto;
    bottom: auto;
    top: 36.4%;
    right: 0;
    width: 27.34%;
    aspect-ratio: 263 / 364;
    background-image: var(--tcc-bollen-svg-rechts);
}

/* icoon in de cirkel (03 en Quote), gekozen in de zijbalk */
.carmel-tb {
    --tcc-tb-icoon: var(--tcc-icoon-rugzak);

    &.carmel-tb--icoon-hart         { --tcc-tb-icoon: var(--tcc-icoon-hart); }
    &.carmel-tb--icoon-boek         { --tcc-tb-icoon: var(--tcc-icoon-boek); }
    &.carmel-tb--icoon-klok         { --tcc-tb-icoon: var(--tcc-icoon-klok); }
    &.carmel-tb--icoon-aanwijzer    { --tcc-tb-icoon: var(--tcc-icoon-aanwijzer); }
    &.carmel-tb--icoon-rekenmachine { --tcc-tb-icoon: var(--tcc-icoon-rekenmachine); }
    &.carmel-tb--icoon-zoeken       { --tcc-tb-icoon: var(--tcc-icoon-zoeken); }
    &.carmel-tb--icoon-ster         { --tcc-tb-icoon: var(--tcc-icoon-ster); }
}

/* 03: de foto als gekantelde pil met een icoon */
.carmel-tb--pil {
    --tcc-tb-icoon-kleur: var(--tcc-balpen-blauw);
    position: relative;
    isolation: isolate;

    .carmel-tb__rij {
        grid-template-columns: minmax(0, 728px) minmax(0, 448px);
    }

    /* de figure blijft recht (houvast voor het icoon), de foto kantelt;
       binnen het kader van 728 × 577 */
    .carmel-tb__foto {
        width: 87.91%; /* 640 van 728 */
        margin: 10.37% auto !important; /* (577 − 426) / 2 van 728 */
        overflow: visible;
        border-radius: 0;

        img {
            aspect-ratio: 640 / 426;
            border-radius: 999px;
            transform: rotate(-15deg);
        }

        &::after {
            content: '';
            top: -4%;
            left: 12%;
            width: 18.75%; /* 120 van 640 */
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--tcc-tb-icoon) no-repeat center / 100% 100%, var(--tcc-tb-icoon-kleur);
        }
    }

    /* bollen links tegen de schermrand, achter de foto (gespiegeld, 307 ×
       425, onderaan gelijk met de rij) */
    &::before {
        content: '';
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: calc((100% - 100vw + var(--carmel-scrollbar-width, 15px)) / 2);
        width: 19.19vw; /* 307 bij 1600 */
        aspect-ratio: 263 / 364;
        background: var(--tcc-bollen-svg-rechts) no-repeat center / 100% 100%;
        transform: scaleX(-1);
        pointer-events: none;
    }
}

/* ---------------------------------------------------------------
   02 — kop met grote foto
   --------------------------------------------------------------- */
.carmel-tb--grote-foto {
    --tcc-tb-tekst: var(--carmel-font-size-body-large);
    --tcc-tb-tekst-lh: var(--carmel-line-height-body-large);
    --tcc-tb-tekst-ls: -0.03em;

    &.carmel-tb--groot {
        --tcc-tb-tekst: var(--carmel-font-size-body-xlarge);
    }

    .carmel-tb__rij {
        grid-template-columns: minmax(0, 600px) minmax(0, 680px);
        justify-content: space-between;
        align-items: start;
        column-gap: 40px;
    }

    .carmel-tb__kop {
        margin-bottom: 0 !important;
    }

    /* bollen rechts op de foto (175 × 242, 109px onder de bovenkant) */
    .carmel-tb__foto {
        width: 100%;

        &::after {
            content: '';
            top: 16.03%;
            right: 0;
            width: 25.74%;
            aspect-ratio: 263 / 364;
            background-image: var(--tcc-bollen-svg-rechts);
        }
    }

    .carmel-tb__tekst {
        margin-top: 48px;
    }

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

/* ---------------------------------------------------------------
   04 — twee foto's
   --------------------------------------------------------------- */
.carmel-tb--twee-fotos {
    .carmel-tb__rij {
        grid-template-columns: minmax(0, 1fr) minmax(0, 448px);
        align-items: start;
        column-gap: 80px;
        margin-bottom: 80px;
    }

    /* kop max. 564 breed (Figma), ook als de kolom breder is */
    .carmel-tb__kopdeel {
        max-width: 564px;
    }

    .carmel-tb__label {
        margin-bottom: 16px !important;
    }

    .carmel-tb__kop {
        margin-bottom: 0 !important;
    }

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

.carmel-tb__fotos {
    display: grid;
    grid-template-columns: minmax(0, 940fr) minmax(0, 460fr);
    column-gap: 40px;

    .carmel-tb__foto img {
        height: 616px;
        aspect-ratio: auto;
    }

    /* bollen: links op de eerste foto (219 × 266, 260px onder de
       bovenkant), rechts op de tweede (175 × 242, 42px onder de
       bovenkant) */
    .carmel-tb__foto--1::after {
        content: '';
        top: 42.21%;
        left: 0;
        width: 23.27%; /* 219 van 940 */
        aspect-ratio: 219 / 266;
        background-image: var(--tcc-bollen-svg-pil-rondje);
    }

    .carmel-tb__foto--2::after {
        content: '';
        top: 6.82%;
        right: 0;
        width: 38.04%; /* 175 van 460 */
        aspect-ratio: 263 / 364;
        background-image: var(--tcc-bollen-svg-rechts);
    }
}

/* ---------------------------------------------------------------
   Kleiner scherm
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Quote: grijs vlak (16px van de schermrand, afronding 24), binnenin
   64 boven en onder; links citaat (H2), 32px lager de naam en 32px
   lager de knop; rechts de foto als pil van 560 × 395 onder −15° (kader
   643 × 527) met een icoon (standaard hart, Rugzak Rood), 80px van de
   tekst. Bollen langs de rechterrand (307 × 425, 20 boven de onderkant),
   afgesneden op het vlak. De inhoud blijft binnen de paginacontainer:
   tekst 186 van de rand van het vlak bij 1600 (= 122 binnen de
   container); de pil steekt 41,5 uit de kolom, dus 80 + 41,5 tot de
   tekst en 120 + 41,5 tot de rand (= 97 binnen de container).
   --------------------------------------------------------------- */
.carmel-tb--quote {
    --tcc-tb-icoon-kleur: var(--tcc-rood);

    .carmel-tb__vlak {
        position: relative;
        overflow: hidden;
        border-radius: var(--carmel-radius-lg);
        background: var(--tcc-grijs);

        &::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 20px;
            width: min(19.19vw, 307px);
            aspect-ratio: 263 / 364;
            background: var(--tcc-bollen-svg-rechts) no-repeat center / 100% 100%;
            pointer-events: none;
        }
    }

    .carmel-tb__rij {
        position: relative;
        z-index: 1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
        column-gap: 121.5px;
        max-width: min(100%, calc(var(--global-content-width, 1471px) - 2 * var(--global-content-edge-padding, 16px)));
        margin-inline: auto;
        padding: 64px 97px 64px 122px;
        box-sizing: border-box;
    }

    .carmel-tb__citaat {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        font-style: normal;
        quotes: none;

        &::before,
        &::after {
            content: none !important;
        }
    }

    .carmel-tb__kop {
        margin-bottom: 32px !important;
    }

    .carmel-tb__label {
        margin: 0 !important;
    }

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

    /* de figure blijft recht (houvast voor het icoon), de foto kantelt;
       (527 − 395) / 2 = 66px boven en onder */
    .carmel-tb__foto {
        overflow: visible;
        margin: 11.79% 0 !important; /* 66 van 560 */
        border-radius: 0;

        img {
            aspect-ratio: 560 / 395;
            border-radius: 999px;
            transform: rotate(-15deg);
        }

        &::after {
            content: '';
            top: -3.8%;
            left: 7.4%;
            width: 21.43%; /* 120 van 560 */
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--tcc-tb-icoon) no-repeat center / 100% 100%, var(--tcc-tb-icoon-kleur);
        }
    }
}

/* op de voorkant tot 16px van de schermrand (in de editor de breedte
   van het canvas) */
.entry-content > .carmel-tb--quote {
    margin-inline: calc((100% - 100vw + var(--carmel-scrollbar-width, 15px)) / 2 + 16px);
}

@media (max-width: 1024px) {
    :is(.carmel-tb--foto-bollen, .carmel-tb--pil) .carmel-tb__rij {
        column-gap: 48px;
    }

    .carmel-tb--quote .carmel-tb__rij {
        grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
        column-gap: 80px;
        padding: 64px 64px 64px 48px;
    }
}

@media (max-width: 767px) {
    .carmel-tb {
        --tcc-tb-tekst: var(--carmel-font-size-body-medium-mobile);
        padding-inline: 8px; /* 16 paginamarge + 8 = 24 (Figma mobiel) */

        &.carmel-tb--groot,
        &.carmel-tb--grote-foto {
            --tcc-tb-tekst: var(--carmel-font-size-body-large-mobile);
        }
    }

    .carmel-tb .carmel-tb__rij,
    .carmel-tb--foto-bollen.carmel-tb--spiegel .carmel-tb__rij,
    .carmel-tb--pil .carmel-tb__rij {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px; /* Figma mobiel: overal 24 tussen de onderdelen */
    }

    /* tekst altijd boven de foto */
    :is(.carmel-tb--foto-bollen, .carmel-tb--pil) .carmel-tb__inhoud {
        order: -1;
    }

    .carmel-tb:not(.carmel-tb--pil, .carmel-tb--quote) .carmel-tb__foto img {
        aspect-ratio: 342 / 320;
    }

    /* bollen iets kleiner dan naar verhouding (Figma mobiel) */
    .carmel-tb--foto-bollen .carmel-tb__foto::after,
    .carmel-tb__fotos .carmel-tb__foto--1::after {
        width: 27%;
    }

    .carmel-tb--foto-bollen.carmel-tb--spiegel .carmel-tb__foto::after,
    .carmel-tb--grote-foto .carmel-tb__foto::after,
    .carmel-tb__fotos .carmel-tb__foto--2::after {
        width: 22%;
    }

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

    .carmel-tb--twee-fotos .carmel-tb__rij {
        margin-bottom: 24px;
    }

    .carmel-tb__fotos {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;

        .carmel-tb__foto img {
            height: auto;
            aspect-ratio: 342 / 320;
        }
    }

    .carmel-tb :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 24px !important;
    }
    /* Quote: 8px van de schermrand, alles onder elkaar, de pil iets
       kleiner zodat hij binnen het vlak blijft */
    .carmel-tb--quote {
        padding-inline: 0;

        .carmel-tb__rij {
            grid-template-columns: minmax(0, 1fr);
            row-gap: 24px;
            padding: 48px 24px;
        }

        .carmel-tb__label {
            font-size: 16px !important;
        }

        .carmel-tb__foto {
            width: 87%;
            margin: 10% auto !important;
        }
    }

    .entry-content > .carmel-tb--quote {
        margin-inline: calc((100% - 100vw + var(--carmel-scrollbar-width, 15px)) / 2 + 8px);
    }
}