/**
 * Tabs (Figma: SECTIONS → Tabs).
 *
 * Tabs Horizontal (.tabsblock): een vlak van rand tot rand (16px van de
 * schermrand, AC grijs met de papierstructuur, afronding 24). Links label
 * + kop en een lijst links ("tabs") van 64px hoog als pil, half
 * doorzichtig wit, met rechts een roze rondje met pijl; bij hover/focus
 * het verloop roze → donkerblauw met witte tekst (de eerste tab in
 * Figma). Rechts beeld (708 × 744 op 1600, afronding 24). De inhoud lijnt
 * uit op de container van de pagina, minimaal 64px binnen het vlak.
 *
 * Tabs Vertical (.ptrn-tabs-vertical): de open tab is 1000px breed (AC
 * grijs, afronding 24, 32px binnenruimte) met titel, beeld (384 hoog),
 * tekst en knop; de dichte tabs zijn stroken van 123px met de titel
 * verticaal onderin, 24px ertussen. Open/dicht en de breedte-animatie
 * komen uit de plugin (patterns.css + tabs-vertical.js); hier alleen de
 * maten en kleuren. Mobiel: de plugin maakt er een accordion van.
 *
 * De nummer-iconen uit BCE (.tab-number, eerste vector) staan niet in het
 * Alma-ontwerp en worden verborgen.
 */

/* ===============================================================
   Tabs Horizontal
   =============================================================== */
.tabsblock {
    /* vlak van rand tot rand, 16px van de schermrand (schermbreedte
       zonder scrollbalk, zoals de plugin bij alignfull) */
    --alma-tabs-vw: calc(100vw - var(--carmel-scrollbar-width, 15px));
    width: calc(var(--alma-tabs-vw) - 32px) !important;
    max-width: none !important;
    margin-inline: calc(50% - var(--alma-tabs-vw) / 2 + 16px) !important;
    border-radius: var(--carmel-radius-lg);
    background: var(--alma-ac-grijs) url("../../images/quote-papier.jpg") center / cover no-repeat !important;
    overflow: hidden;

    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        /* inhoud op de containerlijn (Kadence 1471 − 2 × 16), min. 64px */
        --alma-tabs-container: max(64px, calc((100% - (var(--global-content-width, 1471px) - 2 * var(--global-content-edge-padding, 16px))) / 2));
        grid-template-columns: minmax(0, 586fr) minmax(0, 708fr) !important;
        column-gap: 10% !important;
        align-items: stretch;
        max-width: none !important;
        padding: 64px var(--alma-tabs-container) !important;
    }

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

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

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) > h2 {
        margin: 0 0 96px !important;
    }

    /* één tab: pil van 64px, tekst links, rondje rechts */
    .tabsblock-tab {
        margin: 0 0 8px !important;

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

        > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            min-height: 64px;
            flex-wrap: nowrap !important; /* lange tekst breekt, het rondje blijft rechts */
            align-items: center !important;
            gap: 24px;
            padding: 4px 4px 4px 24px !important;
            border-radius: 32px !important;
            background-color: rgba(255, 255, 255, 0.7) !important;

            /* hover-verloop als laag, zodat het kan infaden */
            &::before {
                content: '';
                position: absolute;
                inset: 0;
                z-index: -1;
                background: radial-gradient(100% 560% at 0 0, var(--alma-roze), var(--alma-donker-blauw));
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            /* het BCE-nummericoon links */
            > .wp-block-kadence-vector {
                display: none !important;
            }
        }

        /* via de kolom: wint van de plugin (flex: inherit !important) */
        > :is(.kt-inside-inner-col, .kadence-inner-column-inner) > .tab-content {
            flex: 1 1 auto !important;
            min-width: 0;
        }

        > :is(.kt-inside-inner-col, .kadence-inner-column-inner) > .tab-arrow {
            flex: 0 0 56px !important;
        }

        .tab-content {

            p {
                margin: 0 !important;
                font-size: var(--carmel-font-size-body-large) !important;
                line-height: 140% !important;
                letter-spacing: -0.4px;
                color: var(--alma-donker-blauw) !important;
                transition: color 0.3s ease;
            }
        }

        /* rondje met pijl */
        .tab-arrow {
            position: relative;
            flex: 0 0 56px !important;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: radial-gradient(120% 120% at 0 0, var(--alma-roze) 30%, var(--alma-donker-blauw) 130%);

            .wp-block-kadence-vector {
                display: none !important;
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                margin: auto;
                width: 16px;
                height: 16px;
                background: var(--alma-neutral-0);
                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
            }
        }

        &:is(:hover, :focus-within, .is-active) > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
            &::before {
                opacity: 1;
            }

            .tab-content p {
                color: var(--alma-neutral-0) !important;
            }
        }

        &:has(a) {
            cursor: pointer;
        }
    }

    /* beeld rechts: vult de hoogte van de linkerkolom, afgerond */
    .tab-image {
        > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
            position: relative;
            height: 100%;
            min-height: 400px;
            overflow: hidden;
            border-radius: var(--carmel-radius-lg);
        }

        /* Kadence zet tussen figure en img een verhouding-blok
           (.kb-is-ratio-image, padding-bottom); dat moet ook het hele
           vlak vullen, anders volgt het beeld die verhouding */
        figure,
        .kb-is-ratio-image,
        img {
            position: absolute !important;
            inset: 0;
            width: 100% !important;
            height: 100% !important;
            max-width: none;
            margin: 0 !important;
            padding: 0 !important;
            object-fit: cover;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .tabsblock .tabsblock-tab > :is(.kt-inside-inner-col, .kadence-inner-column-inner)::before {
        transition: none;
    }
}

