/* ==========================================================================
   APERTURE — FAQ PAGE, "THE MARGIN"
   Approved direction, revision passes 1 to 3 applied. Source of truth is
   approved-artboards/FAQ-The-Margin.dc.html, not the reference build.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   Artboard: padding 150px 72px 130px 108px, max-width 1060, gap 30.
   Note the asymmetry — 108 on the left, 72 on the right. The original build
   collapsed both to one viewport-derived gutter, which is defect B1.
   -------------------------------------------------------------------------- */
.faq-hero {
  display: flex;
  flex-direction: column;
  gap: var(--gap-hero);
  padding: var(--pad-hero-t) var(--gut-hero-r) var(--pad-hero-b) var(--gut-hero-l);
  max-width: 1060px;
}

.faq-hero__title {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--c-display);
  margin: 0;
  font-weight: 400;
}

.faq-hero__rule {
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold) 0%, rgba(201,162,39,0) 100%);
}

.faq-hero__sub {
  font-size: var(--t-subline);
  letter-spacing: var(--ls-subline);
  line-height: var(--lh-subline);
  color: var(--c-body);
  margin: 0;
}

/* --------------------------------------------------------------------------
   SECTION BLOCK — pier plus stack
   -------------------------------------------------------------------------- */
.faq-section {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* THE GRID BREAKS EXACTLY ONCE.
   Section 03 THE PROCESSOR reverses: pier right, stack left, padding mirrored.
   This is deliberate. Do not normalise it. */
.faq-section--reversed { flex-direction: row-reverse; }

/* ---- The pier ---- */
.faq-pier {
  position: relative;
  width: var(--pier-w);
  flex-shrink: 0;
  border-right: 1px solid var(--pier-edge);
  box-shadow: var(--pier-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--pad-stack-t) 0 var(--pad-stack-t) 0;
  gap: 54px;
}

/* On the reversed section the gold edge faces the content, which is now on
   the pier's left. */
.faq-section--reversed .faq-pier {
  border-right: 0;
  border-left: 1px solid var(--pier-edge);
}

/* FOUR distinct gradients. Ruling R4. The reference build flattened all four
   to section 04's value. */
.faq-pier--01 { background: var(--pier-01); }
.faq-pier--02 { background: var(--pier-02); }
.faq-pier--03 { background: var(--pier-03); }
.faq-pier--04 { background: var(--pier-04); }

.faq-pier__numeral {
  font-family: var(--f-display);
  font-size: var(--t-numeral);
  line-height: 1;
  letter-spacing: var(--ls-numeral);
  color: var(--numeral-ink);
}

.faq-pier__trace {
  width: 1px;
  flex-grow: 1;
  background: linear-gradient(180deg, rgba(201,162,39,0.6) 0%, rgba(201,162,39,0) 100%);
}

.faq-pier__name {
  font-family: var(--f-display);
  font-size: var(--t-section);
  letter-spacing: var(--ls-section);
  color: var(--c-gold-bright);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* ---- The stack ---- */
.faq-stack {
  position: relative;
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad-stack-t) var(--gut-stack-out) var(--pad-stack-b) var(--gut-stack-in);
}
.faq-section--reversed .faq-stack {
  padding: var(--pad-stack-t) var(--gut-stack-in) var(--pad-stack-b) var(--gut-stack-out);
}

/* --------------------------------------------------------------------------
   QUESTION AND ANSWER
   Emphasis is a PER-ENTRY property. It is never a function of position.
   Defect B3: the reference build suppressed the rule with
   .qa:first-child { border-top: none }, which silently demoted TWO of the
   three emphasised answers, not one — the report undercounted. On the
   artboard, section 01's second entry and section 02's FIRST entry both
   carry the gold rule.
   -------------------------------------------------------------------------- */
.faq-qa {
  display: flex;
  flex-direction: column;
  gap: var(--gap-qa);
  border-top: 1px solid var(--rule-quiet);
  padding: var(--qa-rule-above) 0 var(--qa-rule-below) 0;
}

/* An entry that opens its stack has no rule above it and no top padding,
   UNLESS it is emphasised, in which case the gold rule is the point. */
.faq-qa--opening {
  border-top: 0;
  padding-top: 0;
}

.faq-qa--emphasis        { border-top-color: var(--rule-gold); }
.faq-qa--emphasis.faq-qa--opening {
  border-top: 1px solid var(--rule-gold);
  padding-top: 0;                 /* artboard: entry 75 has padding-top 0 */
}

.faq-qa__q {
  font-family: var(--f-display);
  font-size: var(--t-question);
  line-height: var(--lh-question);
  letter-spacing: var(--ls-question);
  color: var(--c-display);
  margin: 0;
  font-weight: 400;
}
.faq-qa--emphasis .faq-qa__q { color: var(--c-gold-bright); }

.faq-qa__a {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-body);
  max-width: var(--measure);
  margin: 0;
}
.faq-qa--emphasis .faq-qa__a { color: var(--c-body-bright); }

/* --------------------------------------------------------------------------
   CLOSING STATEMENT
   -------------------------------------------------------------------------- */
.faq-closing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: calc(70px + 60 * var(--span) / 1050) calc(24px + 96 * var(--span) / 1050)
           calc(40px + 20 * var(--span) / 1050) calc(24px + 96 * var(--span) / 1050);
}

.faq-closing__pool {
  position: absolute;
  top: 0; left: 15%; right: 15%; bottom: 0;
  background: radial-gradient(ellipse 760px 340px at 50% 50%,
    rgba(var(--c-light), 0.12) 0%, rgba(var(--c-light), 0) 62%);
}

.faq-closing__line {
  position: relative;
  font-family: var(--f-display);
  font-size: var(--t-closing);
  line-height: var(--lh-closing);
  letter-spacing: var(--ls-closing);
  color: var(--c-display);
  margin: 0;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   BELOW 760 — the pier lies down
   Ruling R8. The spec states both 900 (section 5) and 760 (section 7); 760 is
   the later document and is what the reference implemented. The pier is a
   desktop device: it becomes a horizontal lintel above its section, carrying
   the numeral and the name set horizontally, and the stack runs full width.
   The 03 reversal has no meaning in one column and is dropped.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  .faq-section,
  .faq-section--reversed {
    flex-direction: column;
  }

  .faq-pier {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 26px var(--gut-stack-in);
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--pier-edge);
    box-shadow: none;
  }
  .faq-section--reversed .faq-pier {
    border-left: 0;
    border-bottom: 1px solid var(--pier-edge);
  }

  .faq-pier__trace {
    width: auto;
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(90deg, rgba(201,162,39,0.6) 0%, rgba(201,162,39,0) 100%);
  }

  .faq-pier__name {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .faq-stack,
  .faq-section--reversed .faq-stack {
    padding: 40px var(--gut-stack-in) 44px var(--gut-stack-in);
  }

  .faq-hero {
    padding-left: var(--gut-stack-in);
    padding-right: var(--gut-stack-in);
  }
}