/* evidence — "The evidence" (brief/evidence.md) — section 9 of 19, NESTED in science-index's main column (Pattern C)
   Desktop 1817:4506 (1050 x 1005) · Mobile 1849:17270 (358 x 1421) · no tablet layer (pseudo-tablet 768–1023).
   No .container, no outer padding / margin / max-width: the section fills its column; the 100 / 80 gaps belong to
   science-index. Mobile-first: base = mobile (anchor 390, 0.015) · 768–1023 pseudo-tablet (0.025, from M-767) ·
   1024+ desktop (x / 1920). Every rule is .evidence-scoped (GLOBAL-SCOPE LOCK). Drawer triggers only carry the
   brief-page §8 attributes — js/drawer.js (scaffold) handles them. */

/* ---------- Mobile (base) ---------- */
.evidence {
  --ev-gap-24:      clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);
  --ev-gap-32:      clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 32px);
  --ev-gap-12:      clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px);
  --ev-gap-16:      clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  --ev-gap-4:       clamp(3px,  calc(4px  + (var(--max-vw) - 390px) * 0.015), 4px);
  --ev-stats-gap:   clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 32px);
  --ev-row-pad:     clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 32px);
  --ev-callout-pad: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 28px);
  --ev-link-gap:    clamp(4px,  calc(5px  + (var(--max-vw) - 390px) * 0.015), 5px);
  --ev-link-pad:    2px;
  --ev-icon:        clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 32px);
  --ev-arrow:       clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  /* the link label draws Desktop/Body/Default/Medium (16) on the mobile layer too (D-EV-8) */
  --ev-link-size:   clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ev-gap-24);
}

/* Title — h2 (Bethany 400), graphite */
.evidence__title {
  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);
  color: var(--color-graphite);
}

/* Layout wrappers (Figma auto-layout frames, mapped 1:1) */
.evidence__body {
  display: flex;
  flex-direction: column;
  gap: var(--ev-gap-32);
}

.evidence__main {
  display: flex;
  flex-direction: column;
  gap: var(--ev-gap-24);
}

.evidence__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ev-gap-12);
}

.evidence__data {
  display: flex;
  flex-direction: column;
}

/* Lead — body-xl size, weight 500, coal */
.evidence__lead {
  font-weight: var(--weight-medium);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  color: var(--color-coal);
}

/* Paragraph — body-lg, graphite */
.evidence__text {
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-graphite);
}

/* ---------- Stats: 3 drawer-trigger cells (P3 / P4 / P5) ---------- */
.evidence__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--ev-stats-gap);
  align-items: start;
  padding-top: var(--ev-gap-16);
  padding-bottom: var(--ev-gap-16);
}

.evidence__stat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ev-gap-12);
  width: 100%;
  padding: 0;
  text-align: left;
  transition: opacity 150ms ease;
}

.evidence__stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ev-gap-12);
}

.evidence__stat-value {
  font-weight: var(--weight-regular);
  font-size: var(--text-display-large);
  line-height: var(--lh-display-large);
  letter-spacing: var(--ls-display-large);
  color: var(--color-coal);
  white-space: nowrap;   /* MUST-APPLY: a wrapped "5,000+" would push the icon off its row */
}

.evidence__stat-icon {
  flex: 0 0 auto;
  width: var(--ev-icon);
  height: var(--ev-icon);
}

.evidence__stat-caption {
  display: block;
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-coal);
}

/* ---------- Study rows (Chen → P1, Kurosawa → P7, Li → P8) ---------- */
.evidence__studies {
  display: flex;
  flex-direction: column;
}

.evidence__study {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* MUST-APPLY (D-EV-10): the 144-wide link hugs, never stretches */
  gap: var(--ev-gap-16);
  padding-top: var(--ev-row-pad);
  padding-bottom: var(--ev-row-pad);
  border-bottom: 1px solid var(--color-ink-20);
}

.evidence__study-text {
  display: flex;
  flex-direction: column;
  gap: var(--ev-gap-4);
  width: 100%;
}

.evidence__study-name,
.evidence__study-desc {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-graphite);
}

.evidence__study-name { font-weight: var(--weight-medium); }
.evidence__study-desc { font-weight: var(--weight-regular); }

/* "See study details →" — Action/Button text variant, identical on both layers */
.evidence__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ev-link-gap);
  padding-top: var(--ev-link-pad);
  padding-bottom: var(--ev-link-pad);
  padding-left: 0;
  padding-right: 0;
  color: var(--color-ink);
  transition: opacity 150ms ease;
}

.evidence__link-label {
  white-space: pre;          /* MUST-APPLY (D-EV-4): keep the drawn trailing space under the underline */
  font-weight: var(--weight-medium);
  font-size: var(--ev-link-size);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.evidence__link-icon {
  flex: 0 0 auto;
  width: var(--ev-arrow);
  height: var(--ev-arrow);
}

/* BA-EV-1 (not drawn): hover = opacity .7; focus ring = site base *:focus-visible */
.evidence__stat:hover,
.evidence__link:hover {
  opacity: .7;
}

/* ---------- "Why 10,800 FU" callout ---------- */
.evidence__callout {
  display: flex;
  flex-direction: column;
  gap: var(--ev-gap-12);
  padding: var(--ev-callout-pad);   /* not a .container — the shorthand is safe here */
  background-color: var(--color-off-white);
}

.evidence__callout-title {
  font-weight: var(--weight-medium);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  color: var(--color-ink);
}

.evidence__callout-text {
  font-weight: var(--weight-regular);
  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): stats grid-3, rows / callout stack (brief §6 Tablet layout) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .evidence {
    --ev-gap-24:      24px;
    --ev-gap-32:      32px;
    --ev-gap-12:      12px;
    --ev-gap-16:      16px;
    --ev-gap-4:       4px;
    --ev-stats-gap:   clamp(29.66px, calc(29.66px + (var(--max-vw) - 768px) * 0.025), 32px);
    --ev-row-pad:     clamp(29.66px, calc(29.66px + (var(--max-vw) - 768px) * 0.025), 32px);
    --ev-callout-pad: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 28px);
    --ev-link-gap:    5px;
    --ev-link-pad:    2px;
    --ev-icon:        32px;
    --ev-arrow:       20px;
    --ev-link-size:   16px;
  }

  .evidence__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
    column-gap: var(--ev-stats-gap);
  }
}

/* ---------- Desktop (1024+): 1050 column at 1920 ---------- */
@media (min-width: 1024px) {
  .evidence {
    --ev-gap-24:      clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --ev-gap-32:      clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --ev-gap-12:      clamp(6px,  calc(12px * (var(--max-vw) / var(--vw-base))), 12px);
    --ev-gap-16:      clamp(9px,  calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --ev-gap-4:       clamp(2px,  calc(4px  * (var(--max-vw) / var(--vw-base))), 4px);
    --ev-stats-gap:   clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --ev-row-pad:     clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --ev-callout-pad: clamp(15px, calc(28px * (var(--max-vw) / var(--vw-base))), 28px);
    --ev-link-gap:    clamp(3px,  calc(5px  * (var(--max-vw) / var(--vw-base))), 5px);
    --ev-link-pad:    clamp(1px,  calc(2px  * (var(--max-vw) / var(--vw-base))), 2px);
    --ev-icon:        clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --ev-arrow:       clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --ev-link-size:   var(--text-body);
  }

  .evidence__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
    column-gap: var(--ev-stats-gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  .evidence__stat,
  .evidence__link {
    transition: none;
  }
}