/* Block: FAQ */

.block-faq {
    flex-direction: column;
    gap: var(--spacing-gap-large);

    & .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;
        }

        & .faq-title {
            font-size: var(--font-size-h2-single);
            font-weight: 300;
            line-height: var(--line-height-h2-single);
            letter-spacing: var(--letter-spacing-h2-single);
            margin: 0;
            padding: 0;
            text-wrap: balance;
        }
    }

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

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

    /* ── FAQ list ── */

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

    & .faq-question {
        border-top: 1px solid rgba(143, 131, 112, 0.15);
    }

    & .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.side-text-small { 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(--color-orange);
        }

        &:hover .faq-chevron {
            color: var(--color-orange);
        }
    }

    & .faq-question-title {
        flex: 1;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        transition: color 0.2s ease;
        margin: 0;
    }

    & .faq-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--color-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(--color-dark-sand);
            stroke: var(--color-dark-sand);
            transition: fill 0.2s ease, stroke 0.2s ease;
        }
    }

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

        & .faq-chevron {
            color: var(--color-orange);

            & svg path,
            & svg rect,
            & svg circle,
            & svg polygon,
            & svg polyline,
            & svg line {
                fill: var(--color-orange);
                stroke: var(--color-orange);
            }

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

        & .faq-question-title {
            color: var(--color-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(--color-subtext);
            margin: 0;
        }
    }


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

    & .faq-content {
        background: #F2F2EA;
        border-radius: var(--border-radius-md);
        padding: var(--spacing-gap-medium);
    }

    /* ── Boxed layout ── */

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

        & .faq-header {
            flex: 1 1 0;
            min-width: 0;
            aspect-ratio: 16 / 9;
            background: var(--color-orange);
            border-radius: var(--border-radius-md);
            padding: var(--spacing-gap-medium);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 0;
            color: var(--color-sand);

            & .faq-header-top {
                align-items: flex-start;
                text-align: left;
                gap: 2px;

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

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

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

            & .faq-header-body .faq-description {
                color: var(--color-sand);
                text-align: left;

            }

            & svg path,
            & svg rect,
            & svg circle,
            & svg polygon,
            & svg polyline,
            & svg line {
                fill: var(--color-sand);
                stroke: var(--color-sand);
            }
        }

        & .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;

                & .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;
        }

        &.boxed .block-faq-inner {
            & .faq-header  { aspect-ratio: 1/1 !important; }
        }

        & .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(--color-orange);
            stroke: var(--color-orange);
        }
    }
}