/* ===========================================================================
   The FAQ page (002 FR-020 to FR-026, research R8).

   Nine questions, one of them with four sub-rows. The only section whose
   content legitimately exceeds a viewport, so it flows.

   NO CARD. 001 put the questions on a cream card to protect them from the tile
   arcade; the couple asked to see the design behind them instead. The artwork
   is therefore split into two decorative layers, and the questions sit on the
   first and never reach the second:

     .faq__wash  the pink watercolour (a tile-free crop of 6.png), filling the
                 section from the top down to the band. The tab row, the
                 heading, the questions, the answers and the closing link all
                 sit on it.
     .faq__band  the tile arcade, the LAST thing in the section. It follows the
                 list in the layout, so opening answers pushes it down and text
                 can never overlap a tile, at any width and with any number of
                 answers open.

   QUESTIONS ARE SKIMMABLE ALONE (FR-065): display serif, larger, in a collapsed
   stack, so the nine of them read as a list of questions before any answer is
   opened. Answers are body serif. The two are distinct both visually and
   structurally, not just in size.
   =========================================================================== */

.section--faq {
  /* The arcade's height at the current width: the part of the 1366x768 master
     below its first ornament (y 0.414, artwork subjects.arcadeTop), with a
     160 px floor so it never shrinks to a sliver on a phone (FR-093). */
  --faq-band-h: max(160px, calc(100vw * 768 / 1366 * (1 - 0.414)));

  /* Only what is under the wash while it loads; the design is the wash. */
  background-color: var(--ground-pink);
  color: var(--ink);
  align-content: stretch;
  /* Content at the top, the band pinned to the foot on a short list. */
  grid-template-rows: 1fr auto;
  padding-block-start: calc(var(--section-pad-block) + var(--touch-target));
  padding-block-end: 0;
}

.faq__wash {
  position: absolute;
  inset-block: 0 var(--faq-band-h);
  inset-inline: 0;
  z-index: var(--z-ground);
  pointer-events: none;
}

/* The <picture> wrapper must be as tall as its box, or the image's own
   height: 100% resolves against an auto-height parent and the artwork stops at
   its natural size. */
.faq__wash picture,
.faq__band picture {
  height: 100%;
}

.faq__wash-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Full strength. Worst-pixel ratios with every answer open, 320-1920 px (T039):
     heading 5.30:1 (needs 3), questions 5.30:1, answers 5.13:1, dress-code rows
     5.14:1 (need 4.5). At 0.85 they were 5.23 / 5.54 / 5.87 / 6.50. If a later
     edit breaks the gate, lower this in 0.05 steps, never below 0.6. */
  opacity: 1;
}

.faq__content {
  align-self: start;
  /* Air between the last line of text and the first tile. */
  padding-block-end: var(--space-xl);
}

.faq__band {
  position: relative;
  z-index: var(--z-content);
  /* Full-bleed: out past the section's side gutters. */
  margin-inline: calc(-1 * var(--gutter));
  height: var(--faq-band-h);
  overflow: hidden;
  /* The band's own pink fades in over the wash above it, so there is no seam. */
  mask-image: linear-gradient(to bottom, transparent, #000 var(--space-xl));
}

.faq__band-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.faq__heading {
  color: var(--ink);
  margin-block-end: var(--space-lg);
  text-align: center;
}

.faq__list {
  display: grid;
}

/* --- One question ------------------------------------------------------- */

.faq__item {
  /* A single hairline BETWEEN items, not above and below every one. */
  border-block-start: var(--rule) solid color-mix(in srgb, var(--ink) 25%, transparent);
}

.faq__item:last-child {
  border-block-end: var(--rule) solid color-mix(in srgb, var(--ink) 25%, transparent);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  /* 44 px of tappable height, and the whole row is the target (FR-114). */
  min-height: var(--touch-target);
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.26;
  color: var(--ink);
  cursor: pointer;
  /* The default triangle is replaced by the marker below, which can be drawn
     to match the type. */
  list-style: none;
}

.faq__question:hover .faq__question-text {
  text-decoration: underline;
  text-decoration-thickness: var(--rule);
  text-underline-offset: 0.2em;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question-text {
  flex: 1 1 auto;
}

/* A plus that becomes a minus. Two rules, drawn in CSS rather than fetched as
   an icon, because the site has no third-party dependency to fetch one from. */
.faq__marker {
  flex: 0 0 auto;
  position: relative;
  width: 14px;
  height: 14px;
}

.faq__marker::before,
.faq__marker::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 14px;
  height: var(--rule-strong);
  background: var(--ink-muted);
  translate: 0 -50%;
}

.faq__marker::after {
  rotate: 90deg;
}

/* Motion that shows what changed, which is the one kind the site welcomes. */
@media (prefers-reduced-motion: no-preference) {
  .faq__marker::after {
    transition: rotate 180ms var(--ease-settle);
  }
}

.faq__item[open] .faq__marker::after {
  rotate: 0deg;
}

/* --- One answer -------------------------------------------------------- */

.faq__answer {
  padding-block: 0 var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

.faq__paragraph {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  /* Under 80 characters, with the extra leading a serif wants. */
  max-width: 62ch;
}

/* The dress code keeps its four rows, because that structure is part of the
   answer (FR-064). A definition list, not a table with a rule per row. */
.faq__pairs {
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
}

.faq__term {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-muted);
}

.faq__definition {
  margin: 0;
  color: var(--ink);
  max-width: 58ch;
}

/* --- The closing RSVP, the fourth and last placement ------------------- */

.faq__rsvp {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule) solid color-mix(in srgb, var(--ink) 25%, transparent);
  text-align: center;
  max-width: none;
}

.rsvp-link--closing {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--touch-target);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent-azulejo-ink);
}

@media (min-width: 40rem) {
  .faq__pairs {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
  }

  .faq__question {
    font-size: var(--fs-lg);
  }
}