/* ============================================================
   Specialty pages (template-specialty.php).
   Every rule is scoped to .spx so no other page is affected.
   Colours come from the theme tokens in style.css.
   ============================================================ */

.spx {
  --accent-dk: #266E99;
  --bright: #38A9EB;
  --spx-max: 1080px;
  --spx-gutter: 22px;
  --spx-ease: cubic-bezier(.4, 0, .2, 1);
  font-size: 16px;
  line-height: 1.6;
}
.spx-wrap { max-width: var(--spx-max); margin: 0 auto; padding-left: var(--spx-gutter); padding-right: var(--spx-gutter); }
.spx h3 { letter-spacing: 0; line-height: 1.6; }
.spx a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---- Breadcrumb strip and hero ---- */
.spx-top { background: var(--tint); padding-top: 26px; }
.spx-crumbs { font-size: 13px; color: var(--grey); padding: 4px 0 26px; }
.spx-crumbs a { color: var(--grey); }
.spx-crumbs a:hover { color: var(--accent-dk); }
.spx-crumbs .spx-sep { margin: 0 8px; }
.spx-crumbs [aria-current] { color: var(--ink-soft); }

.spx-hero { background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%); padding: 0 0 54px; }
.spx-hero h1 { font-size: clamp(31px, 4.6vw, 46px); line-height: 1.1; letter-spacing: -.015em; color: var(--brand); max-width: 21ch; text-wrap: balance; margin-bottom: 18px; }
.spx-answer { font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }
.spx-answer strong { color: var(--brand); }
.spx-hero-cta { margin-top: 26px; }
.spx-part-of { font-size: 13.5px; color: var(--grey); margin-bottom: 14px; }
.spx-part-of a { color: var(--accent-dk); text-decoration: underline; }

/* ---- Sections ---- */
.spx-section { padding: 54px 0; }
.spx-section h2 { font-size: clamp(22px, 3vw, 29px); line-height: 1.22; letter-spacing: -.01em; color: var(--brand); max-width: 26ch; text-wrap: balance; margin-bottom: 12px; }
.spx-section h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-dk); }
.spx-lede { color: var(--ink-soft); max-width: 70ch; margin-bottom: 26px; }
.spx-smallnote { font-size: 13px; color: var(--grey); margin-top: 16px; }

/* ---- Cards ---- */
.spx-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 16px; }
.spx-item { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; padding: 20px; transition: transform .25s var(--spx-ease), box-shadow .25s var(--spx-ease); }
.spx-item:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15, 35, 46, .08); }
.spx-items > .spx-item:first-child { grid-column: span 2; background: var(--tint); }
.spx-item h3 { font-size: 17px; line-height: 1.35; margin-bottom: 5px; color: var(--brand); }
.spx-item h3 a { color: var(--accent-dk); text-decoration: underline; }
.spx-item p { color: var(--ink-soft); font-size: 15px; }

/* ---- Service rows: cards by default, photo beside text with .spx-rows--b ---- */
.spx-rows { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.spx-row { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.spx-row h3 { font-size: 17.5px; margin-bottom: 6px; color: var(--brand); }
.spx-row p { color: var(--ink-soft); font-size: 15px; }
.spx-media { border-radius: 12px; overflow: hidden; background: var(--tint-soft); }
.spx-media img { display: block; width: 100%; height: auto; border-radius: inherit; }   /* shown whole, never cropped */
.spx-rows--b { grid-template-columns: 1fr; }
.spx-rows--b .spx-row { grid-template-columns: minmax(220px, 2fr) 3fr; align-items: center; background: none; border: 0; border-radius: 0; padding: 0; }
.spx-rows--b .spx-row:nth-child(even) .spx-media { order: 2; }
.spx-rows--b .spx-media { border-radius: 16px; }

/* ---- Tinted band (compliance) ---- */
.spx-band { background: var(--tint); }
.spx-band .spx-section { padding: 46px 0; }
.spx-band h2 { margin-bottom: 14px; }
.spx-band ul { display: grid; gap: 12px; max-width: 74ch; }
.spx-band li { color: var(--ink-soft); font-size: 15px; padding-left: 26px; position: relative; }
.spx-band li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); }
.spx-band li strong { color: var(--brand); }
.spx-prose { color: var(--ink-soft); max-width: 74ch; }

