/* research-library — "The research, in detail" (brief/research-library.md) — section 10 of 19, NESTED in
   science-index's main column (Pattern C). Desktop 1817:4558 (1050 x 793) · Mobile 1849:17472 (358 x 1933 drawn,
   1906 built — BA-RL-1) · no tablet layer (pseudo-tablet 768–1023, FD-BL: head `stack`, cards `grid-2`).
   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 .research-library-scoped (GLOBAL-SCOPE LOCK). The 6 drawer triggers only
   carry the brief-page §8 attributes — js/drawer.js (scaffold) handles them; this section owns no JS. */

/* ---------- Mobile (base) ---------- */
.research-library {
  --rl-gap-24:     clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);
  --rl-gap-4:      clamp(3px,  calc(4px  + (var(--max-vw) - 390px) * 0.015), 4px);
  --rl-link-gap:   clamp(4px,  calc(5px  + (var(--max-vw) - 390px) * 0.015), 5px);
  --rl-link-pad:   2px;
  --rl-arrow:      clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  /* D-RL-6: the link label is drawn Desktop/Body/Default/Medium (16) on the mobile layer too */
  --rl-link-size:  clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);

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

/* Section head — title h2 (Bethany 400) + lead body-lg, both graphite (D-RL-8) */
.research-library__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);
}

.research-library__lead {
  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);
}

/* ---------- Study card grid: 1 col (<768) · 2 col (768–1023) · 3 col (1024+) — D-RL-2, D-RL-11 ---------- */
.research-library__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rl-gap-24);
  align-items: stretch;
}

/* Study card — the whole card is the hit area via the button's ::after (D-RL-3) */
.research-library__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* the link hugs (144 x 25), never stretches */
  gap: var(--rl-gap-24);
  padding: var(--rl-gap-24);        /* a card, not a .container — the shorthand is safe here */
  background-color: var(--color-off-white);
  cursor: pointer;                  /* BA-RL-2: no drawn hover — cursor + full-card hit area only */
}

.research-library__card-body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--rl-gap-24);
}

.research-library__card-head {
  display: flex;
  flex-direction: column;
  gap: var(--rl-gap-4);
}

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

.research-library__meta {
  display: flex;
  flex-direction: column;
}

.research-library__meta-line {
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-ink-40);       /* contrast as drawn (page decision, D-RL-8) */
}

.research-library__stat {
  display: flex;
  flex-direction: column;
  gap: var(--rl-gap-4);
}

.research-library__figure {
  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-accent);
}

.research-library__caption {
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* "See study details →" — Action/Button text variant (D-RL-3 / D-RL-6 / D-RL-7) */
.research-library__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rl-link-gap);
  margin-top: auto;                 /* D-RL-5: links share one line per row when titles wrap differently */
  padding-top: var(--rl-link-pad);
  padding-bottom: var(--rl-link-pad);
  padding-left: 0;
  padding-right: 0;
  color: var(--color-ink);
}

/* stretched hit area — the button itself stays position: static so ::after covers the card */
.research-library__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.research-library__link-text {
  white-space: nowrap;              /* Figma whiteSpace nowrap; fits on every band (brief §5) */
  font-weight: var(--weight-medium);
  font-size: var(--rl-link-size);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.research-library__link-icon {
  flex: 0 0 auto;
  width: var(--rl-arrow);
  height: var(--rl-arrow);
}

/* ---------- Pseudo-tablet (768–1023): head `stack`, cards `grid-2` (brief §6 Tablet layout) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .research-library {
    --rl-gap-24:    24px;
    --rl-gap-4:     4px;
    --rl-link-gap:  5px;
    --rl-link-pad:  2px;
    --rl-arrow:     20px;
    --rl-link-size: 16px;
  }

  .research-library__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Desktop (1024+): 3 x 2 grid of 334 x 308 cards in the 1050 column at 1920 ---------- */
@media (min-width: 1024px) {
  .research-library {
    --rl-gap-24:    clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --rl-gap-4:     clamp(2px,  calc(4px  * (var(--max-vw) / var(--vw-base))), 4px);
    --rl-link-gap:  clamp(3px,  calc(5px  * (var(--max-vw) / var(--vw-base))), 5px);
    --rl-link-pad:  clamp(1px,  calc(2px  * (var(--max-vw) / var(--vw-base))), 2px);
    --rl-arrow:     clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --rl-link-size: var(--text-body);
  }

  .research-library__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}