/**
 * Sliders (Figma: SECTIONS → Sliders). Kop links (H2, 1–2 regels), korte
 * intro rechts, pijlknoppen rechts boven de kaarten; 80px lager de
 * kaarten (4 zichtbaar, 342px breed, 24px ertussen, AC grijs, afronding
 * 16, 24px binnenruimte, beeld afronding 8).
 *
 * Slider - Links (.pattern-text-reveal, kaarten .js-card): beeld 294 ×
 * 328, onderaan titel (H5) met een roze rondje met pijl. Bij hover krimpt
 * het beeld en vouwt de beschrijving (.js-card-desc) open (plugin,
 * cards.js).
 * Slider - Steps (.steps-pattern, kaarten .steps-pattern-step): label
 * ("Stap 1"), beeld 294 × 246, titel (H5) en tekst.
 *
 * Schuiven en pijlknoppen komen uit de plugin (row-slider.js); de knoppen
 * verschijnen alleen als er meer kaarten zijn dan er passen. Kleur van de
 * kaarten ligt vast (de BCE-patronen hadden roze).
 */

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

    /* Links is een rij over de volle breedte (Kadence: inhoud 1471 zonder
       marge): de paginamarge erbij, dan is alles even breed als de
       container */
    &.pattern-text-reveal > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        padding-inline: var(--global-content-edge-padding, 16px) !important;
    }

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

    /* kop + intro; met 24px ertussen (gelijk aan de kaarten) begint de
       intro precies boven de derde kaart */
    .wp-block-kadence-rowlayout:not(.js-row-slider) > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 24px !important;
        align-items: start;
        padding: 0 !important;
    }

    .wp-block-kadence-rowlayout:not(.js-row-slider) h2 {
        max-width: 560px;
        margin: 0 !important;
    }

    .wp-block-kadence-rowlayout:not(.js-row-slider) p {
        max-width: min(465px, calc(100% - 160px)); /* ruimte voor de pijlknoppen */
        margin: 0 !important;
        font-size: var(--carmel-font-size-body-medium) !important;
        line-height: 1.2 !important;
        color: var(--alma-donker-blauw);
    }

    /* de rij met kaarten */
    .js-row-slider {
        position: relative;

        /* Links: deze rij staat op "volle breedte" en breekt anders uit
           tot de schermrand */
        &.alignfull {
            width: 100% !important;
            max-width: none !important;
            margin-inline: 0 !important;
        }

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

        /* Pijlknoppen zichtbaar (meer kaarten dan er passen): de plugin
           zet deze rij dan inline op overflow: hidden !important, dus de
           knoppen moeten ín de rij staan. Bovenin 136px ruimte (knoppen
           56 + 80), en de rij schuift evenveel omhoog: de knoppen staan
           zo naast de onderkant van de kop, de kaarten blijven 80px onder
           de kop. */
        &:has(> .carmel-row-slider__nav:not([style*="none"])) {
            margin-top: -136px !important; /* kop heeft 80px marge eronder */
            padding-top: 136px !important;

            /* het lege stuk bovenin ligt over de kop: klikken gaan door */
            pointer-events: none;

            > * {
                pointer-events: auto;
            }
        }
    }

    /* pijlknoppen: rechtsboven in de kaartenrij */
    .carmel-row-slider__nav {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        display: flex;
        gap: 16px;
        margin: 0 !important; /* plugin: 16px onder */

        button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background-color: var(--alma-donker-blauw);
            color: var(--alma-neutral-0);
            transition: background-color 0.2s;

            &:is(:hover, :focus-visible) {
                background-color: var(--alma-roze);
            }

            svg {
                width: 14px;
                height: 14px;
            }

            /* de plugin zet de pijl zwart (stroke in de svg) en geeft
               beide knoppen dezelfde pijl naar rechts */
            svg path {
                stroke: currentColor;
                stroke-width: 2;
            }

            &.carmel-row-slider__prev svg {
                transform: scaleX(-1);
            }
        }
    }

    /* de kaart */
    :is(.js-card, .steps-pattern-step) > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        height: 100%;
        padding: 24px !important;
        border-radius: var(--carmel-radius-md) !important;
        background: var(--alma-ac-grijs) !important;
    }

    :is(.js-card, .steps-pattern-step) {
        figure {
            width: 100% !important;
            margin: 0 !important;
            overflow: hidden;
            border-radius: 8px;
        }

        /* de plugin geeft het beeld zelf 24px afronding */
        figure img {
            border-radius: 8px !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
        }

        h5 {
            margin: 0 !important;
            font-size: var(--carmel-font-size-h5) !important;
            line-height: var(--carmel-line-height-h5) !important;
            color: var(--alma-donker-blauw) !important;
        }

        p {
            font-size: 16px !important;
            line-height: 1.4 !important;
            color: var(--alma-donker-blauw) !important;
        }
    }
}