/* ===============================================================
   Tabs Vertical
   =============================================================== */
.ptrn-tabs-vertical {
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        row-gap: 0 !important;
        padding: 0 !important;
    }

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

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

    h2 {
        max-width: 860px;
        margin: 0 0 80px !important;
    }

    /* het BCE-nummericoon */
    .tab-number {
        display: none !important;
    }

    /* de rij met tabs: geen eigen ruimte (Kadence: 24px) */
    .ptrn-tabs-vertical-tabs > :is(.kt-inside-inner-col, .kadence-inner-column-inner) > .wp-block-kadence-rowlayout {
        margin: 0 !important;

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

    .ptrn-tabs-vertical-tab {
        border-radius: var(--carmel-radius-lg);
        background-color: var(--alma-ac-grijs) !important;

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

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

        figure {
            position: relative;
            height: 384px;
            margin: 24px 0 40px !important;
            overflow: hidden;
            border-radius: var(--carmel-radius-lg);
        }

        /* verhouding-blok van Kadence: het beeld vult de 384px */
        figure .kb-is-ratio-image,
        figure img {
            position: absolute !important;
            inset: 0;
            width: 100% !important;
            height: 100% !important;
            padding: 0 !important;
            object-fit: cover;
        }

        /* tekst + knop onder het beeld */
        .wp-block-kadence-rowlayout > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            grid-template-columns: minmax(0, 1fr) auto !important;
            column-gap: 48px !important;
            align-items: start;
            padding: 0 !important;
        }

        .wp-block-kadence-rowlayout p {
            max-width: 640px;
            margin: 0 !important;
            font-size: 16px !important;
            line-height: 1.5 !important;
            color: var(--carmel-color-text) !important;
        }

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

/* desktop: stroken van 123px, 24px ertussen (plugin: 88 / 16) */
@media (min-width: 783px) {
    .ptrn-tabs-vertical-tabs > .kt-inside-inner-col > div > div.kt-row-column-wrap {
        gap: 24px !important;
    }

    .ptrn-tabs-vertical .ptrn-tabs-vertical-tab {
        flex: 0 0 123px;
        max-width: none;
        min-height: 600px;

        &.is-active {
            flex: 1 1 123px;
        }

        &.is-active > .kt-inside-inner-col {
            width: min(1000px, calc(100cqw - (var(--closed-tabs, 2) * (123px + 24px))));
        }

        &:not(.is-active) .tab-content p {
            line-height: 1 !important;
        }

        /* titel onderin op 32px (Kadence zet er nog 24px marge onder) */
        &:not(.is-active) > .kt-inside-inner-col > :first-child {
            margin-bottom: 0 !important;
        }

        /* het mobiele icoon hoort niet op desktop */
        .accordion__toggle-icon {
            display: none !important;
        }
    }
}

/* mobiel: accordion, met hetzelfde rondje als de FAQ */
@media (max-width: 782px) {
    .ptrn-tabs-vertical {
        h2 {
            margin-bottom: 40px !important;
        }

        .ptrn-tabs-vertical-tabs > .kt-inside-inner-col > div > div.kt-row-column-wrap {
            gap: 8px !important;
        }

        .ptrn-tabs-vertical-tab {
            > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
                padding: 16px !important;
            }

            figure {
                height: 220px;
                margin: 16px 0 24px !important;
            }

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

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

            .accordion__toggle-icon {
                top: 16px;
                right: 16px;
                width: 24px !important;
                height: 24px !important;
                background: linear-gradient(171deg, var(--alma-roze), var(--alma-donker-blauw));

                &::before,
                &::after {
                    background: var(--alma-ac-grijs);
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .tabsblock > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 40px !important;
        padding: 48px !important;
    }

    .tabsblock :is(.kt-inside-inner-col, .kadence-inner-column-inner) > h2 {
        margin-bottom: 40px !important;
    }

    .tabsblock .tab-image > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        min-height: 0;
        aspect-ratio: 708 / 744;
    }
}

@media (max-width: 767px) {
    .tabsblock {
        width: calc(var(--alma-tabs-vw) - 16px) !important;
        margin-inline: calc(50% - var(--alma-tabs-vw) / 2 + 8px) !important;

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

        .tabsblock-tab > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
            min-height: 48px;
            gap: 16px;
            padding: 4px 4px 4px 16px !important;
        }

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

        .tabsblock-tab > :is(.kt-inside-inner-col, .kadence-inner-column-inner) > .tab-arrow {
            flex-basis: 40px !important;
            width: 40px;
            height: 40px;
        }
    }
}