/* ============================================================
   FAQ SECTION
   ============================================================ */

.faq-section {
    position: relative;

    padding:
        var(--ds-space-24)
        var(--ds-space-6);

    background: var(--ds-muted);

    border-top:
        1px solid
        var(--ds-border);

    border-bottom:
        1px solid
        var(--ds-border);

    overflow: hidden;
}


.faq-section__inner {
    max-width: 900px;

    margin-inline: auto;
}


/* ============================================================
   HEADING
   ============================================================ */

.faq-section__heading {
    max-width: 700px;

    margin: 0 auto var(--ds-space-16);

    text-align: center;
}


.faq-section__eyebrow {
    display: inline-block;

    margin-bottom: var(--ds-space-4);

    color: var(--ds-primary);

    font-size: 0.75rem;

    font-weight: 650;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.faq-section__title {
    margin: 0 0 var(--ds-space-5);

    color: var(--ds-foreground);

    font-family: var(--ds-font-heading);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.1;

    letter-spacing: -0.025em;

    font-weight: 700;
}


.faq-section__subtitle {
    max-width: 55ch;

    margin: 0 auto;

    color: var(--ds-muted-foreground);

    font-size: 1.05rem;

    line-height: 1.65;
}


/* ============================================================
   FAQ LIST
   ============================================================ */

.faq-list {
    border-top:
        1px solid
        var(--ds-border);
}


/* ============================================================
   ITEM
   ============================================================ */

.faq-item {
    border-bottom:
        1px solid
        var(--ds-border);
}


/* ============================================================
   TRIGGER
   ============================================================ */

.faq-item__trigger {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        76px
        minmax(0, 1fr)
        42px;

    align-items: center;

    gap: var(--ds-space-4);

    padding:
        var(--ds-space-6)
        0;

    border: 0;

    background: transparent;

    color: var(--ds-foreground);

    text-align: left;

    cursor: pointer;
}


/* ============================================================
   NUMBER
   ============================================================ */

.faq-item__number {
    color:
        color-mix(
            in oklch,
            var(--ds-primary) 13%,
            transparent
        );

    font-family: var(--ds-font-heading);

    font-size: 3.5rem;

    font-weight: 750;

    line-height: 0.9;

    letter-spacing: -0.07em;

    user-select: none;
}


/* ============================================================
   QUESTION
   ============================================================ */

.faq-item__question {
    padding-right: var(--ds-space-4);

    color: var(--ds-foreground);

    font-size: 1.05rem;

    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   ICON
   ============================================================ */

.faq-item__icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--ds-border);

    border-radius: 999px;

    color: var(--ds-muted-foreground);

    transition:
        color var(--ds-duration-normal) var(--ds-ease-standard),
        border-color var(--ds-duration-normal) var(--ds-ease-standard),
        background-color var(--ds-duration-normal) var(--ds-ease-standard),
        transform var(--ds-duration-normal) var(--ds-ease-standard);
}


.faq-item__icon svg {
    width: 17px;
    height: 17px;

    stroke-width: 1.8;
}


/* ============================================================
   HOVER
   ============================================================ */

.faq-item__trigger:hover .faq-item__question {
    color: var(--ds-primary);
}


.faq-item__trigger:hover .faq-item__icon {
    color: var(--ds-primary);

    border-color:
        color-mix(
            in oklch,
            var(--ds-primary) 35%,
            var(--ds-border)
        );

    background:
        color-mix(
            in oklch,
            var(--ds-primary) 7%,
            var(--ds-muted)
        );
}


/* ============================================================
   ANSWER
   ============================================================ */

.faq-item__answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows
            var(--ds-duration-slow)
            var(--ds-ease-emphasized);
}


.faq-item__answer-inner {
    min-height: 0;

    overflow: hidden;

    padding-left: 76px;
}


.faq-item__answer p {
    max-width: 65ch;

    margin: 0;

    padding:
        0
        50px
        var(--ds-space-6)
        0;

    color: var(--ds-muted-foreground);

    font-size: 0.95rem;

    line-height: 1.7;
}


/* ============================================================
   OPEN STATE
   ============================================================ */

.faq-item.is-open .faq-item__answer {
    grid-template-rows: 1fr;
}


.faq-item.is-open .faq-item__icon {
    color: var(--ds-primary);

    border-color: var(--ds-primary);

    background:
        color-mix(
            in oklch,
            var(--ds-primary) 8%,
            var(--ds-muted)
        );

    transform: rotate(45deg);
}


.faq-item.is-open .faq-item__number {
    color:
        color-mix(
            in oklch,
            var(--ds-primary) 22%,
            transparent
        );
}


/* ============================================================
   FOCUS
   ============================================================ */

.faq-item__trigger:focus-visible {
    outline:
        2px solid
        var(--ds-ring);

    outline-offset: 4px;

    border-radius: var(--ds-radius-sm);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {

    .faq-section {
        padding:
            var(--ds-space-16)
            var(--ds-space-4);
    }


    .faq-section__heading {
        margin-bottom: var(--ds-space-10);
    }


    .faq-item__trigger {
        grid-template-columns:
            54px
            minmax(0, 1fr)
            36px;

        gap: var(--ds-space-3);

        padding:
            var(--ds-space-5)
            0;
    }


    .faq-item__number {
        font-size: 2.75rem;
    }


    .faq-item__question {
        font-size: 0.95rem;
    }


    .faq-item__icon {
        width: 32px;
        height: 32px;
    }


    .faq-item__answer-inner {
        padding-left: 54px;
    }


    .faq-item__answer p {
        padding-right: 0;

        font-size: 0.9rem;
    }
}