/* ============================================================
   THERAPIES HUB — /therapies (router + topical-authority anchor)
   Layered ON TOP of conditions-hub.css — it reuses every .ch-* shell
   (hero, routing frame, target groups, solid divider, cross-link band).
   This file only adds the therapy-card specifics: the full generic name,
   the "Treats →" condition cross-link chips, and indication-scope captions.
   Discipline: a card carries short name + generic name + target + condition
   cross-links + link — and nothing else. No mechanism, safety, outcomes,
   or manufacturer.
   ============================================================ */

/* ---------- Therapy card ---------- */
/* Not a single card-wide <a> (it holds inner condition links) — a stretched
   ::after on the go-link makes the whole card route to the therapy page,
   while the condition chips sit above it with z-index. */
.th-tcard { position: relative; display: flex; flex-direction: column; cursor: default; }
.th-tcard h3 { margin: 0; }
.th-name-link { color: var(--fg-strong); text-decoration: none; position: relative; z-index: 1; }
.th-name-link:hover { color: var(--accent-deep); }
.ch-group.bcma .th-name-link:hover { color: var(--sage-deep); }

.th-tcard .th-generic {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--slate-mid);
  margin: 7px 0 0;
}

/* ---------- Treats — condition cross-link chips ---------- */
.th-treats { margin: 20px 0 0; }
.th-treats-k {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-mid);
  margin-bottom: 11px;
}
.th-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.th-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-deep);
  background: color-mix(in oklab, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: background 0.16s ease, border-color 0.16s ease;
}
a.th-chip:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.ch-group.bcma .th-chip {
  color: var(--sage-deep);
  background: color-mix(in oklab, var(--sage-deep) 9%, transparent);
  border-color: color-mix(in oklab, var(--sage-deep) 24%, transparent);
}
.ch-group.bcma a.th-chip:hover { background: color-mix(in oklab, var(--sage-deep) 18%, transparent); border-color: color-mix(in oklab, var(--sage-deep) 40%, transparent); }

/* Pending / to-verify cross-link — dashed, muted, review-mode only */
.th-chip.th-unverified {
  color: var(--slate-mid);
  background: transparent;
  border-style: dashed;
  border-color: color-mix(in oklab, var(--slate-mid) 40%, transparent);
}
.th-chip.th-unverified::before {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  flex: 0 0 auto;
}
.th-chip.th-unverified em { font-style: normal; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; }

/* Indication-scope caption (safe to state — part of the NMPA approval) */
.th-scope {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--slate-mid);
  margin: 12px 0 0;
}
.th-scope strong { color: var(--slate-dark); font-weight: 600; }

/* ---------- Route link at the card foot (stretched) ---------- */
.th-go { margin-top: auto; padding-top: 22px; }
.th-go::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
a.cd-tcard.th-tcard:hover,
.th-tcard:hover { }

/* Solid-tumor program is LIVE on this hub [DECISION — Jacob, 29 Jul 2026]:
   the section publishes in the clean view too, and satri-cel renders as a
   normal card at the same width as the blood-cancer cards above. */
.ch-solid-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .ch-solid-grid { grid-template-columns: 1fr; } }

/* ---------- Naming-convention note strip ---------- */
.th-naming {
  max-width: 760px;
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-mid);
}
.th-naming strong { color: var(--slate-dark); font-weight: 600; }

/* ---------- §2 Routing frame — text + image (60 / 40) ---------- */
.th-frame-grid {
  display: grid;
  grid-template-columns: 1fr 0.66fr;
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}
.th-frame-grid .ch-frame-inner { max-width: none; }
.th-frame-grid .th-naming { max-width: none; margin-top: 26px; }
.th-frame-media {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sage-pale);
  box-shadow: var(--shadow-3, 0 12px 32px rgba(30,26,24,0.08));
}
.th-frame-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1000px) {
  .th-frame-grid { grid-template-columns: 1fr; gap: 32px; }
  .th-frame-media { aspect-ratio: 16 / 9; order: -1; }
}

/* ---------- Hero media (top-right, above the target index) ---------- */
.ch-hero-side { display: flex; flex-direction: column; gap: 26px; align-self: stretch; }
.ch-hero-media {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sage-pale);
  box-shadow: var(--shadow-3, 0 12px 32px rgba(30,26,24,0.08));
}
.ch-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-hero-side .ch-hero-aside { margin-top: auto; padding-bottom: 0; }
@media (max-width: 1000px) {
  .ch-hero-side { gap: 24px; }
  .ch-hero-media { aspect-ratio: 16 / 9; }
  .ch-hero-side .ch-hero-aside { margin-top: 4px; }
}