/* ---- Dark proof band (case study) ---- */
.spx-proof { background: var(--brand); color: #E7EEF2; }
.spx-proof .spx-section { padding: 52px 0; }
.spx .spx-proof h2 { color: #fff; max-width: none; }
.spx .spx-proof h2 em { color: var(--bright); }
.spx-proof p { color: #B9C8D0; }
.spx-stats { display: flex; flex-wrap: wrap; gap: 34px; margin: 22px 0 6px; }
.spx-stat b { display: block; font-size: clamp(27px, 3.4vw, 36px); color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.spx-stat span { font-size: 13.5px; color: #93A8B3; }
.spx-chartwrap { margin: 26px 0 4px; max-width: 600px; }
.spx-chartwrap svg { width: 100%; height: auto; display: block; }
.spx-chartwrap--bars svg { max-width: 420px; }
.spx-proof .spx-who { margin-top: 20px; color: #CBD7DD; font-size: 15px; }
.spx-proof .spx-who strong { color: #fff; }
.spx-proof .spx-smallnote { color: #7E95A2; }

/* ---- Audit offer, FAQ, closing call to action ---- */
.spx-audit { background: var(--tint); }
.spx-audit .spx-section { padding: 46px 0; }
.spx-audit p { max-width: 66ch; }
.spx-audit .btn { margin-top: 20px; }

.spx-faq .spx-qa { border-top: 1px solid var(--line); padding: 20px 0; max-width: 76ch; }
.spx-faq .spx-qa:last-of-type { border-bottom: 1px solid var(--line); }
.spx-faq h3 { font-size: 16.5px; margin-bottom: 7px; color: var(--brand); }
.spx-faq p { color: var(--ink-soft); font-size: 15px; }

.spx-cta { background: linear-gradient(180deg, var(--bg) 0%, var(--tint) 100%); }
.spx-cta .spx-section { padding: 62px 0; text-align: center; }
.spx-cta h2 { margin-left: auto; margin-right: auto; }
.spx-cta p { color: var(--ink-soft); margin: 10px 0 26px; }

/* ---- Search demand chart: white panel by default, dark with .spx-demand--dark ---- */
.spx-demand .spx-panel { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; padding: 30px 30px 22px; }
.spx-demand .spx-chartwrap { max-width: 640px; margin: 14px 0 4px; }
.spx-demand .spx-track { fill: #E4EDF2; }
.spx-demand text { fill: var(--ink-soft); font-family: Inter, sans-serif; }
.spx-demand .spx-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.spx .spx-demand--dark .spx-panel { background: var(--brand); border-color: var(--brand); }
.spx .spx-demand--dark h2 { color: #fff; }
.spx .spx-demand--dark h2 em { color: var(--bright); }
.spx .spx-demand--dark .spx-lede { color: #B9C8D0; }
.spx .spx-demand--dark .spx-smallnote { color: #7E95A2; }
.spx .spx-demand--dark .spx-track { fill: #1B3D4E; }
.spx .spx-demand--dark text { fill: #DDE8ED; }

/* ---- Numbers strip: donut and three tiles ---- */
.spx-ev-grid { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: center; }
.spx-ev-donut svg { width: 200px; height: auto; display: block; margin: 0 auto; }
.spx-ev-donut .spx-smallnote { text-align: center; max-width: 250px; margin: 10px auto 0; }
.spx-ring-rest { stroke: var(--tint); }
.spx-ring-main { stroke: var(--accent-dk); }
.spx-ring-num { fill: var(--brand); }
.spx-ring-sub { fill: var(--grey); }
.spx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.spx-kpi { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px; }
.spx-kpi b { display: block; font-size: clamp(22px, 2.6vw, 28px); color: var(--brand); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.spx-kpi span { font-size: 13px; color: var(--grey); line-height: 1.45; display: block; }

/* ---- Per-specialty colour (class comes from the page slug) ---- */
.spx--foot-and-ankle { --accent: #3FA47C; --accent-dk: #1F6A4E; --bright: #4FC08D; --tint: #E2F1EA; --tint-soft: #EFF7F2; }
.spx--ent { --tint: #E3F1FA; --tint-soft: #F0F7FC; }
.spx--ent .spx-section h2 em { color: #1F86C4; }

@media (max-width: 760px) {
  .spx-ev-grid { grid-template-columns: 1fr; }
  .spx-items > .spx-item:first-child { grid-column: auto; }
  .spx-stats { gap: 22px; }
  .spx-section { padding: 40px 0; }
  .spx-rows--b .spx-row { grid-template-columns: 1fr; }
  .spx-rows--b .spx-row:nth-child(even) .spx-media { order: 0; }
}

/* ---- Links between specialty pages (Oct 9) ---- */
.spx-sisters { font-size: 14px; color: var(--grey); padding: 0 0 44px; }
.spx-sisters a { color: var(--accent-dk); text-decoration: underline; }

/* ---- Specialties index page ---- */
.spx--index .spx-hero { padding-bottom: 30px; }
.spx--index .spx-hero p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }
.spx-index { padding: 10px 0 64px; }
.spx-index .spx-item h3 a { color: var(--brand); text-decoration: none; }
.spx-index .spx-item h3 a:hover { color: var(--accent-dk); }
.spx-index .spx-smallnote a { color: var(--accent-dk); text-decoration: underline; }