/* ==========================================================================
   RentOS — FAQs
   --------------------------------------------------------------------------
   Desktop 123:6510 (1302x996 at 309,4659) · mobile 123:9964 (354x669).

   The section is deliberately narrower than the page container — 1302, which
   is the --content-width-narrow token.

   Annotation @ 123:6510: the white pill behind each question hugs its own text
   at rest (312px for a short one) and grows to the full row (1207) on hover,
   then the answer drops down on click.

   Growing from content width to full width is done with min-width, not width:
   a transition between `fit-content` and a length does not animate, but a
   percentage min-width does — the box simply grows past its content size.
   ========================================================================== */

.faqs {
    background-color: #edefec;          /* continues the band */
    /* Figma mobile: Customers ends 4247, FAQs starts 4327 -> 80. */
    padding-top: 80px;
}

.faqs__inner {
    width: 100%;
    padding: 0 18px;                    /* section at left 15, 354 wide */
    margin: 0 auto;
}

/* ------------------------------------------------------------------ Mobile */
.faqs__title {
    font-size: 38px;                    /* @ 123:8001 */
    line-height: 1;
    font-weight: var(--fw-semibold);
    color: var(--brand-dark-green);
    text-align: center;
}

.faqs__list {
    margin: 14px 0 0;                   /* title h53 -> list 67 */
}

.faq + .faq {
    margin-top: 20px;                   /* items 60 apart, 40 tall @ 123:7952 */
}

.faq__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* The white box — holds question AND answer, hugs its text at rest and grows
   to 305 (mobile) / 1207 (desktop) on hover or when open. */
.faq {
    position: relative;
}

.faq__box {
    width: fit-content;
    min-width: 0;
    max-width: calc(100% - 49px);       /* stop short of the toggle at 314 */
    background-color: var(--white);
    border-radius: 10px;                /* @ 123:7952 */
    transition: min-width .35s var(--ease-out-quint);
}

.faq:hover .faq__box,
.faq:focus-within .faq__box,
.faq.is-open .faq__box {
    min-width: calc(100% - 49px);       /* 305 of the 354 row @ 123:7966 */
}

.faq__head {
    display: flex;
    align-items: center;
    width: 100%;
    /* min-height, not height: a question long enough to wrap (Figma's is 75
       tall for the 2-line one) must grow the pill rather than overflow it. */
    min-height: 40px;                   /* @ 123:7952 */
    padding: 12px 10px;
    background: none;
    border: 0;
    font-size: 13px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: var(--brand-dark-green);
    text-align: left;
    cursor: pointer;
}

.faq__q {
    display: block;
}

/* Toggle — a white rounded square with a + that becomes a − when open,
   rebuilt from the two stroke lines in 123:6516 rather than the flat SVG so
   it can carry the state. */
/* Anchored to the ROW's right edge (Figma keeps it at a fixed x=314 / x=1222),
   outside the white box, so it holds position while the box grows. */
.faq__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: var(--white);
    border-radius: 11.429px;            /* @ 123:7970 */
}

.faq__toggle::before,
.faq__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    background-color: var(--brand-dark-green);
    border-radius: 1px;
    transform: translate(-50%, -50%);
    transition: transform .3s var(--ease-out-quint), opacity .3s;
}

.faq__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq.is-open .faq__toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

/* Panel — grid-rows 0fr -> 1fr animates to the content's natural height
   without needing a hardcoded max-height. */
.faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--ease-out-quint);
}

.faq__panel[hidden] {
    display: grid;                      /* keep it animatable, not display:none */
}

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

.faq__panel-inner {
    overflow: hidden;
    min-height: 0;
}

.faq__answer {
    padding: 0 10px 16px;               /* answer lives INSIDE the white box */
    font-size: 13px;
    line-height: 20px;
    color: #787878;
}

@media (prefers-reduced-motion: reduce) {
    .faq__pill,
    .faq__panel,
    .faq__toggle::before,
    .faq__toggle::after {
        transition: none;
    }
}

/* ----------------------------------------------------------------- Desktop */
@media screen and (min-width: 992px) {
    /* Figma: Customers ends 4539, FAQs starts 4659 -> 120. */
    .faqs {
        padding-top: 120px;
    }

    .faqs__inner {
        width: min(var(--content-width-narrow), calc(100% - 80px));
        padding: 0;
    }

    .faqs__title {
        font-size: 68px;                /* @ 123:6511 */
        line-height: 80px;
    }

    .faqs__list {
        margin-top: 50px;               /* title renders 80 -> list at 130 */
    }

    .faq + .faq {
        margin-top: 30px;               /* items 100 apart, 70 tall @ 123:6519 */
    }

    .faq__box {
        max-width: calc(100% - 93px);   /* 1207 of 1300 @ 123:6514 */
        border-radius: 20px;
    }

    .faq:hover .faq__box,
    .faq:focus-within .faq__box,
    .faq.is-open .faq__box {
        min-width: calc(100% - 93px);
    }

    .faq__head {
        min-height: 70px;               /* @ 123:6514 */
        padding: 20px 25px;
        font-size: 22px;                /* @ 123:6515 */
        line-height: 1.2;
    }

    .faq__toggle {
        width: 78px;                    /* @ 123:6516 */
        height: 70px;
        border-radius: 20px;
    }

    .faq__toggle::before,
    .faq__toggle::after {
        width: 16px;
    }

    .faq__answer {
        padding: 0 27px 40px;           /* answer at left 27; box 166 tall */
        max-width: 1046px;              /* 1019 + the 27 inset */
        font-size: 20px;                /* @ 123:6561 */
        line-height: 30px;
    }
}