/* faq-science — "Questions about the research" accordion (brief/faq-science.md)
   Figma D 1817:4811 (1050 x 613.5) / M 1817:5376 (358 x 776.5) · cache/faq-science.{desktop,mobile}.json
   Pattern C: LAST nested section in science-index's main column — NO .container, no own padding/margin (§1b).
   Template: pipeline/templates/code/accordion/ (Variant 1 icon swap, accordion-open-first). The collapse mechanics
   (.accordion-answer height 0 / overflow / transition) live page-wide in css/components.css (FD-99); here ONLY
   .faq-science / .faq-science__* rules (+ the JS-inserted .accordion-icon scoped under the section).
   Mobile-first: base = mobile (390 anchor), 768–1023 pseudo-tablet (M-767 constants), 1024+ desktop (vw-base 1920).
   Δ = (var(--max-vw) - 390px) * 0.015 · s = var(--max-vw) / var(--vw-base) */

/* ============ MOBILE (base) ============ */
.faq-science {
  --faq-science-gap:        clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 24px);
  --faq-science-head-gap:   clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  --faq-science-pad-block:  clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 24px);
  --faq-science-pad-inline: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  --faq-science-row-gap:    clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px);
  --faq-science-answer-gap: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 16px);
  --faq-science-icon:       clamp(23px, calc(28px + (var(--max-vw) - 390px) * 0.015), 32px);

  display: flex;
  flex-direction: column;
  gap: var(--faq-science-gap);              /* header block → list: 20 M / 24 D */
}

/* ---- header: title + lead (1849:17936 / 1834:14929) ---- */
.faq-science__header {
  display: flex;
  flex-direction: column;
  gap: var(--faq-science-head-gap);         /* 16 M / 12 D */
  color: var(--color-graphite);             /* D-FAQS-6: #232323 */
}
.faq-science__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.faq-science__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
}

/* ---- list (1817:5380 / 1817:4815): NO gap, NO padding (template §3a, D-FAQS-4) ---- */
.faq-science__list {
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
}

/* ---- item (Content/FAQ Item): padding 20/16 M · 24/0 D + 1px ink rule under EVERY item (last included) ---- */
.faq-science__item {
  padding: var(--faq-science-pad-block) var(--faq-science-pad-inline);
  border-bottom: var(--stroke-1);
}

/* ---- question row (Question Row): flex, align-items CENTER, gap 12 M / 8 D ---- */
.faq-science__question {
  display: flex;
  align-items: center;
  gap: var(--faq-science-row-gap);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);        /* body-xl-medium */
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
}
.faq-science__question-text {
  flex: 1 1 0;
  min-width: 0;                             /* wraps, never truncates (D-FAQS-7) */
}
/* JS-inserted icon box (template appends <span class="accordion-icon">) — 28 M / 32 D */
.faq-science__question .accordion-icon {
  flex: 0 0 var(--faq-science-icon);
  width: var(--faq-science-icon);
  height: var(--faq-science-icon);
  display: flex;
}
.faq-science__question .accordion-icon svg {
  width: 100%;
  height: 100%;
}

/* ---- answer: the question→answer gap lives INSIDE the collapsing wrapper (D-FAQS-4) ---- */
.faq-science__answer-text {
  margin: 0;
  padding-top: var(--faq-science-answer-gap);   /* 12 M / 16 D */
  font-family: var(--font-body);
  font-weight: var(--weight-regular);       /* body-lg */
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
}

/* ============ PSEUDO-TABLET (768–1023): every M-767 value = M-max → constant; rows keep the mobile inset ============ */
@media (min-width: 768px) and (max-width: 1023px) {
  .faq-science {
    --faq-science-gap:        24px;
    --faq-science-head-gap:   16px;
    --faq-science-pad-block:  24px;
    --faq-science-pad-inline: 16px;
    --faq-science-row-gap:    12px;
    --faq-science-answer-gap: 16px;
    --faq-science-icon:       32px;
  }
}

/* ============ DESKTOP (1024+): rows flush (inline 0), everything scales by s ============ */
@media (min-width: 1024px) {
  .faq-science {
    --faq-science-gap:        clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --faq-science-head-gap:   clamp(6px,  calc(12px * (var(--max-vw) / var(--vw-base))), 12px);
    --faq-science-pad-block:  clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --faq-science-pad-inline: 0px;
    --faq-science-row-gap:    clamp(4px,  calc(8px  * (var(--max-vw) / var(--vw-base))), 8px);
    --faq-science-answer-gap: clamp(9px,  calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --faq-science-icon:       clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
  }
}