/* ==========================================================================
   NOVO CONDITION PAGES (novo-condition.css)
   Loaded only on page_type: condition. One clinical template for every
   /conditions/* page: grouped sections, differential cards, exam checklist,
   treatment and referral modules, evidence panels, What to Expect, related
   conditions and the diagnosis-first CTA. Uses existing design tokens only.
   ========================================================================== */

/* ---------- Layout: readable prose column, quiet rail ---------- */
@media (min-width: 64rem) {
   html body .cp .ns-article-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: 3rem; }
}
@media (min-width: 75rem) {
   html body .cp .ns-article-layout { grid-template-columns: minmax(0, 46rem) minmax(0, 17rem); gap: 4.5rem; }
}
html body .cp .cp-body { min-width: 0; max-width: none; }
.cp-body > p:first-child { font-size: var(--ns-fs-body-lg, 1.1875rem); line-height: 1.6; }

/* ---------- Section groups ---------- */
.cp-group { margin: 3rem 0 0; padding: 2.5rem 0 0; border-top: 1px solid var(--novo-border); }
.cp-body > .cp-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 47.99rem) { .cp-group { margin-top: 2.25rem; padding-top: 2rem; } }
.cp-kicker { display: block; margin: 0 0 .75rem !important; font-size: var(--ns-fs-eyebrow, .8125rem); font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--novo-blue); }
html body .ns-prose .cp-kicker + h2 { margin-top: 0 !important; }
html body .ns-prose .cp-group > h2 + h3 { margin-top: 1.25rem !important; }

/* ---------- Shared card ---------- */
.cp-mod, .cp-dx > li, .cp-step, .cp-rel-card {
   background: #fff; border: 1px solid var(--novo-border); border-radius: var(--ns-radius-card, 16px);
}

/* ---------- Differential diagnosis cards ---------- */
html body .ns-prose ul.cp-dx { list-style: none; margin: 1.25rem 0 1.5rem !important; padding: 0 !important; display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 40rem) { html body .ns-prose ul.cp-dx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html body .ns-prose .cp-dx > li { margin: 0; padding: 1.125rem 1.25rem; font-size: var(--ns-fs-body-sm, 1rem); line-height: 1.5; color: var(--novo-text-muted); }
.cp-dx > li::marker { content: none; }
.cp-dx > li > strong:first-child { display: block; margin: 0 0 .3rem; font-size: 1rem; line-height: 1.35; color: var(--novo-text); }
.cp-dx > li > strong:first-child a { color: inherit; text-decoration-color: var(--novo-light-blue); }

/* ---------- Examination checklist ---------- */
@media (min-width: 48rem) {
   html body .ns-prose ul.cp-checks { columns: 2; column-gap: 2.25rem; }
   html body .ns-prose ul.cp-checks > li { break-inside: avoid; }
}

/* ---------- Treatment and referral modules ---------- */
.cp-mods { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 40rem) { .cp-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html body .ns-prose .cp-mod { padding: 1.125rem 1.25rem; }
@media (min-width: 64rem) { html body .ns-prose .cp-mod { padding: 1.375rem 1.5rem; } }
html body .ns-prose .cp-mod h3 { margin: 0 0 .375rem !important; font-size: 1.0625rem !important; line-height: 1.35; }
html body .ns-prose .cp-mod p { margin: 0 0 .5rem; font-size: var(--ns-fs-body-sm, 1rem); line-height: 1.55; }
html body .ns-prose .cp-mod p:last-child, html body .ns-prose .cp-mod ul:last-child { margin-bottom: 0 !important; }
html body .ns-prose .cp-mod ul { margin: .25rem 0 .5rem !important; font-size: var(--ns-fs-body-sm, 1rem); }

/* ---------- Imaging & referral ---------- */
.cp-alert { margin: 1.25rem 0 1.5rem; padding: 1.125rem 1.25rem; border: 1px solid var(--novo-pale-blue-line); border-left: 4px solid var(--novo-blue); border-radius: var(--ns-radius-sm, 12px); background: var(--novo-pale-blue); color: var(--novo-text); }
.cp-alert p { margin: 0 0 .5rem; }
.cp-alert p:last-child { margin-bottom: 0; }
html body .ns-prose ul.cp-flags > li { margin-bottom: .45rem; }

/* ---------- Evidence ---------- */
.cp-stats { margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--novo-pale-blue-line); border-left: 4px solid var(--novo-blue); border-radius: var(--ns-radius-sm, 12px); background: var(--novo-pale-blue); color: var(--novo-text); }
html body .ns-prose .cp-stats p { margin: 0; }
html body .ns-prose .cp-stats .cp-stats-label { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--novo-text-muted); }
html body .ns-prose .cp-stats .cp-stats-intro { margin: 0 0 1rem; }
.cp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 1.5rem; }
html body .ns-prose .cp-stat-k { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--novo-text-muted); }
html body .ns-prose .cp-stat-v { margin: .25rem 0 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
html body .ns-prose .cp-stat-d { margin: .125rem 0 0; font-size: var(--ns-fs-body-sm, 1rem); }
html body .ns-prose .cp-stat-src { margin: .375rem 0 0; font-size: .8125rem; color: var(--novo-text-muted); }
html body .ns-prose .cp-stats-note { margin: 1rem 0 0; font-size: .875rem; color: var(--novo-text-muted); }
html body .ns-prose .cp-refs { margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--novo-border); font-size: .875rem; line-height: 1.6; color: var(--novo-text-subtle); overflow-wrap: anywhere; }
html body .ns-prose .cp-refs a { color: var(--novo-text-muted); }

