/* ==========================================================================
   /which-patients/ — who a case conference can be held for
   Rebuilt 2026-09-11. The page is a reading guide, so almost everything here is
   typography and rhythm: shared .card, .pill, .callout, .grid, .section-head and
   .cta-band do the component work. Only add to this file what the framework lacks.
   ========================================================================== */

/* ---- Hero (light, matches the other reference pages) ---- */
/* The quote closes the hero, so the hero's own bottom padding is small — the band below adds its
   own 96px and the two together left a canyon between the quote and the first section. */
.wp-hero { position:relative; overflow:hidden; padding:150px 0 var(--space-l);
  background:linear-gradient(180deg, var(--brand-50) 0%, var(--color-page) 100%); }
/* The schedule's own sentence answers the headline, so the two sit side by side and are read as
   one statement. Below 900px the quote drops under the h1 and the measure caps take over. */
.wp-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:var(--space-m-xl); align-items:center; }
.wp-hero h1 { letter-spacing:-.02em; color:var(--color-secondary); margin:0; }

@media (max-width:900px) {
  .wp-hero-grid { grid-template-columns:1fr; gap:var(--space-l); }
  .wp-hero h1 { max-width:15em; }
}
.wp-hero h1 .hl { color:var(--color-primary); }
/* Section headings are already weight 800, so emphasis inside one is carried by colour —
   the same .hl device as the hero, not a heavier weight (craft.md: nothing above 800). */
.section-head h2 .hl { color:var(--color-primary); }
.wp-hero .lede { max-width:38em; }
.wp-hero-meta { margin:var(--space-m) 0 0; font-size:var(--text-sm); letter-spacing:.01em;
  color:var(--color-ink-soft); font-variant-numeric:tabular-nums; }
.wp-hero-meta a { color:var(--color-primary); }

#cohort { padding-block-start:var(--space-xl); }

@media (max-width:760px) { .wp-hero { padding-top:122px; } }

/* ---- The quoted schedule sentence ----
   .callout is the site's one sanctioned left-border device (DESIGN.md §Cards); this is a
   size variant of it, not a second one. The sentence is AN.0.49 speaking — do not reword. */
.wp-quote { margin:0; padding:var(--space-m) var(--space-l); max-width:44em; }
/* On the hero band the callout tint is nearly the band colour, so it sits on white instead. */
.wp-hero .wp-quote { background:var(--color-surface); box-shadow:var(--shadow-xs); }
.wp-quote p { margin:0; font-style:normal; text-wrap:pretty; font-size:var(--step-1); line-height:var(--line-snug);
  letter-spacing:-.01em; color:var(--brand-700); }
.wp-quote strong { color:var(--color-secondary); font-weight:var(--weight-bold); }
.wp-quote cite { display:block; margin-top:var(--space-s); font-style:normal;
  font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-ink-soft); }
.wp-quote cite a { color:var(--color-primary); }

/* ---- The three tests ---- */
.wp-tests { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-l);
  grid-template-columns:repeat(3, minmax(0,1fr)); }
.wp-test { border-top:2px solid var(--brand-100); padding-top:var(--space-s); }
.wp-test-no { display:block; font-size:var(--text-sm); font-weight:var(--weight-extrabold);
  letter-spacing:.14em; color:var(--color-accent); margin-bottom:var(--space-2xs);
  font-variant-numeric:tabular-nums; }
.wp-test h3 { margin:0 0 var(--space-2xs); text-wrap:balance; font-size:var(--step-1); line-height:var(--line-tight);
  letter-spacing:-.01em; }
.wp-test p { margin:0; font-size:var(--text-md); line-height:var(--line-relaxed);
  color:var(--color-ink-soft); }

@media (max-width:900px) { .wp-tests { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) { .wp-tests { grid-template-columns:1fr; gap:var(--space-m); } }

/* ---- Fine print under a section ---- */
.wp-fine { max-width:48em; margin:var(--space-l) 0 0; font-size:var(--text-md);
  line-height:var(--line-relaxed); color:var(--color-ink-soft); }
.wp-fine strong { color:var(--color-secondary); }
.wp-fine a { color:var(--color-primary); }

/* ---- Where the patient is: three linked places ----
   The connector sits behind the discs and stops at the row's edges, so the three read as points on
   one path rather than three unrelated tiles. The disc carries a ring in the band colour to punch a
   hole in that line — if this section ever moves off a `.block.tint` band, the ring colour has to
   follow the new background or the line will run visibly through each disc. */
.wp-places { list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-l); }
.wp-places::before { content:""; position:absolute; z-index:0; left:17%; right:17%; top:43px; height:2px;
  background:linear-gradient(90deg, var(--brand-100), var(--brand-300), var(--brand-100)); }
/* align-content:start is load-bearing — without it the grid items stretch to the tallest place and
   the auto rows share out the slack, so a place whose sentence wraps to one line sits its heading
   several pixels lower than its neighbour's. */
.wp-place { position:relative; z-index:1; display:grid; justify-items:center; text-align:center;
  align-content:start; gap:var(--space-2xs); }
.wp-place-art { display:grid; place-items:center; width:86px; height:86px; border-radius:var(--radius-full);
  background:var(--brand-50); color:var(--brand-600);
  box-shadow:0 0 0 7px var(--color-surface); margin-bottom:var(--space-2xs); }
.wp-place-art svg { width:56px; height:56px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.wp-place h3 { margin:0; font-size:var(--step-1); line-height:var(--line-tight); letter-spacing:-.01em;
  text-wrap:balance; }
.wp-place p { margin:0; font-size:var(--text-md); line-height:var(--line-relaxed);
  color:var(--color-ink-soft); max-width:18em; }

@media (max-width:680px) {
  .wp-places { grid-template-columns:1fr; gap:var(--space-m); }
  /* Vertical, the connector would have to run through the text — drop it and let the discs carry it. */
  .wp-places::before { display:none; }
}

/* ---- Families: a ruled list, deliberately not a third card grid ---- */
.wp-fams { margin:0; }
.wp-fam { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  gap:var(--space-m) var(--space-xl); padding:var(--space-m) 0;
  border-top:1px solid var(--color-border); }
.wp-fam:last-child { border-bottom:1px solid var(--color-border); }
.wp-fam dt { font-size:var(--step-1); font-weight:var(--weight-bold); line-height:var(--line-tight);
  letter-spacing:-.005em; color:var(--color-secondary); }
.wp-fam-count { display:block; margin-bottom:var(--space-3xs); font-size:var(--text-xs);
  font-weight:var(--weight-extrabold); letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-accent); font-variant-numeric:tabular-nums; }
.wp-fam dd { margin:0; font-size:var(--text-md); line-height:var(--line-relaxed);
  color:var(--color-ink-soft); }

@media (max-width:760px) {
  .wp-fam { grid-template-columns:1fr; gap:var(--space-2xs); }
}

/* The families list no longer prints item numbers — they live on /mbs-items/, one click away. */
.wp-fams-cta { margin-top:var(--space-l); }