/* FAQ section + accordion — generic, content-agnostic, reusable on any
   page (Figma node 18568:6792). Supports any number of items; nothing
   here knows about Runabout, insurance products, or these particular
   questions — all of that is page content in the HTML.

   The card visual styling (white, 1px light-grey border, 10px radius,
   24px/20px padding) is intentionally the same as .accordion
   (css/accordion-tabs.css) — Figma reuses the same underlying card style
   for both. Kept as its own component rather than reusing .accordion
   directly because the *list* behaviour is genuinely different (one open
   slot per tab panel there vs. one flat list here) — the open/close
   height animation itself is the same [hidden] + JS-measured-height
   mechanism in both, via window.NautilusMotion.toggleHeight
   (js/motion.js, js/faq-accordion.js, js/accordion-tabs.js). */

/* ---- Section shell ---- */

.faq-section {
  width: 100%;
  padding: var(--space-section-l) 0; /* 144px top/bottom */
  background: var(--colour-grey-101);
  box-sizing: border-box;
}

.faq-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 67px; /* exact Figma value between the header and the list — not a scale token */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

.faq-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
}

.faq-section__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Typography comes from .text-h2 (css/typography.css). */
.faq-section__title {
  text-align: center;
}

.faq-section__title-accent {
  color: var(--colour-brand-teal);
}

.faq-section__title-dark {
  color: var(--colour-header-grey);
}

/* Typography comes from .text-body-xl (css/typography.css). Figma wraps
   this copy at an exact 1089px measure — kept as a max-width (not a fixed
   width) so it still shrinks cleanly on narrower viewports. */
.faq-section__subcopy {
  margin: 0;
  max-width: 1089px;
  width: 100%;
  color: var(--colour-body-grey);
  text-align: center;
}

/* Centres the (narrower-than-container) accordion list within the full
   1280px section width, matching Figma's own layout. */
.faq-section__list-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---- Accordion ---- */

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 8px */
  /* Figma's 845px is measured against its 1280px container (≈66%), not a
     standalone value — using it as a fixed px pinned the list at 845px
     even when the viewport itself was well under 1280 (e.g. a
     ~1000-1200px window sits above the 860px breakpoint below, so it got
     no side padding either), leaving almost no margin and reading as
     edge-to-edge. A percentage scales it fluidly in between instead, and
     naturally resolves back to exactly 845px once the container reaches
     its own 1280px cap. */
  width: 66.02%;
  max-width: 845px;
}

.faq-accordion__item {
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: 10px;
  box-sizing: border-box;
}

/* The trigger is wrapped in an <h3> for correct heading semantics — reset
   here since it's otherwise unstyled and the browser's default heading
   margin (~1em top/bottom) was inflating every card's height. */
.faq-accordion__item h3 {
  margin: 0;
}

/* The button IS the entire visible header row, not a narrow strip around
   the question text — its hit area must cover the full padded box a user
   sees. Padding lives here (moved from .faq-accordion__item, which
   previously wrapped a padding:0 trigger, leaving the surrounding
   24px/20px unclickable) rather than on a non-semantic wrapper. Bottom
   padding is conditional: collapsed, the trigger is the whole visible
   card and needs its own; expanded, .faq-accordion__panel-inner supplies
   the same 24px gap below its own content instead. */
.faq-accordion__trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl); /* 20px */
  width: 100%;
  margin: 0;
  padding: var(--space-2xl) var(--space-xl) 0; /* 24px 20px 0 */
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  /* Without this, toggling .faq-accordion__item--expanded removes the
     conditional bottom padding below instantly while the panel (GSAP,
     see below) is still animating its height open, snapping the card
     shorter for a frame before it grows. Roughly matches
     NautilusMotion.toggleHeight's own open/close duration
     (js/motion.js). */
  transition: padding-bottom 0.35s ease;
}

.faq-accordion__item:not(.faq-accordion__item--expanded) .faq-accordion__trigger {
  padding-bottom: var(--space-2xl); /* 24px */
}

.faq-accordion__question {
  flex: 1 1 0%;
  min-width: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-header-grey);
}

/* The open item's question reads as a slightly darker, near-black tone in
   Figma than the closed cards' header-grey — same raw, untokenised value
   as .accordion--expanded .accordion__title (css/accordion-tabs.css). */
.faq-accordion__item--expanded .faq-accordion__question {
  color: #2A2C2E;
}

.faq-accordion__chevron {
  flex-shrink: 0;
  margin-top: 6px;
  transition: transform 0.2s ease;
}

.faq-accordion__item--expanded .faq-accordion__chevron {
  transform: rotate(180deg);
}

/* Height animation is JS/GSAP-driven (window.NautilusMotion.toggleHeight,
   js/motion.js — same helper .accordion__panel uses), not CSS-only. A
   pure grid-template-rows: 0fr -> 1fr transition was tried first, but a
   flexible grid track only collapses to a true 0 when the grid
   container's own block size is definite — .faq-accordion__panel's
   height is auto (sized by its content), so the "collapsed" track was
   still sizing to its content's intrinsic height in practice, leaving a
   sliver of the answer visible past the card's rounded corner even at
   rest. JS-measured height is what .accordion__panel already relies on
   for exactly this reason, so this is now consistent with the rest of
   the site rather than a second, less reliable animation technique.
   overflow: hidden clips mid-animation; [hidden] removes it from layout
   entirely at rest, matching .accordion__panel[hidden] below. */
.faq-accordion__panel {
  overflow: hidden;
}

.faq-accordion__panel[hidden] {
  display: none;
}

/* Side/bottom padding here replaces what .faq-accordion__item used to
   contribute (20px sides, 24px bottom) now that it carries no padding of
   its own — see .faq-accordion__trigger above. Lives on the inner
   overflow:hidden wrapper, not the 0fr grid row itself, so it's actually
   clipped away while collapsed instead of still rendering. */
.faq-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--space-xl) var(--space-2xl); /* 0 20px 24px */
  box-sizing: border-box;
}

.faq-accordion__answer {
  margin: var(--space-s) 0 0; /* 8px above the answer, matches Figma's Text-group gap */
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--colour-body-grey);
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion__chevron,
  .faq-accordion__trigger {
    transition: none;
  }
}

/* ---- Responsive ----
   The list is already fluid (66.02% of its container, capped at Figma's
   845px), so this only handles the section rhythm and the point where a
   percentage-width list stops making sense. */

@media (max-width: 1279px) {
  .faq-section {
    padding: var(--space-section-s) 0; /* 96px, down from 144px */
  }

  .faq-section__inner {
    gap: var(--space-6xl); /* 64px, near Figma's 67px but on the scale */
  }
}

@media (max-width: 1023px) {
  /* Below tablet landscape a shrinking percentage-width list just gets
     narrower and narrower inside an already-narrower section — full
     width reads better for cards from here down. */
  .faq-accordion {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .faq-section {
    padding: var(--space-section-xxs) 0; /* 64px */
  }

  .faq-section__inner {
    gap: var(--space-3xl); /* 32px */
  }

  /* 20px between question and chevron is a lot of a 320px row. */
  .faq-accordion__trigger {
    gap: var(--space-m); /* 12px */
    padding: var(--space-xl) var(--space-l) 0; /* 20px 16px 0 */
  }

  .faq-accordion__item:not(.faq-accordion__item--expanded) .faq-accordion__trigger {
    padding-bottom: var(--space-xl); /* 20px */
  }

  .faq-accordion__panel-inner {
    padding: 0 var(--space-l) var(--space-xl); /* 0 16px 20px */
  }
}