/* ==============================================================
   F3 — FAQ accordion

   The third accordion in the guide, and it follows §8's trigger shape
   deliberately: flex, space-between, an indicator on the right, state
   keyed off [aria-expanded] rather than a second class — and now the
   same plus/minus pair too, so the only things still separating the
   two are the rules and the header. That is the F6 case in a
   sentence.
   ============================================================== */

.faq {
  background: var(--color-surface);
  color: var(--color-ink);
  padding-block: var(--space-7);
}

.faq__inner {
  max-width: var(--faq-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* --- List --------------------------------------------------------
   The wireframe has a rule above the first row and below the last.
   A top rule on the list plus a bottom rule on every item gives both
   without a :last-child exception.
   ------------------------------------------------------------------ */

.faq__list {
  border-top: 1px solid var(--color-faq-rule);
}

.faq__item {
  border-bottom: 1px solid var(--color-faq-rule);
}


/* --- Trigger ------------------------------------------------------ */

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faq-row-gap);

  /* Both, and each does a job: the padding is §8's --space-5 rhythm
     and takes over once a question wraps to two lines; the min holds
     the single-line pitch at §8's height without borrowing its 22px
     type, which would have broken the F2 width derivation. */
  min-height: var(--faq-row-min);
  padding-block: var(--faq-row-pad-block);
  /* Same inline inset as the panel, so a question and its answer
     share a left edge. The rules stay full-bleed to the column. */
  padding-inline: var(--faq-row-pad-inline);

  font-size: var(--text-faq-question);
  font-weight: var(--weight-semibold);
}

/* Same affordance §17 uses, so the two accordions behave alike. The
   underline sits on the label, not the button, so it tracks the text
   rather than the full-width row. */
.faq__trigger:hover .faq__label,
.faq__trigger:focus-visible .faq__label {
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}

.faq__label { min-width: 0; }


/* --- Indicator ---------------------------------------------------- */

/* Box only — stroke and the plus/minus swap are in accordion.css. */
.faq__icon {
  width: var(--faq-icon);
  height: var(--faq-icon);
}


/* --- Panel -------------------------------------------------------- */

.faq__panel {
  padding-block: var(--faq-panel-pad-block);
  padding-inline: var(--faq-row-pad-inline);
}

.faq__text,
.faq__empty {
  max-width: var(--faq-answer-measure);
  margin: 0;
  font-size: var(--text-faq-answer);
  line-height: var(--leading-body);
}

.faq__empty {
  font-style: italic;
  color: var(--color-ink-muted);
}


/* ==============================================================
   F4 — Responsive

   Almost nothing has to move. Measured at 768, 576 and 480 the rows
   are identical to desktop — every question on one line, every row
   72px — because the type is fixed and the column is a max, not a
   width.

   360px is the one real case: all seven questions wrap to two lines
   and the rows grow to 85px, which is correct behaviour rather than
   a fault. But at that width the row's own chrome — 48px of inline
   padding, a 24px gap and the 20px sign — is 92px of a 326px column,
   28% of it, and the label is squeezed to 202px.

   So the chrome shrinks rather than the type. Redefining the two
   tokens on the component re-points the rules that already use them;
   no selector is duplicated, and the trigger and panel cannot fall
   out of alignment because they read the same one.

   479px is where §7 and §19 already break, and it lands just above
   the measured wrap threshold (~452px), so the tighter chrome is in
   place before the questions need it.
   ============================================================== */

@media (max-width: 479px) {

  .faq {
    --faq-row-pad-inline: var(--space-4);
    --faq-row-gap:        var(--space-4);
  }
}