/* Block: FAQ */

/* Superfícies: no Boxed, .block-faq-inner é data-surface="box" (restaura o
   fill de marca — crítico no theme orange) e .faq-header é
   data-surface="primary". .faq-content também é box. O painel pinta com
   --faq-header-bg / --faq-header-fg (fallback: --system-bg-primary /
   --system-fg-on-primary). Override ACF pousa nesses vars no .faq-header.
   Chevron / hover do acordeão usam --system-fg-primary. */
.block-faq {
    flex-direction: column;

    & .block-faq-inner {
        width: 100%;
        max-width: 786px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    /* ── Header ── */

    & .faq-header {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 2cqi, 25px);
    }

    & .faq-header-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;

        & .single-chips {
            align-self: center;
            color: var(--system-chips-fg);
        }

        & .faq-title {
            margin: 0;
            padding: 0;
            text-wrap: balance;
        }
    }

    & .faq-header-body {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 2cqi, 28px);

        & .faq-description {
            color: var(--system-fg);
            margin: 0;
            text-align: center;
        }
    }

    /* ── FAQ list ── */

    & .faq-list {
        display: flex;
        flex-direction: column;
    }

    & .faq-question {
        border-top: 1px solid var(--system-border-hairline);
    }

    & .faq-question:first-child { border-top: unset;
        & .faq-question-header { padding-top:0; }}

    & .faq-question:last-child { border-bottom: unset; 
        & .faq-question-header { padding-bottom:0; }
        & p.text-body-sm { padding-top: clamp(15px, 1.8cqi, 25px); }
        & .faq-answer { padding-bottom:0; }
    }

    & .faq-question-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        padding: clamp(15px, 1.8cqi, 25px) 0;
        cursor: pointer;
        background: transparent;
        border: none;
        text-align: left;
        transition: opacity 0.15s ease;

        &:hover .faq-question-title {
            color: var(--system-fg-primary);
        }

        &:hover .faq-chevron {
            color: var(--system-fg-primary);
        }
    }

    & .faq-question-title {
        flex: 1;
        font-weight: 400;
        color: var(--system-fg-muted);
        transition: color 0.2s ease;
        margin: 0;
    }

    & .faq-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--brand-dark-sand);
        transition: color 0.2s ease;

        & svg {
            width: 16px;
            height: 16px;
            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        & svg path,
        & svg rect,
        & svg circle,
        & svg polygon,
        & svg polyline,
        & svg line {
            fill: var(--brand-dark-sand);
            stroke: var(--brand-dark-sand);
            transition: fill 0.2s ease, stroke 0.2s ease;
        }
    }

    & .faq-question.is-open {
        & .faq-question-header {
            cursor: default;
        }

        & .faq-chevron {
            color: var(--system-fg-primary);

            & svg path,
            & svg rect,
            & svg circle,
            & svg polygon,
            & svg polyline,
            & svg line {
                fill: var(--system-fg-primary);
                stroke: var(--system-fg-primary);
            }

            & svg {
                transform: rotate(180deg);
            }
        }

        & .faq-question-title {
            color: var(--brand-dark-sand);
        }
    }

    /* ── Accordion via grid-template-rows ──
       Outer: grid controls height.
       .faq-answer-collapse: overflow hidden (never has padding — clipping layer).
       .faq-answer: carries the bottom padding — lives inside overflow:hidden so it
       collapses cleanly when the grid row is 0fr. */

    & .faq-answer-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    & .faq-answer-collapse {
        overflow: hidden;
    }

    & .faq-answer {
        padding-bottom: clamp(18px, 1.8cqi, 28px);

        & p {
            color: var(--system-fg-muted);
            margin: 0;
        }
    }


    & .faq-question.is-open .faq-answer-wrap {
        grid-template-rows: 1fr;
    }

    & .faq-content {
        background: var(--system-bg-box);
        border-radius: var(--system-border-radius-md);
        padding: var(--system-spacing-inset-lg);

        @container page-content (max-width: 1500px) {
            padding: var(--system-spacing-inset-md);
        }
    }

    /* ── Boxed layout ── */

    &.boxed .block-faq-inner {
        max-width: none;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        background: var(--system-bg-box);
        padding: 10px;
        border-radius: var(--system-border-radius-md);

        & .faq-header {
            flex: 1 1 0;
            min-width: 0;
            aspect-ratio: 16 / 9;
            background: var(--faq-header-bg, var(--system-bg-primary));
            border-radius: var(--system-border-radius-md);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 0;
            color: var(--faq-header-fg, var(--system-fg-on-primary));
            padding: var(--system-spacing-inset-lg);

            @container page-content (max-width: 1500px) {
                padding: var(--system-spacing-inset-md);
            }

            & .faq-header-top {
                align-items: flex-start;
                text-align: left;
                gap:var(--system-spacing-gap-sm);

                & .faq-title {
                    color: currentColor;
                }

                & .single-chips {
                    align-self: flex-start;
                    color: var(--system-chips-fg);
                }
            }

            & .faq-header-body { margin-top:auto; }

            & .faq-header-body .faq-description {
                color: currentColor;
                text-align: left;

            }

            & svg path,
            & svg rect,
            & svg circle,
            & svg polygon,
            & svg polyline,
            & svg line {
                fill: currentColor;
                stroke: currentColor;
            }
        }

        & .faq-content {
            flex: 1 1 0;
            min-width: 0;
            align-items: flex-end;
            display: flex;
        }
    }

    /* ── Responsive ── */

    @container page-content (max-width: 1024px) {
        &.boxed .block-faq-inner {
            flex-direction: column;

            & .faq-header {
                align-items: center;
                gap: 15px;
                aspect-ratio: unset;

                & .faq-header-top {
                    align-items: center;
                    text-align: center;

                    & .single-chips {
                        align-self: center;
                    }
                }

                & .faq-header-body .faq-description {
                    text-align: center;
                }
            }
        }
    }

    @container page-content (max-width: 768px) {
        & .faq-header-top {
            align-items: center;
            text-align: center;
            justify-content: center;
        }

        & .block-faq-inner { gap: 30px; }
    }

    & .faq-question-header:hover .faq-chevron {
        & svg path,
        & svg rect,
        & svg circle,
        & svg polygon,
        & svg polyline,
        & svg line {
            fill: var(--system-fg-primary);
            stroke: var(--system-fg-primary);
        }
    }
}