/*
 * Academy FAQs (/academy/faqs/) — section styles
 * Same grid as the rest of the site: 5 columns inside the container, 16px gap, c = (100% - 64px) / 5.
 */

.faq-head {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    align-items:    flex-start;
}
.faq-title {
    margin:    0;
    font-size: clamp(72px, 7.222vw, 104px);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.faq-hero { padding: 48px 0 0; }

.faq-hero__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap:            16px;
    align-items:           end;
}
.faq-hero__head { grid-column: 1 / 5; }
.faq-hero__head .faq-title { max-width: 78%; } /* ~ 3 columns + a bit: "asked questions" fits on one line */
.faq-hero__text { grid-column: 5; margin: 0; }

/* ── Search + topics + questions ────────────────────────────────────────── */
.faq-list { padding: 48px 0 300px; }

.faq-search {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       14px 8px;
    color:         var(--color-muted);
    background:    var(--color-light);
    border-bottom: 1px solid rgba(14, 14, 16, .06);
    cursor:        text;
}
.faq-search__icon { flex: 0 0 20px; }
.faq-search__input {
    flex:           1;
    min-width:      0;
    padding:        0;
    font:           inherit;
    line-height:    var(--line-height);
    letter-spacing: inherit;
    color:          var(--color-text);
    background:     none;
    border:         0;
    outline:        0;
    appearance:     none;
}
.faq-search__input::placeholder { color: var(--color-muted); opacity: 1; }
.faq-search__input::-webkit-search-cancel-button { display: none; }
.faq-search:focus-within { border-bottom-color: var(--color-muted); }

.faq-list__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap:            16px;
    align-items:           start;
    margin-top:            40px;
}

.faq-chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.faq-chip {
    padding:     6px 16px;
    font:        inherit;
    line-height: var(--line-height);
    color:       var(--color-text);
    background:  rgba(14, 14, 16, .04);
    border:      0;
    cursor:      pointer;
    transition:  background-color var(--transition), color var(--transition);
}
.faq-chip:hover { background: rgba(14, 14, 16, .1); }
.faq-chip.is-active { color: var(--color-light); background: var(--color-dark); }

.faq-items { grid-column: 3 / 6; display: flex; flex-direction: column; }
.faq-item[hidden] { display: none; }
.faq-item:not([hidden]) ~ .faq-item:not([hidden]) { margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(14, 14, 16, .08); }
.faq-item__title { margin: 0; }
.faq-item__toggle {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    width:           100%;
    padding:         0;
    font:            inherit;
    font-size:       var(--fs-title);
    font-weight:     var(--fw-medium);
    line-height:     var(--line-height);
    letter-spacing:  var(--ls-tight);
    text-align:      left;
    color:           var(--color-text);
    background:      none;
    border:          0;
    cursor:          pointer;
}
.faq-item__toggle--static { cursor: default; }
.faq-item__icon { flex: 0 0 24px; transition: rotate .3s ease; }
.faq-item.is-open .faq-item__icon { rotate: 90deg; }
.faq-item__toggle:hover .faq-item__icon { opacity: .6; }

/* Answer: height animates between 0 and its content (grid trick, no JS measuring) */
.faq-item__panel {
    display:            grid;
    grid-template-rows: 0fr;
    transition:         grid-template-rows .35s ease;
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__answer {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    max-width:      calc(100% - 69px);
    min-height:     0;
    overflow:       hidden;
    opacity:        0;
    transition:     opacity .3s ease;
}
.faq-item.is-open .faq-item__answer { padding-top: 24px; opacity: 1; }
.faq-item__answer p { margin: 0; }

.faq-items__empty { margin: 0; color: var(--color-muted); }
.faq-items__empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .faq-item__icon, .faq-item__panel, .faq-item__answer { transition: none; }
}

/* ── Tablet / mobile ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .faq-title { font-size: 64px; }
    .faq-hero__head .faq-title { max-width: none; }

    .faq-hero { padding-top: 40px; }
    .faq-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }

    .faq-list { padding: 24px 0 104px; }
    .faq-list__grid { display: flex; flex-direction: column; align-items: stretch; gap: 32px; margin-top: 24px; }
    .faq-chips { order: 0; }
    .faq-items { order: 1; }
    .faq-item:not([hidden]) ~ .faq-item:not([hidden]) { margin-top: 24px; padding-top: 24px; }
    .faq-item__toggle { font-size: var(--fs-lead); gap: 24px; }
    .faq-item__answer { max-width: none; }
}