/* pages/education.css — the Patient Education family (other session's content; shell by D).
   Moved VERBATIM from the pre-redesign main.css in Stage A (Developer A) per DESIGN §4/§5.15:
   the .edu-* block and the hub classes (.hub-grid/.hub-card/.doc-group/.proto-disclaimer, plus
   .protocols-section which the hub's <section> carries). D re-points only the tokens noted in
   DESIGN §5.15; nothing else in this file is edited by A. */

/* ---------- protocol hub + document library (hub classes used by /patient-education/) ---------- */
.protocols-section{background:var(--gray-wash)}
.proto-disclaimer{margin-top:40px;background:var(--blue-wash);border:1px solid #D8ECFA;border-radius:14px;padding:18px 22px;font-size:14px;color:#3B5857}
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.hub-card{background:#fff;border:1px solid var(--gray-line);border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;gap:10px;transition:transform .18s ease,box-shadow .18s ease}
.hub-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -16px rgba(50,80,79,.25)}
.hub-card h3{font-size:21px;font-weight:800}
.hub-card p{font-size:15px;color:#41605F;flex:1}
.hub-card .go{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--teal-deep)}
.hub-card:hover .go{color:var(--blue)}
.hub-card .count{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text)} /* D: 12px --teal → 14px --teal-text (DESIGN §3.3 floor + 4.5:1, R29/R33) — flag to the education owner on merge */
.doc-group{margin-bottom:44px}
.doc-group h2{font-size:22px;font-weight:800;color:var(--teal-deep);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.doc-group h2::after{content:"";flex:1;height:1px;background:var(--gray-line)}

/* ---------- author byline (partials/article-author.njk, used inside the education page-hero) ---------- */
.author-byline{display:flex;align-items:center;gap:14px;margin-top:18px}
.author-byline img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid rgba(255,255,255,.35);flex:none}
.author-byline .who{line-height:1.35}
.author-byline .who b{display:block;font-family:var(--display);font-weight:700;font-size:16px;color:#fff}
.author-byline .who span{font-size:14px;color:#C9DDD8}
/* on the light .page-hero alias the byline text must stay readable (DESIGN §4.7 on-dark overrides) */
.page-hero .author-byline .who b{color:var(--teal-deep)}
.page-hero .author-byline .who span{color:var(--gray-text)}
.page-hero .author-byline img{border-color:var(--line)}
@media(max-width:1020px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hub-grid{grid-template-columns:1fr}}
@media print{.author-byline img{display:none}}

/* ---------- patient education handouts ---------- */
.edu-grid{display:grid;grid-template-columns:minmax(0,760px) 320px;gap:48px;align-items:start}
.edu-side{position:sticky;top:calc(var(--nav-h) + 16px);display:grid;gap:18px;align-self:start;max-height:calc(100vh - var(--nav-h) - 32px);overflow:auto} /* D: top re-pointed to the nav token (DESIGN §5.15); with the Call card + book-mini prepended the rail (≈1,070px) outgrows a 900px viewport, so it scrolls inside its sticky box instead of trapping its last rows below the fold */
.edu-side-card{background:#fff;border:1px solid var(--gray-line);border-radius:16px;padding:22px}
.edu-side-card h3{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);margin-bottom:10px} /* D: 12.5px --teal → 14px --teal-text (DESIGN §5.15, R33) */
.edu-side-card a.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--gray-line);font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--teal-ink)}
.edu-side-card a.row:first-of-type{border-top:0;padding-top:0}
.edu-side-card a.row:hover{color:var(--teal-deep);text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:4px}
.edu-side-card a.row svg{flex:none;color:var(--teal)}
.edu-side-card p{font-size:14px;color:#41605F}
@media(max-width:960px){.edu-grid{grid-template-columns:1fr}.edu-side{position:static}}
.edu-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 30px}
.edu-fact{background:var(--mint-wash);border:1px solid #DBEFE5;border-radius:14px;padding:18px 18px 16px}
.edu-fact b{display:block;font-family:var(--display);font-size:26px;font-weight:800;color:var(--teal-deep);line-height:1.1;margin-bottom:6px}
.edu-fact span{font-size:13.5px;color:#41605F;line-height:1.4}
.edu-figure{margin:22px 0 30px;background:#fff;border:1px solid var(--gray-line);border-radius:16px;overflow:hidden}
.edu-figure img{width:100%;height:auto;display:block}
.edu-figure figcaption{padding:12px 18px 14px;font-size:14px;color:#41605F;border-top:1px solid var(--gray-line)}
.edu-figure figcaption small{display:block;margin-top:4px;font-size:12px;color:var(--gray)}
.edu-figure figcaption small a{text-decoration:underline;text-underline-offset:3px}
.edu-steps{counter-reset:step;list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.edu-steps li{position:relative;padding:14px 18px 14px 58px;background:#fff;border:1px solid var(--gray-line);border-radius:12px;color:#3B5857;font-size:15.5px;line-height:1.5}
.edu-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:16px;top:13px;width:28px;height:28px;border-radius:50%;background:var(--teal-deep);color:#fff;font-family:var(--display);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.edu-steps li b{color:var(--teal-ink)}
.edu-timeline{list-style:none;margin:0 0 18px;padding:0}
.edu-timeline li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--gray-line);font-size:15.5px;color:#3B5857;line-height:1.5}
.edu-timeline li:last-child{border-bottom:0}
.edu-timeline .when{font-family:var(--display);font-weight:800;color:var(--teal-deep);font-size:14px;padding-top:2px}
@media(max-width:560px){.edu-timeline li{grid-template-columns:1fr;gap:4px}}
.edu-risks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.edu-risks li{background:#fff;border:1px solid var(--gray-line);border-radius:12px;padding:14px 18px;font-size:15.5px;color:#3B5857;line-height:1.5}
.edu-risks li b{display:block;color:var(--teal-ink);margin-bottom:2px}

/* page-level by A decision: .hub-card and .edu-* are the education family's classes — main.css may not define
   them (DESIGN §4 collision rule, tools/classaudit.js), so the block-link underline reset lives here for good. */
.hub-card,.hub-card:hover{text-decoration:none}
.edu-side-card a.row{text-decoration:none}
/* page-level by A decision: 44px hit areas on the education family's own rail rows and inline links (R24) — same
   collision rule; kept as this family's rule (the education owner sees it on merge). The page-hero eyebrow link is
   now covered by main.css `.eyebrow a`. */
.edu-side-card a.row{min-height:44px}
.proto-disclaimer a{display:inline-block;padding-block:12px;margin-block:-12px}
.edu-figure figcaption small a{display:inline-block;padding-block:13px;margin-block:-13px}
/* page-level by A decision (D fix pass): the shell's `.prose ul/ol/li` rules outrank this family's `.edu-steps/.edu-risks/
   .edu-timeline` boxes (0,1,1 vs 0,1,0), so what the lists inherit from the shell is pinned here to the PRE-REDESIGN
   rendering the education owner sees on main (old .prose ul,.prose ol = margin:0 0 16px 22px; display:grid; gap:9px,
   which outranked their own gap:12px/10px too; .prose li set no margin). The new shell's 1.4em padding, 1.2em margin
   and .45em li margin no longer leak in (the li margin was double-spacing the numbered steps). Measured against the
   base-commit build: .edu-steps 527px, .edu-risks 614.5px, .edu-timeline 697.75px at 1440 — identical. */
.prose .edu-steps,.prose .edu-risks,.prose .edu-timeline{margin:0 0 16px 22px;padding:0;display:grid;gap:9px} /* (0,2,0) so it outranks .prose ol/ul */
.edu-steps li,.edu-risks li,.edu-timeline li{margin-bottom:0}

/* ---------- image-slot system — appended VERBATIM from main (958407f) main.css so the side-float figures of the
   TKA page and the newer handouts keep their size/caption/float after merge (the redesign deletes every .edu-* rule
   from main.css; this file is their only home). Merge gate: every `^.edu-` selector in main's main.css must exist here
   (scratchpad/tools-d/edu-merge-gate.sh). ---------- */
.edu-figure-sm{max-width:420px}
.edu-figure-sm figcaption{font-size:13.5px;padding:10px 16px 12px}
@media(min-width:700px){.edu-figure-sm.right{float:right;margin:6px 0 18px 26px;max-width:330px}}


/* inline links in the handout blocks (ported from main aad5b98; colours use the redesign tokens —
   hover stays teal-deep/underline, never the light blue, per DESIGN §7) */
.edu-risks a,.edu-timeline a,.edu-steps a,.proto-disclaimer a{color:var(--teal-deep);font-weight:600;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:3px}
.edu-risks a:hover,.edu-timeline a:hover,.edu-steps a:hover,.proto-disclaimer a:hover{color:var(--blue-text);text-decoration-color:var(--blue-text)}
/* image credits stay quiet — attribution, not navigation */
.edu-figure figcaption small a{color:var(--gray-text);font-weight:400;text-decoration:underline;text-decoration-color:var(--gray-line);text-decoration-thickness:1px;text-underline-offset:2px}
.edu-figure figcaption small a:hover{color:var(--teal-deep);text-decoration-color:var(--teal)}
@media print{.edu-risks a,.edu-timeline a,.edu-steps a{color:#000;text-decoration:underline}}