/* ==========================================================================
   FAQ — page-specific layout only.

   Everything visual here is the shared system: .hero, .accordion,
   .check-list, .cta-block--photo, .reveal. This file positions three
   things and nothing else — the centred hero, the photographic band, and the
   white card the accordion sits on.

   The single-open behaviour is NOT here and NOT new: [data-offer-exclusive]
   on the <ul> is read by initOffers() in js/main.js, the same handler the
   INSIGHTS step accordion uses. The reduced-motion fallback for the panel
   transition already lives in components.css.
   ========================================================================== */

/* ==========================================================================
   1. HERO — centred, same backdrop as every other page hero.
   ========================================================================== */

.faq-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.faq-hero__sub {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  max-width: 48ch;
}

/* ==========================================================================
   2. FAQ BAND — brand white, faded warm, with a paper ripple.

   Light band, so there is no .on-dark here and no scrim: the page reads as
   white paper with the cream card resting on it.

   Two parts, same construction as the .hero backdrop in components.css —
   a gradient on the section, texture on a ::before at z-index -1 under
   isolation, so the texture never lands on the card or the copy.

   The fade runs white at the top into the faintest warm off-white at the
   bottom, which is what keeps a full-height band from reading as a flat
   slab. It stays well inside the neutral family — this is not a cream
   background, it is white that warms very slightly as it falls.
   ========================================================================== */

.faq-band {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(72% 55% at 50% 0%, rgba(255, 242, 202, 0.30), transparent 68%),
    linear-gradient(180deg, var(--white) 0%, #FFFCF4 58%, #FDF7EA 100%);
}

/* Paper ripple. Same feTurbulence trick as the hero grain, but the frequency
   is stretched hard on one axis (0.005 across, 0.032 down), which pulls the
   noise into soft horizontal undulations — the mottling of a sheet that has
   taken on a little moisture, rather than the fine tooth of the hero grain.
   0.05 is deliberately near the floor: it should register as surface, never
   as a pattern. Check on a calibrated screen before raising it. */
.faq-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.032' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size: 560px 560px;
}

/* ==========================================================================
   3. FAQ CARD — the cream surface holding the accordion.
   ========================================================================== */

.faq-card {
  --faq-card-pad: clamp(var(--sp-3), 3vw, var(--sp-5));

  /* The accordion paints no background of its own, so the rows simply sit on
     the cream. The one thing that does need moving is the hairline: --line is
     tuned for white and all but disappears on cream, so the rules dividing
     the questions step down to the stronger value. */
  --line: var(--line-strong);
  color: var(--text);

  /* ~86% of the container, centred — wide enough that a long question still
     sits on one line at desktop, narrow enough to stay a card. */
  width: min(100%, 1040px);
  margin-inline: auto;
  padding: var(--faq-card-pad) clamp(var(--sp-3), 3.5vw, var(--sp-6));
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* The card already draws the top and bottom edge, so the first and last rows
   would otherwise sit on a doubled rule. */
.faq-list > .accordion__item:first-child { border-top: 0; }
.faq-list > .accordion__item:last-child { border-bottom: 0; }

/* The question is an <h2> for document structure; the button inside it
   carries the type styling, so the heading must not add its own. */
.faq-list .accordion__heading { font-size: inherit; font-weight: inherit; }

.faq-list .accordion__head { padding-block: var(--sp-3); }

/* Answers are written one thought per line. The line breaks are the copy, so
   they are real paragraphs on a tight gap rather than <br>, and the default
   p + p margin is cancelled. */
.faq-answer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: var(--measure);
}
.faq-answer > p + p { margin-top: 0; }
.faq-answer strong { color: var(--charcoal); }
.faq-answer .check-list { margin-block: var(--sp-1); }