/* ---------------------------------------------------------------
   Slider - Links
   --------------------------------------------------------------- */
.pattern-text-reveal .js-card {
    figure {
        height: 328px;
    }

    /* bij hover maakt de plugin figure lager; het beeld zelf blijft even
       hoog en wordt van onderen afgedekt, zodat de tekst over het beeld
       heen schuift (zoals bij BCE) in plaats van dat het beeld krimpt */
    figure img {
        height: 328px !important;
    }

    h5 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 16px !important;

        /* roze rondje met witte pijl */
        &::after {
            content: '' !important;
            flex-shrink: 0;
            width: 32px !important;
            height: 32px !important;
            border-radius: 50%;
            background:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 12px no-repeat,
                radial-gradient(120% 120% at 0 0, var(--alma-roze) 30%, var(--alma-donker-blauw) 130%) !important;
            transform: none;
        }
    }

    .js-card-desc {
        margin: 0 !important;
    }
}

/* De tekst ligt onderaan de kaart (plugin: absoluut, onderkant 0) en het
   beeld wordt bij hover zoveel lager als de tekst hoog is (scrollHeight,
   dus inclusief padding). Met 16 padding + 8 marge onder eindigt de tekst
   24px boven de onderkant (net als de titel) en staat hij 16px onder de
   titel. */
@media (min-width: 768px) {
    .pattern-text-reveal .js-card .js-card-desc {
        padding: 0 24px 16px !important;
        margin: 0 0 8px !important;
    }
}

/* ---------------------------------------------------------------
   Slider - Steps
   --------------------------------------------------------------- */
.steps-pattern .steps-pattern-step {
    .wp-block-carmel-core-label {
        margin: 0 0 16px !important;
    }

    figure {
        height: 246px;
    }

    h5 {
        margin: 24px 0 0 !important;
    }

    p {
        margin: 16px 0 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.pattern-text-reveal, .steps-pattern) .carmel-row-slider__nav button {
        transition: none;
    }
}

@media (max-width: 1024px) {
    :is(.pattern-text-reveal, .steps-pattern) .wp-block-kadence-rowlayout:not(.js-row-slider) > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 24px !important;
    }
}

@media (max-width: 767px) {
    :is(.pattern-text-reveal, .steps-pattern) {
        .carmel-row-slider__nav {
            gap: 8px;

            button {
                width: 40px;
                height: 40px;
            }
        }

        /* mobiel: kop en intro onder elkaar, de knoppen 16px onder de
           intro en de kaarten 40px daaronder */
        .wp-block-kadence-rowlayout:not(.js-row-slider) {
            margin-bottom: 40px !important;

            p {
                max-width: none;
            }
        }

        .js-row-slider:has(> .carmel-row-slider__nav:not([style*="none"])) {
            margin-top: -24px !important; /* 40 − 24: knoppen 16px onder de intro */
            padding-top: 80px !important; /* knoppen 40 + 40 tot de kaarten */
        }
    }

    .pattern-text-reveal .js-card :is(figure, figure img) {
        height: 280px !important;
    }

    /* geen hover op mobiel: de tekst staat er altijd (zoals bij BCE) en
       de kaart groeit mee */
    .pattern-text-reveal .js-card {
        height: auto !important;

        .js-card-desc {
            position: static !important;
            height: auto !important;
            padding: 0 !important;
            margin: 16px 0 0 !important;
            opacity: 1 !important;
        }
    }

    .steps-pattern .steps-pattern-step figure {
        height: 220px;
    }
}