/* ============================================================
   CONDITION PAGE — Multiple Myeloma (archetype / mirror of Therapy)
   Layered on base.css + v3.css + v9.css + therapy.css.
   Reuses the rx-* component system (hero spec card, eligibility,
   safety grid, evidence panel, cost signal, FAQ, CTA) and adds
   condition-specific pieces. Signature block: §4 therapy cross-links.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.cd-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
}
.cd-crumb a { color: var(--slate-mid); text-decoration: none; border: 0; transition: color 160ms var(--ease); }
.cd-crumb a:hover { color: var(--fg-strong); opacity: 1; }
.cd-crumb .sep { opacity: 0.5; }
.cd-crumb .here { color: var(--fg-strong); }

/* ---------- Hero title (moderate — the H1 is a long descriptive phrase) ---------- */
.cd-name {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(38px, 4.9vw, 68px);
  line-height: 1.02;
  letter-spacing: -.016em;
  color: var(--fg-strong);
  margin: 0;
  max-width: 15ch;
}
.cd-name em { font-style: italic; }
.cd-hero .rx-lead { margin-top: 24px; }
.cd-hero .rx-chip { white-space: nowrap; }

/* ============================================================
   §2–3 — Plain-language explanation (category-level)
   ============================================================ */
.cd-explain { padding: var(--section-py) 0; background: var(--bg-alt); border-bottom: 1px solid var(--border-soft); }
.cd-explain .section-head { margin-bottom: 42px; }
.cd-explain-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 60px);
}
.cd-explain-body p {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.76;
  color: var(--slate-dark);
  margin: 0 0 18px;
}
.cd-explain-body p:last-child { margin-bottom: 0; }
.cd-explain-body strong { color: var(--fg-strong); font-weight: 600; }
.cd-explain-body em { font-style: italic; color: var(--accent-deep); font-weight: 500; }
.cd-explain-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.04em;
  color: var(--slate-mid);
}
.cd-explain-cat::before { content: ""; width: 16px; height: 1px; background: var(--slate-mid); }

/* ============================================================
   §4 — THERAPIES FOR THIS CONDITION (the cross-link block)
   ============================================================ */
.cd-therapies { padding: var(--section-py) 0; }
.cd-therapies .section-head { margin-bottom: 44px; }
.cd-tcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
/* Three-therapy variant (PMBCL). Holds 3-up through the fragile
   1000–1200px band, then goes single-column — never a 2+1 orphan. */
.cd-tcards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cd-tcards.cols-3 .cd-tcard h3 { overflow-wrap: break-word; hyphens: auto; }
/* The indication-scope chips differ in length by design (the CNCT19/Axi-cel
   cards name PMBCL, HICARA's does not), so this row must tolerate two lines
   and an unequal wrap rather than force matching label lengths. */
.cd-tcards.cols-3 .cd-tcard-top {
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 8px;
}
.cd-tcards.cols-3 .cd-tcard .stub {
  white-space: normal;
  line-height: 1.35;
  padding: 5px 10px;
  border-radius: 10px;
  max-width: 100%;
  text-wrap: pretty;
}
/* HICARA's chip is longer than the other two by design — it does not name PMBCL —
   and it never fits beside the antigen chip at any width: measured 26/26/56px top
   rows from 1160 up to 1600, putting HICARA's h3 30px below its neighbours. Below
   1160 all three wrap and the row is even. Stacking the chips gives every card two
   rows at every width, so the headings align without a label being touched or a
   height being guessed. Below 1000 the grid is single-column and nothing wraps.
   `[Jacob, 9 Aug 2026]` */
