/**
 * CTA (Figma: SECTIONS → CTA). Een korte boodschap met knoppen op een
 * gekleurd vlak: label (1 regel, ±36 tekens), kop H2 (2 regels, ±44
 * tekens), 1–2 knoppen. Geen bodytekst.
 *
 * Patronen (precies de vijf uit Figma):
 * - CTA - Fullwidth - Paars / Geel (.cta-wide.paars|.geel >
 *   .cta-pattern-wide): vlak 16px van de schermrand, 600px hoog, tekst
 *   160px boven en onder;
 * - CTA - Fullwidth - Geel - Gecentreerd (+ .gecentreerd): idem, tekst
 *   en knoppen in het midden;
 * - CTA - Contained - Paars / Geel (.cta-pattern.paars|.geel): vlak
 *   binnen de contentbreedte (1440), 444px hoog, tekst 80px boven en
 *   onder.
 *
 * Kleuren (paars is de standaard; de oude BCE-klassen .blauw/.roze en
 * .groen worden op paars en geel afgebeeld):
 * - paars: de CodePen-kleuren (roze, rood en lichtblauw op donkerblauw),
 *   witte tekst, witte primaire knop, donkerblauwe secundaire, tekst
 *   vanaf 260px;
 * - geel: geel en oranje (Figma) met rood als accent, donkerblauwe tekst,
 *   donkerblauwe primaire knop, witte secundaire, tekst vanaf 80px.
 *
 * VAST: kleur, achtergrond, afstanden, hoogte en lettergroottes liggen
 * per patroon vast. Wat een redacteur in Kadence ook kiest
 * (achtergrondkleur of -afbeelding, overlay, padding, tekst- of
 * knopkleur), het vlak blijft zoals in Figma; daarom de !important's.
 *
 * Achtergrond (CodePen van de ontwerper, "Alma College-gradient in drie
 * merkvormen"): grote, zachte kleurvlekken die over het vlak drijven. Het
 * vlak bestaat uit drie lagen: de basis en twee merkvormen (linksboven
 * een boog, rechtsonder een golf, de vormen uit Figma). Elke laag heeft
 * dezelfde vlekken, maar laat ze een eigen route en tempo varen (31/37/
 * 27s, met een tweede baan van 23/29/19s); daardoor tekenen de vormen
 * zich af. Snelheid zoals in de CodePen (data-gradient-speed 4), aan te
 * passen met --alma-cta-snelheid.
 *
 * Nagebouwd met radial-gradients i.p.v. filter: blur() (zelfde zachte
 * rand, veel lichter) en zonder JavaScript, dus ook in de editor. Geen
 * beweging bij prefers-reduced-motion.
 */

/* Verschuiving van de vlekken: echte, animeerbare waarden (per laag een
   eigen waarde, dus inherits: false) */
