/* ==========================================================================
   /case-conferencing/ — the reference hub.

   An INDEX, so there is almost nothing here: a hero, a definition block and a list
   of routes. Everything else on the page is a shared component (.block, .tint,
   .section-head, .rule, .cta-band). If this file starts growing, the page has
   started arguing — see the note at the top of src/case-conferencing/index.njk.

   ⚠️ NOT to be confused with case-conferencing.css, which belongs to the sales page
   that was removed from this URL on 2026-09-16 and is orphaned. Do not merge them.
   ========================================================================== */

/* ---- Hero ----
   Deliberately the same wash as .wp-hero (/case-conferencing/which-patients/) and .wa-hero
   (/case-conferencing/who-can-attend/): the hub is the head of that set, so it must read as one
   of them. ⚠️ Three pages now draw this gradient. When any of the three is next touched, fold
   the shared half into components.css rather than adding a fourth copy. */
.hub-hero { position:relative; overflow:hidden; padding:150px 0 var(--space-2xl);
  background:linear-gradient(180deg, var(--brand-50) 0%, var(--color-page) 100%); }
.hub-hero h1 { letter-spacing:-.02em; color:var(--color-secondary); margin:0; max-width:14em; }
.hub-hero h1 .hl { color:var(--color-primary); }
.hub-hero .lede { max-width:40em; margin-top:var(--space-m); }
@media (max-width:760px) { .hub-hero { padding-top:122px; } }

/* ---- The definition ----
   Measure-capped prose, not a card. The page's one job before the routes is to be read. */
.hub-def { max-width:44em; }
.hub-def p { margin:0 0 var(--space-m); line-height:var(--line-relaxed); }
.hub-def p:first-child { font-size:var(--step-1); line-height:var(--line-snug);
  letter-spacing:-.01em; color:var(--color-secondary); }
.hub-def p:last-child { margin-bottom:0; color:var(--color-ink-soft); }

/* ---- The routes ----
   A ruled list, not a card grid. Five cards wrap 3 + 2 and orphan the second row, and a card
   set reads as a set of offers — which is what this page must not look like. A list reads as
   an index, takes a fifth row for nothing, and scales when a sixth page is added.
   The whole row is the link, so the target is the row and not just its title. */
.hub-routes { list-style:none; margin:0; padding:0; border-top:1px solid var(--color-border); }
.hub-route { border-bottom:1px solid var(--color-border); }
.hub-route > a { display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center; gap:var(--space-m);
  padding:var(--space-m) var(--space-s); text-decoration:none; color:inherit;
  transition:background-color .18s var(--ease), padding-left .18s var(--ease); }
.hub-route > a:hover, .hub-route > a:focus-visible { background:var(--brand-50);
  padding-left:var(--space-m); }

.hub-route-ic { width:44px; height:44px; flex:0 0 44px; border-radius:var(--radius-lg);
  background:var(--grad-chip); color:var(--color-surface);
  display:flex; align-items:center; justify-content:center; }
.hub-route-ic svg { width:22px; height:22px; fill:none; stroke-width:2; }

.hub-route-text { display:flex; flex-direction:column; gap:2px; }
.hub-route-text strong { font-size:var(--text-lg); font-weight:var(--weight-bold);
  color:var(--color-secondary); letter-spacing:-.01em; }
/* The question, not a summary — a summary here is a second copy of the page that will drift. */
.hub-route-q { font-size:var(--text-md); line-height:var(--line-relaxed);
  color:var(--color-ink-soft); }

.hub-route-arrow { width:22px; height:22px; flex:0 0 22px; fill:none; stroke-width:2;
  color:var(--color-primary); transition:transform .18s var(--ease); }
.hub-route > a:hover .hub-route-arrow { transform:translateX(4px); }

@media (max-width:560px) {
  .hub-route > a { grid-template-columns:auto minmax(0, 1fr); gap:var(--space-s);
    padding:var(--space-m) var(--space-2xs); }
  /* The arrow is decoration once the row is the full width of a phone, and dropping it buys the
     question a line it badly needs. */
  .hub-route-arrow { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-route > a, .hub-route-arrow { transition:none; }
  .hub-route > a:hover, .hub-route > a:focus-visible { padding-left:var(--space-s); }
  .hub-route > a:hover .hub-route-arrow { transform:none; }
}