/* Tables scroll locally, never the page. */
html body .cp-body .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0 1.5rem; }
html body .cp-body .overflow-x-auto table { min-width: 30rem; margin: 0; }

/* ---------- Hero media (optional, typography-led when absent) ---------- */
.cp-hero-media { margin: 2rem 0 0; max-width: 50rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ns-radius-card, 16px); background: var(--novo-surface); }
.cp-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- What to expect ---------- */
.cp-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .75rem; counter-reset: none; }
@media (min-width: 48rem) { .cp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.cp-step { margin: 0; padding: 1.25rem 1.375rem; }
@media (min-width: 64rem) { .cp-step { padding: 1.75rem 1.75rem; } }
.cp-step-n { display: block; margin: 0 0 .75rem; font-size: .875rem; font-weight: 700; letter-spacing: .08em; color: var(--novo-blue); }
.cp-step h3 { margin: 0 0 .375rem; font-size: 1.125rem; line-height: 1.3; font-weight: 600; color: var(--novo-text); }
.cp-step p { margin: 0; max-width: none; font-size: var(--ns-fs-body-sm, 1rem); line-height: 1.55; color: var(--novo-text-muted); }
.cp-textlink { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; font-weight: 600; color: var(--novo-blue); text-decoration: none; }
.cp-textlink:hover { color: var(--novo-blue-hover); text-decoration: underline; text-underline-offset: .2em; }
.cp-textlink:focus-visible, .cp-rel-card:focus-visible { outline: 3px solid var(--novo-blue); outline-offset: 3px; }
.cp-after { margin: 1.5rem 0 0; max-width: none; }

/* ---------- Related conditions ---------- */
.cp-rel { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 40rem) { .cp-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cp-rel { grid-template-columns: repeat(var(--cp-rel-cols, 3), minmax(0, 1fr)); gap: 1.25rem; } }
.cp-rel li { margin: 0; display: flex; }
.cp-rel-card { display: flex; flex-direction: column; width: 100%; padding: 1.25rem 1.375rem; color: inherit; text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
@media (min-width: 64rem) { .cp-rel-card { padding: 1.5rem 1.625rem; } }
.cp-rel-card:hover { border-color: #c9d1de; background: var(--novo-surface); }
.cp-rel-area { margin: 0 0 .375rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--novo-blue); }
.cp-rel-card h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; font-weight: 600; color: var(--novo-text); text-wrap: balance; }
.cp-rel-card p { margin: .375rem 0 0; max-width: none; font-size: .9375rem; line-height: 1.5; color: var(--novo-text-muted); }
.cp-rel-go { margin-top: auto; padding-top: .875rem; font-size: .9375rem; font-weight: 600; color: var(--novo-blue); }
@media (prefers-reduced-motion: reduce) { .cp-rel-card { transition: none; } }

/* ---------- Section headings outside the prose column ---------- */
.cp-sec-head { max-width: 46rem; }
.cp-sec-head p:not(.ns-eyebrow) { margin: .75rem 0 0; max-width: 40rem; color: var(--novo-text-muted); }

/* Related cards: fill the row whether a page lists two, three or four. */
@media (min-width: 64rem) {
   .cp-rel:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .cp-rel:not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50rem; }
}

/* ---------- Treatment pages (page_type: treatment) share this system ---------- */
.cp-figure { margin: 1.5rem 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--ns-radius-sm, 12px); background: var(--novo-surface); }
.cp-figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
html body .ns-prose ul.cp-roles { list-style: none; padding: 0 !important; margin: 1rem 0 1.25rem !important; border-top: 1px solid var(--novo-border); }
html body .ns-prose ul.cp-roles > li { margin: 0; padding: .75rem 0; border-bottom: 1px solid var(--novo-border); }
html body .ns-prose ul.cp-roles > li strong { font-weight: 600; }
html body .ns-prose ul.cp-roles > li strong::after { content: " \2190  this page"; font-size: .8125rem; font-weight: 600; color: var(--novo-blue); }
html body .cp-body .overflow-x-auto table { min-width: 34rem; }