/**
 * FAQ (Figma: SECTIONS → FAQ). Links label + sectiekop (2–4 regels, ±50
 * tekens), rechts de vragen in een kolom van 640px die 40px voor de
 * rechterrand van de content stopt.
 *
 * Patronen (.ptrn-faq):
 * - FAQ - Large: plugin-blok faq-alle, de vragen per categorie met een
 *   categoriekop (1 regel, ±24 tekens);
 * - FAQ - Small: plugin-blok faq-categorie, één categorie.
 * Vraag 1–2 regels (±48 tekens), antwoord 2–3 regels (±120–200 tekens).
 *
 * Opmaak (gemeten in Figma, 1600 breed):
 * - categoriekop VAG 32px; 56px tot de eerste vraag en tussen twee
 *   categorieën;
 * - vraag Heading/H5 (VAG 24px / 120%, mobiel 20px), 20px boven en
 *   onder, een lijn van 1px (#D4D4D4) erboven;
 * - rondje van 24px met verloop roze → donkerblauw en een lichte plus
 *   (open: min);
 * - antwoord Body Medium (18px, mobiel 16px; regelhoogte 150% zoals de
 *   rest van de site, Figma 120%), 20px eronder.
 *
 * De accordion zelf (openen/sluiten) komt uit de plugin
 * (assets/css/shared/faq-accordion.css + js); hier alleen het uiterlijk.
 * Voorkant en editor: het blok wordt in de editor server-side gerenderd,
 * dus dezelfde klassen.
 */

.ptrn-faq {
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) 640px !important;
        column-gap: 80px !important;
        align-items: start;
        padding: 0 40px 0 0 !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 {
        max-width: 400px; /* kop in ±3 regels, zoals Figma */
        margin: 0 !important;
    }
}

/* De vragen (ook buiten het patroon, bv. op de Infohub: zelfde stijl) */
.carmel-faq-accordion__category {
    margin-bottom: 56px;

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

.carmel-faq-accordion__category-title {
    margin: 0 0 56px !important;
    font-size: var(--carmel-font-size-h3) !important;
    line-height: 1 !important;
    color: var(--alma-donker-blauw);
}

.carmel-faq-accordion__item {
    border: 0 !important;
    border-top: 1px solid var(--alma-neutral-300, #D4D4D4) !important;
}

.carmel-faq-accordion__question {
    gap: 16px;
    padding: 20px 0;
    color: var(--alma-donker-blauw);

    &:is(:hover, :active, :focus) {
        color: var(--alma-donker-blauw);
    }

    &:focus-visible {
        outline: 2px solid var(--alma-donker-blauw);
        outline-offset: 4px;
        border-radius: 4px;
    }
}

/* vraag = Heading/H5 (Figma) */
.carmel-faq-accordion__question-text {
    font-family: var(--carmel-font-heading) !important;
    font-size: var(--carmel-font-size-h5) !important;
    font-weight: 700 !important;
    line-height: var(--carmel-line-height-h5) !important;
    letter-spacing: 0 !important;
    color: var(--alma-donker-blauw) !important;
    hyphens: manual; /* geen afbreekstreepjes midden in een vraag */
}

/* rondje met verloop en een lichte plus/min */
.carmel-faq-accordion__toggle-icon {
    padding: 0;
    background: linear-gradient(171deg, var(--alma-roze), var(--alma-donker-blauw));
    color: var(--alma-ac-grijs);

    &::before,
    &::after {
        border-radius: 1px;
    }
}

.carmel-faq-accordion__item.is-open .carmel-faq-accordion__answer {
    padding-bottom: 20px;
}

.carmel-faq-accordion__answer-inner {
    color: var(--alma-donker-blauw);

    /* antwoord = Body Medium (Figma); !important: de gewone
       alineagrootte (20px) wint anders */
    p {
        margin: 0 0 12px !important;
        font-size: var(--carmel-font-size-body-medium) !important;
        line-height: var(--carmel-line-height-body-medium) !important;
    }

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

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

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

        :is(.kt-inside-inner-col, .kadence-inner-column-inner) > h2 {
            max-width: none;
        }
    }

    .carmel-faq-accordion__category {
        margin-bottom: 40px;
    }

    .carmel-faq-accordion__category-title {
        margin-bottom: 24px !important;
        font-size: var(--carmel-font-size-h3-mobile) !important;
    }

    .carmel-faq-accordion__question {
        padding: 16px 0;
    }

    .carmel-faq-accordion__question-text {
        font-size: var(--carmel-font-size-h5-mobile) !important;
    }

    .carmel-faq-accordion__answer-inner p {
        font-size: var(--carmel-font-size-body-medium-mobile) !important;
    }
}