/* ==========================================================================
   Block: faq — FAQ accordion (src/blocks/faq.html, js/blocks/faq.js)
   Figma "Social Media Advertising" 4506:165 at 1920 (page y), Group 128:
     eyebrow  y10968 20px                      title "faqs" y11032 80px/0.95 (h76) → 39 under the eyebrow
     rules    2px white, x100→1675 (1575 wide) at y 11168 · 11393 · 11516 · 11650 · 11779 · 11910 · 12048
     question 40px Blauer Nue Medium (h38), answer 20/25, 1140 wide, 27 under the question (open item)
     arrow    43×30, 4px stroke, right edge x1668 (7px inside the rule end), centred on the question
   The Figma's closed rows vary 123–138px (question 37–49px under its rule); they are normalised to the
   mean, 131 = 2 rule + 42 + 38 question + 49. The open row keeps its Figma height (225: … + 27 + 75
   answer + 41), so the first and last rules land on the Figma's and the ones between within ~8px.
   Section spacing: 290 above (closing-CTA pill bottom 10678 → eyebrow; the CTA pads 145) and 192 below
   (last rule → footer wordmark 12240; the footer pads 128).
   ========================================================================== */

.block-faq {
  --faq-pad-top: min(2.19vw, 42px);
  --faq-pad-bottom: min(2.55vw, 49px);       /* closed row */
  --faq-pad-open: min(1.41vw, 27px);         /* question → answer when open */
  --faq-answer-bottom: min(2.14vw, 41px);
  --faq-ease: cubic-bezier(.22, .61, .36, 1);
  --faq-dur: .55s;
  padding: min(7.552vw, 145px) 0 min(3.33vw, 64px);
}

.block-faq__title {
  margin: min(2.03vw, 39px) 0 0;             /* eyebrow bottom 10993 → title 11032 */
  font-size: var(--fs-h1);
}

/* ---- List ------------------------------------------------------------------ */
.block-faq__list {
  max-width: 91.57%;                          /* 1575 of the 1720 container */
  margin-top: min(3.02vw, 58px);              /* title bottom 11108 → rule 11166 */
  border-bottom: 2px solid var(--fg);
}
.block-faq__item { border-top: 2px solid var(--fg); }

.block-faq__q { margin: 0; font: inherit; }
.block-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: var(--faq-pad-top) 7px var(--faq-pad-bottom) 2px;   /* question x102, arrow right edge 1668 */
  text-align: left;
  transition: padding-bottom var(--faq-dur) var(--faq-ease);
  -webkit-tap-highlight-color: transparent;
}
.block-faq__question {
  /* Figma question box: 1472 on the first two rows, 1343–1428 below. 1383 is the box every service frame
     wraps its long questions in (Organic "…hiring someone / internally?", Graphic "…will / we see?") while the
     widest one-line question (Web, 1369) still fits: it reproduces every Figma line break across all 10
     service frames. The SMA questions are ≤1025 wide, so SMA is unchanged. */
  flex: 0 1 1383px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-item);                  /* 40px at 1920 */
  line-height: var(--lh-display);             /* 38px lines */
  transition: color .3s ease;
}
.block-faq__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: min(2.24vw, 43px);
}
.block-faq__icon svg {
  width: 100%;
  height: auto;
  overflow: visible;
  transition: transform var(--faq-dur) var(--faq-ease);
}
.block-faq__toggle:hover .block-faq__question,
.block-faq__toggle:focus-visible .block-faq__question { color: var(--accent); }
.block-faq__toggle:focus-visible { outline-offset: -2px; }

/* ---- Answer ---------------------------------------------------------------- */
.block-faq__answer {
  max-width: 1140px;
  padding: 0 0 var(--faq-answer-bottom);
  font-size: var(--fs-body);
  line-height: 1.25;                          /* 25px lines: the Figma answer box is 75 for 3 lines */
}

/* Collapsed states apply once js/blocks/faq.js has taken over (.is-ready); without JS every answer shows.
   Height: the panel is a one-row grid animated 0fr → 1fr; its text fades in and rises a beat later.
   Closed panels are visibility:hidden (after the collapse finishes) so they leave the tab order and the
   accessibility tree. */
.block-faq.is-ready .block-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--faq-dur) var(--faq-ease), visibility 0s linear var(--faq-dur);
}
.block-faq.is-ready .block-faq__panel-inner { min-height: 0; overflow: hidden; }
.block-faq.is-ready .block-faq__answer {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.block-faq.is-ready .is-open .block-faq__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--faq-dur) var(--faq-ease), visibility 0s;
}
.block-faq.is-ready .is-open .block-faq__answer {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease .15s, transform .6s var(--faq-ease) .15s;
}
.block-faq.is-ready .is-open .block-faq__toggle,
.block-faq:not(.is-ready) .block-faq__toggle { padding-bottom: var(--faq-pad-open); }
/* ← turns to ↓ (a quarter turn anticlockwise). The Figma's ↓ also sits ~10px right of and below the ← spot
   (centre 1657,11239 vs 1647,11227), so it drifts there as it turns. */
.block-faq.is-ready .is-open .block-faq__icon svg { transform: translate(min(.55vw, 10.5px), min(.55vw, 10.5px)) rotate(-90deg); }

/* ---- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .block-faq {
    --faq-pad-top: 30px;
    --faq-pad-bottom: 34px;
    --faq-pad-open: 22px;
    --faq-answer-bottom: 34px;
    padding: 96px 0 48px;
  }
  .block-faq__title { margin-top: 24px; }
  .block-faq__list { max-width: none; margin-top: 48px; }
  .block-faq__icon { width: 36px; }
}

/* ---- Mobile (Figma "Mobile Category" 4148:2776, 402 wide) ------------------ *
   eyebrow 7925 (16px) → title 7960 (48px) → first rule 8054 → question 26px 19 under its rule, 313 wide
   → 23 → answer 20/25 → 30 → rule; a closed row is 19 + question + 24. Green 33px ring at x349 aligned
   to the question top. Spacing: (FAQ eyebrow 7925 − CTA paragraph bottom 7719) / 2 = 103 above; the
   footer's own 91 below (Figma: last rule 8709 → footer wordmark 8797). */
@media (max-width: 640px) {
  .block-faq {
    --faq-pad-top: 19px;
    --faq-pad-bottom: 24px;
    --faq-pad-open: 23px;
    --faq-answer-bottom: 30px;
    padding: 103px 0 0;
  }
  .block-faq__title { margin-top: 15px; }
  .block-faq__list { margin-top: 47px; }
  .block-faq__toggle { align-items: flex-start; gap: 14px; padding-inline: 0 2px; }
  .block-faq__question { flex-basis: 313px; text-transform: capitalize; }   /* the mobile frame sets questions in Title Case */
  .block-faq__icon {
    width: 33px;
    height: 33px;
    margin-top: 0;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
  }
  .block-faq__icon svg { width: 15px; }
  .block-faq.is-ready .is-open .block-faq__icon svg { transform: rotate(-90deg); }   /* centred in the ring */
  .block-faq__icon svg path { stroke-width: 3; }
}