/* Giant Entity: /faq (look-v3 section 12, Part C). A statement head, then six sheets: the group's
   name at the heading step under the pieces it concerns, the questions as the accordion beside it.
   The group's drawing waits in plan on its lattice and fills, in its pillars' gestures, while any of
   its answers is open; :has does it, so it needs no script. */

/* ---------- The statement head (shared by the Part C pages that carry no drawing in their head) ---------- */

.doc--statement .doc__intro { padding-bottom: var(--sp-l); }
@media (min-width: 1100px) {
  .doc--statement .doc__intro { grid-column: 1 / span 8; }
}

/* ---------- Sheets ---------- */

.faq { display: grid; padding-bottom: var(--sp-l); }
.faq-group {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-s);
  padding-block: var(--sp-m) var(--sp-l);
  border-top: 1px solid var(--line);
}
.faq-group > * { grid-column: 1 / -1; min-width: 0; }
.faq-group__head { display: grid; gap: var(--sp-s); align-content: start; }
.faq-group__name {
  font-size: var(--fs-heading);
  font-stretch: 125%;
  font-weight: var(--heading-weight);
  line-height: 1;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
  max-width: 12ch;
}
.faq-group__art { height: clamp(4.5rem, 3rem + 4vw, 12rem); display: flex; align-items: flex-end; }
.faq-group__art .dw { height: 100%; width: auto; max-width: 100%; margin: 0; }
.faq-group__list .qa-list { margin-top: 0; }
.faq-group__list > p { max-width: var(--measure); margin-bottom: var(--sp-s); }

@media (min-width: 1100px) {
  .faq-group__head { grid-column: 1 / span 5; position: sticky; top: var(--sp-m); align-self: start; }
  .faq-group__list { grid-column: 6 / -1; }
  /* beside the head, the sheet's own rule is the list's top; a second one under it would double it */
  .faq-group__list > .qa-list:first-child { border-top: 0; }
}

/* ---------- The group's drawing: plan until an answer is open, then built ---------- */

.faq-group .dw .pc__plan { opacity: 1; transition: opacity 140ms var(--ease-out); }
.faq-group .dw .body__lattice { opacity: 1; transition: opacity 240ms var(--ease-out); }
.faq-group:not(:has(.qa[open])) .dw :is(.pc, .fc, .body__shadow) { opacity: 0; }
.faq-group:has(.qa[open]) .dw .pc__plan,
.faq-group:has(.qa[open]) .dw .body__lattice { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .faq-group:has(.qa[open]) .dw .pc.m-ultra { animation: dw-fill 240ms steps(4, jump-none) both; }
  .faq-group:has(.qa[open]) .dw .pc.m-rose { animation: dw-run 240ms steps(6, jump-none) both; }
  .faq-group:has(.qa[open]) .dw .pc.m-citron { animation: dw-rise 240ms var(--ease-out) both; }
  .faq-group:has(.qa[open]) .dw .fc { animation: dw-faces 240ms var(--ease-out) both; }
}

@media (forced-colors: active) {
  .faq-group .dw .pc__plan { stroke: CanvasText; }
}