@media (min-width: 1001px) {
  .cd-tcards.cols-3 .cd-tcard-top { flex-direction: column; }
}
@media (max-width: 1200px) {
  .cd-tcards.cols-3 { gap: 16px; }
}
@media (max-width: 1000px) {
  .cd-tcards.cols-3 { grid-template-columns: 1fr; gap: 22px; }
}
.cd-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 34px 36px 30px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast, 160ms) var(--ease), box-shadow var(--dur-fast, 160ms) var(--ease), border-color var(--dur-fast, 160ms) var(--ease);
}
.cd-tcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3, 0 12px 32px rgba(30,26,24,0.08));
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border-soft));
  opacity: 1;
}
.cd-tcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.cd-tcard .antigen {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-deep);
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
}
.cd-tcard .stub {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-mid);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}
.cd-tcard h3 {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  margin: 0;
}
.cd-tcard .inn {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 16px;
  color: var(--slate-mid);
}
.cd-tcard p {
  margin-top: 16px;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--slate-dark);
}
.cd-tcard .go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-deep);
}
.cd-tcard .go .arrow { transition: transform var(--dur-fast, 160ms) var(--ease);}
.cd-tcard:hover .go .arrow { transform: translateX(4px);}

/* ============================================================
   SINGLE-THERAPY FEATURE BLOCK
   For a condition mapped to exactly ONE approved therapy. A deliberate
   wide two-part panel — NOT a lone card in a grid built for three, which
   reads as a loading failure.
   ============================================================ */
.cd-therapy-solo {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: clamp(30px, 3.6vw, 50px);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform var(--dur-fast, 160ms) var(--ease), box-shadow var(--dur-fast, 160ms) var(--ease), border-color var(--dur-fast, 160ms) var(--ease);
}
.cd-therapy-solo:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3, 0 12px 32px rgba(30, 26, 24, 0.08));
  border-color: color-mix(in oklab, var(--accent) 42%, var(--border-soft));
}
.cd-solo-id {
  border-right: 1px solid var(--border-soft);
  padding-right: clamp(20px, 2.6vw, 44px);
}
.cd-solo-kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  line-height: 1.5;
  margin-bottom: 16px;
}
.cd-solo-antigen {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-mid);
  margin-bottom: 12px;
}
.cd-therapy-solo h3 {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08;
  color: var(--fg-strong);
  margin: 0;
}
.cd-solo-inn {
  display: block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 16px;
  color: var(--slate-mid);
}
.cd-solo-body p {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--slate-dark);
}
.cd-solo-body p strong { color: var(--fg-strong); font-weight: 600; }
.cd-solo-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-deep);
}
.cd-solo-go .arrow { transition: transform var(--dur-fast, 160ms) var(--ease);}
.cd-therapy-solo:hover .cd-solo-go .arrow { transform: translateX(4px);}
@media (max-width: 760px) {
  .cd-therapy-solo { grid-template-columns: 1fr; gap: 24px; }
  .cd-solo-id { border-right: none; border-bottom: 1px solid var(--border-soft); padding-right: 0; padding-bottom: 22px; }
}

/* Centred — footnote to the full-width .cd-tcards grid above. See the note on
   .rx-how-note in therapy.css: same shape, same reason. Hits all 7 condition
   pages. `[Jacob, 7 Aug 2026]` */
.cd-therapies-note {
  margin-top: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--slate-mid);
  max-width: var(--measure-wide);
  margin-inline: auto;
}

/* ============================================================
   §6 — Condensed journey (reuses .timeline / .tl-step from v3.css)
   ============================================================ */
.cd-journey { padding: var(--section-py) 0; background: var(--bg-alt); }
.cd-journey .section-head { margin-bottom: 44px; }
.cd-journey-foot {
  margin-top: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cd-journey-foot .caption { max-width: 480px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .cd-tcards { grid-template-columns: 1fr; }
}
/* The two prose columns were held to 640px, which put them at 321px — 40 characters
   a line at 17px — on a 768 tablet. The audience is 50+ and the type scale was
   raised for exactly that reason, so a narrow measure undoes the raise. Collapse at
   1000, the same breakpoint as the card grid above, and cap the single column at the
   measure token: unconstrained it runs the full container and overshoots the other
   way. `[Jacob, 9 Aug 2026]` */
@media (max-width: 1000px) {
  .cd-explain-body {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: var(--measure-wide);
  }
}
/* Sibling cross-link line (PMBCL §3) */
.cd-sibling-link { font-size: 15px; line-height: 1.7; color: var(--slate-mid); }
.cd-sibling-link a { color: var(--accent-deep); }
@media (max-width: 640px) {
  .cd-explain, .cd-therapies, .cd-journey { padding: 64px 0; }
}