@property --alma-cta-vx { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --alma-cta-vy { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --alma-cta-bx { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --alma-cta-by { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* Vormen uit Figma (CTA - Fullwidth - Medium), los als masker */
body {
    --alma-cta-vorm-lb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 318 299'%3E%3Cpath d='M0 0V299C25.28 246.43 67.97 189.37 126.04 134.3C185.47 78.49 252.08 32.64 318 0Z'/%3E%3C/svg%3E");
    --alma-cta-vorm-ro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 690 303' preserveAspectRatio='none'%3E%3Cpath d='M164.68 132.22C103.96 153.34 48.76 177.21 0 199.25V303H690V0C632.96 8.26 413.08 43.16 164.68 132.22Z'/%3E%3C/svg%3E");
}

/* Het vlak: voorkant en editor dragen de klasse op dezelfde rij */
.cta-wide .cta-pattern-wide,
.cta-pattern {
    /* paars (standaard, de kleuren van de CodePen): ondergrond en de vier
       vlekken linksboven, rechtsboven, rechtsonder, linksonder */
    --alma-cta-k0: var(--alma-donker-blauw);
    --alma-cta-k1: var(--alma-roze);
    --alma-cta-k2: var(--alma-rood);
    --alma-cta-k3: var(--alma-licht-blauw);
    --alma-cta-k4: var(--alma-donker-blauw);
    /* de vormen keren de kleuren om (zoals in Figma), anders vallen ze
       weg: de boog donkerblauw in de roze hoek, de golf roze tegen het
       lichtblauw */
    --alma-cta-lb-k1: var(--alma-donker-blauw);
    --alma-cta-lb-k4: var(--alma-roze);
    --alma-cta-ro-k3: var(--alma-roze);
    --alma-cta-snelheid: 4;
    --alma-cta-tekst: var(--alma-neutral-0);
    --alma-cta-tekst-links: 260px; /* Figma paars: tekst vanaf 260px */

    --carmel-color-btn-primary-bg: var(--alma-neutral-0);
    --carmel-color-btn-primary-text: var(--alma-donker-blauw);
    --alma-cta-btn2-bg: var(--alma-donker-blauw);
    --alma-cta-btn2-tekst: var(--alma-ac-grijs);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--carmel-radius-lg) !important;
    /* de vlekken: zelfde opbouw op het vlak en op beide vormen. De vormen
       beslaan het hele vlak en worden door hun masker uitgesneden, zodat
       de vlekken op dezelfde plek liggen. Middelpunten en grootte naar de
       CodePen (scène 1600 × 900); de bovenste laag staat eerst. */
    &,
    &::before,
    &::after {
        background-color: var(--alma-cta-k0) !important;
        background-image:
            radial-gradient(78% 96% at calc(13% + var(--alma-cta-vx) - var(--alma-cta-bx)) calc(71% + var(--alma-cta-vy) - var(--alma-cta-by)), var(--alma-cta-k4) 40%, transparent 100%),
            radial-gradient(78% 96% at calc(66% + var(--alma-cta-vx) + var(--alma-cta-bx)) calc(84% + var(--alma-cta-vy) + var(--alma-cta-by)), var(--alma-cta-k3) 40%, transparent 100%),
            radial-gradient(78% 96% at calc(92.5% + var(--alma-cta-vx) + var(--alma-cta-bx)) calc(-24% + var(--alma-cta-vy) + var(--alma-cta-by)), var(--alma-cta-k2) 40%, transparent 100%),
            radial-gradient(78% 96% at calc(-4% + var(--alma-cta-vx)) calc(-24% + var(--alma-cta-vy)), var(--alma-cta-k1) 40%, transparent 100%) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    animation:
        alma-cta-veld-basis calc(31s / var(--alma-cta-snelheid)) cubic-bezier(0.42, 0, 0.58, 1) infinite,
        alma-cta-baan-a calc(23s / var(--alma-cta-snelheid)) ease-in-out infinite alternate;

    /* de twee merkvormen */
    &::before,
    &::after {
        content: '';
        display: block !important; /* Kadence-clearfix zet ::before op table → 0 × 0 */
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* linksboven: boog, half zo hoog als het vlak */
    &::before {
        --alma-cta-k1: var(--alma-cta-lb-k1);
        --alma-cta-k4: var(--alma-cta-lb-k4);
        -webkit-mask-image: var(--alma-cta-vorm-lb);
        mask-image: var(--alma-cta-vorm-lb);
        -webkit-mask-size: auto 50%;
        mask-size: auto 50%;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        animation:
            alma-cta-veld-lb calc(37s / var(--alma-cta-snelheid)) cubic-bezier(0.42, 0, 0.58, 1) infinite,
            alma-cta-baan-b calc(29s / var(--alma-cta-snelheid)) ease-in-out infinite alternate;
    }

    /* rechtsonder: golf, loopt over de rand door. Vanaf 56.8% links en
       67% boven, 44% × 50.5% groot (positie in % van de vrije ruimte) */
    &::after {
        --alma-cta-k3: var(--alma-cta-ro-k3);
        -webkit-mask-image: var(--alma-cta-vorm-ro);
        mask-image: var(--alma-cta-vorm-ro);
        -webkit-mask-size: 44% 50.5%;
        mask-size: 44% 50.5%;
        -webkit-mask-position: 101.4% 135.4%;
        mask-position: 101.4% 135.4%;
        animation:
            alma-cta-veld-ro calc(27s / var(--alma-cta-snelheid)) cubic-bezier(0.42, 0, 0.58, 1) infinite,
            alma-cta-baan-c calc(19s / var(--alma-cta-snelheid)) ease-in-out infinite alternate;
    }

    /* inhoud boven de vormen */
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        position: relative;
        z-index: 1;
        align-content: center;
        justify-self: stretch;
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 80px 80px 80px var(--alma-cta-tekst-links) !important;
    }

    /* tekst links (de BCE-patronen staan gecentreerd) */
    > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column {
        width: 100%;
        justify-self: stretch;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
        justify-content: flex-start !important;
    }

    color: var(--alma-cta-tekst);

    p {
        margin: 0 0 16px !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
        color: var(--alma-cta-tekst) !important;
        text-align: left !important;
    }

    /* via de kolom: wint van de plugin (.cta-pattern > div h3, 40px) */
    :is(.kt-inside-inner-col, .kadence-inner-column-inner) > :is(h1, h2, h3, h4, h5, h6) {
        max-width: 640px; /* kop in twee regels */
        margin: 0 0 52px !important;
        font-size: var(--carmel-font-size-h2) !important;
        line-height: var(--carmel-line-height-h2) !important;
        color: var(--alma-cta-tekst) !important;
        text-align: left !important;
    }

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

    /* knopkleuren vast, ook als er in Kadence een kleur is gekozen */
    :is(.kb-button, .kt-button).wp-block-button__link:not(.button-style-secondary) {
        background-color: var(--carmel-color-btn-primary-bg) !important;
        border-color: var(--carmel-color-btn-primary-bg) !important;
        color: var(--carmel-color-btn-primary-text) !important;
    }

    :is(.kb-button, .kt-button).wp-block-button__link.button-style-secondary {
        background-color: var(--alma-cta-btn2-bg) !important;
        border-color: var(--alma-cta-btn2-bg) !important;
        color: var(--alma-cta-btn2-tekst) !important;
    }

    /* een in Kadence gekozen overlay of achtergrondvideo niet tonen */
    > :is(.kt-row-layout-overlay, .kb-blocks-bg-video-container, .kb-blocks-bg-slider) {
        display: none !important;
    }
}

/* geel (de gecentreerde variant is altijd geel) */
.cta-wide:is(.geel, .groen, .gecentreerd) .cta-pattern-wide,
.cta-pattern:is(.geel, .groen) {
    /* geel linksboven → oranje rechtsonder (Figma), rood als accent */
    --alma-cta-k0: var(--alma-geel);
    --alma-cta-k1: var(--alma-geel);
    --alma-cta-k2: var(--alma-oranje);
    --alma-cta-k3: var(--alma-rood);
    --alma-cta-k4: var(--alma-geel);
    --alma-cta-lb-k1: var(--alma-oranje);
    --alma-cta-lb-k4: var(--alma-geel);
    --alma-cta-ro-k3: var(--alma-geel);
    --alma-cta-tekst: var(--alma-donker-blauw);
    --alma-cta-tekst-links: 80px; /* Figma geel: tekst vanaf 80px */

    --carmel-color-btn-primary-bg: var(--alma-donker-blauw);
    --carmel-color-btn-primary-text: var(--alma-ac-grijs);
    --alma-cta-btn2-bg: var(--alma-neutral-0);
    --alma-cta-btn2-tekst: var(--alma-donker-blauw);
}

/* Fullwidth: 600px hoog, 160px boven en onder */
.cta-wide {
    .entry-content &.alignfull {
        margin-top: 0 !important;
        margin-bottom: var(--section-gap) !important;
    }

    /* buitenste rij: geen eigen achtergrond of padding uit Kadence */
    background: none !important;

    > :is(.kt-row-layout-overlay, .kb-blocks-bg-video-container, .kb-blocks-bg-slider) {
        display: none !important;
    }

    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        padding-block: 0 !important;
    }

    /* De tekst lijnt uit op de container van de pagina (zelfde lijn als de
       rest van de inhoud), ook op brede schermen: de ruimte links is de
       helft van wat het vlak breder is dan de contentbreedte (Kadence:
       1471 − 2 × 16 = 1439px). Paars springt daarbinnen nog 196px in, zo
       staat de tekst op 1600 waar Figma hem zet (260px in het vlak). */
    .cta-pattern-wide {
        --alma-cta-container: max(0px, calc((100% - (var(--global-content-width, 1471px) - 2 * var(--global-content-edge-padding, 16px))) / 2));
        --alma-cta-inspring: 196px;
        min-height: 600px !important;
        display: grid;

        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            padding-block: 160px !important;
            /* minimaal 48px van de rand van het vlak (smallere schermen) */
            padding-left: max(48px, calc(var(--alma-cta-container) + var(--alma-cta-inspring))) !important;
            padding-right: max(48px, var(--alma-cta-container)) !important;
        }
    }

    &:is(.geel, .groen, .gecentreerd) .cta-pattern-wide {
        --alma-cta-inspring: 0px;
    }
}

/* Gecentreerd: tekst en knoppen in het midden, binnen de container */
.cta-wide.gecentreerd .cta-pattern-wide {

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        align-items: center !important;
    }

    p,
    :is(.kt-inside-inner-col, .kadence-inner-column-inner) > :is(h1, h2, h3, h4, h5, h6) {
        text-align: center !important;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) > :is(h1, h2, h3, h4, h5, h6) {
        margin-inline: auto !important;
    }

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

/* Contained: 444px hoog; de vormen staan net iets anders (Figma) */
.cta-pattern {
    .entry-content & {
        margin-top: 0 !important;
        margin-bottom: var(--section-gap) !important;
    }

    min-height: 444px !important;
    display: grid;

    /* golf: vanaf 52.8% links en 56% boven, 47.3% × 67% groot */
    &::after {
        -webkit-mask-size: 47.3% 67%;
        mask-size: 47.3% 67%;
        -webkit-mask-position: 100.2% 169.7%;
        mask-position: 100.2% 169.7%;
    }
}

/* Beweging (CodePen, in % van de scène 1600 × 900): per laag een route
   van drie punten voor alle vlekken samen, plus een heen-en-weer-baan
   voor de vlekken rechts (en tegengesteld linksonder) */
@keyframes alma-cta-veld-basis {
    0%, 100% { --alma-cta-vx: -4.4%; --alma-cta-vy: -3.3%; }
    33.333%  { --alma-cta-vx: -15%;  --alma-cta-vy: 15%; }
    66.666%  { --alma-cta-vx: 8.4%;  --alma-cta-vy: -11.7%; }
}

@keyframes alma-cta-veld-lb {
    0%, 100% { --alma-cta-vx: 5.6%;  --alma-cta-vy: 2.8%; }
    38%      { --alma-cta-vx: -7.5%; --alma-cta-vy: 16.7%; }
    72%      { --alma-cta-vx: 10.9%; --alma-cta-vy: -8.9%; }
}

@keyframes alma-cta-veld-ro {
    0%, 100% { --alma-cta-vx: -7.2%; --alma-cta-vy: -7.2%; }
    30%      { --alma-cta-vx: 10.3%; --alma-cta-vy: -16.1%; }
    67%      { --alma-cta-vx: -2.2%; --alma-cta-vy: 14.4%; }
}

@keyframes alma-cta-baan-a {
    from { --alma-cta-bx: -2.5%; --alma-cta-by: 2.2%; }
    to   { --alma-cta-bx: 9.4%;  --alma-cta-by: -7.8%; }
}

@keyframes alma-cta-baan-b {
    from { --alma-cta-bx: 3.4%;  --alma-cta-by: -2.8%; }
    to   { --alma-cta-bx: -7.5%; --alma-cta-by: 10.6%; }
}

@keyframes alma-cta-baan-c {
    from { --alma-cta-bx: -5%;   --alma-cta-by: 7.8%; }
    to   { --alma-cta-bx: 7.2%;  --alma-cta-by: -9.4%; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-wide .cta-pattern-wide,
    .cta-pattern {
        &,
        &::before,
        &::after {
            animation: none !important;
        }
    }
}

@media (max-width: 1024px) {
    .cta-wide .cta-pattern-wide,
    .cta-pattern {
        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            padding: 80px 48px !important;
        }
    }

    .cta-wide .cta-pattern-wide {
        min-height: 480px !important;
    }
}

/* Mobiel (Figma Mobile): vlak 540px hoog, tekst bovenaan (56px van de
   bovenkant, 24px van de zijkant), de vormen kleiner. Fullwidth loopt
   van rand tot rand zonder afronding, Contained staat 24px van de rand
   met 40px afronding en heeft de knoppen onder elkaar. */
@media (max-width: 767px) {
    .cta-wide .cta-pattern-wide,
    .cta-pattern {
        min-height: 540px !important;

        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            align-content: start;
            padding: 56px 24px !important;
        }

        p {
            margin-bottom: 24px !important;
            font-size: 16px !important;
        }

        :is(.kt-inside-inner-col, .kadence-inner-column-inner) > :is(h1, h2, h3, h4, h5, h6) {
            margin-bottom: 56px !important;
            font-size: var(--carmel-font-size-h2-mobile) !important;
            line-height: var(--carmel-line-height-h2) !important;
        }

        :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
            gap: 16px !important;
        }

        &::before {
            -webkit-mask-size: auto 140px;
            mask-size: auto 140px;
        }

        /* golf: vanaf 6% links en 85% boven, 94% × 30% groot */
        &::after {
            -webkit-mask-size: 94% 30%;
            mask-size: 94% 30%;
            -webkit-mask-position: 100% 121.4%;
            mask-position: 100% 121.4%;
        }
    }

    .cta-wide {
        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            padding-inline: 0 !important;
        }

        /* :root div: wint van de plugin (:root div.cta-pattern-wide,
           calc(100% - 32px)) */
        :root & div.cta-pattern-wide {
            width: 100% !important;
            margin: 0 !important;
            border-radius: 0 !important;
        }
    }

    .cta-pattern {
        width: auto !important;
        margin-inline: 8px !important; /* + 16px paginamarge = 24px */
        border-radius: 40px !important;

        /* golf: vanaf 7% links, loopt 14% over de rechterrand */
        &::after {
            -webkit-mask-size: 107% 30%;
            mask-size: 107% 30%;
            -webkit-mask-position: -100% 121.4%;
            mask-position: -100% 121.4%;
        }

        :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
            flex-direction: column;
            align-items: flex-start;
        }
    }
}