/* ============================================================
   Rockwell Health — Specialty landing template (demonstrated on
   Cardiology). Page-only styles, prefix ed-sp-. Extends the shared
   editorial system in ../../rockwell/style.css (READ-ONLY): all
   tokens, header, footer, buttons, .ed-kicker, .ed-textlink, the
   focus ring and reduced-motion block are inherited from there.

   Reusable as a template: every specialty reuses this stylesheet
   unchanged. Only the HTML content tokens (name, lede, scope list,
   photos, specialty noun in the copy) change per specialty.
   ============================================================ */

/* ============================================================
   0 · Breadcrumb / back affordance
   A quiet ruled bar under the sticky header. The current page name
   is the only token that changes per specialty.
   ============================================================ */
.ed-sp-crumb{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.ed-sp-crumb-in{
  display:flex; align-items:center; gap:.7em;
  padding-block:clamp(14px,1.6vw,20px);
  font-size:.92rem;
}
.ed-sp-crumb-back{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"Figtree",sans-serif; font-weight:600;
  color:var(--body-2); border-radius:var(--r-xs);
  transition:color var(--fast) var(--ease), gap var(--fast) var(--ease);
}
.ed-sp-crumb-back svg{ width:1.05em; height:1.05em; transition:transform var(--fast) var(--ease); }
.ed-sp-crumb-back:hover{ color:var(--red-ink); gap:.66em; }
.ed-sp-crumb-back:hover svg{ transform:translateX(-3px); }
.ed-sp-crumb-sep{ color:var(--line-2); }
.ed-sp-crumb-here{
  font-family:"Figtree",sans-serif; font-weight:600; color:var(--navy);
}

/* shared little section tag (reused by §2 and §4) */
.ed-sp-tag{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Figtree",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red-ink);
  margin-bottom:.85rem;
}
.ed-sp-tag::before{ content:""; width:24px; height:2px; background:var(--red); border-radius:2px; flex:none; }

/* ============================================================
   1 · Hero / intro  (copy left, art cluster right)
   Mirrors the Our Care masthead: a lead clinician consult photo
   plus a smaller captioned "place" plate, so the page opens with
   people AND place. Photos are template slots.
   ============================================================ */
.ed-sp-hero{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--paper-2) 100%);
  overflow:hidden;
}
.ed-sp-hero-in{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(34px,5vw,84px); align-items:center;
  padding-block:clamp(52px,7.5vw,104px);
}
.ed-sp-hero h1{
  font-size:clamp(2.9rem,6vw,5rem);
  line-height:1.0; letter-spacing:-.028em; color:var(--navy);
}
.ed-sp-hero-lede{
  margin-top:24px; max-width:46ch;
  font-size:clamp(1.08rem,1.3vw,1.24rem);
  line-height:1.62; color:var(--body-2);
}
.ed-sp-hero-cta{ margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; }

/* art cluster: a tall lead plate, a smaller place plate overlapping its foot */
.ed-sp-hero-art{
  position:relative;
  justify-self:end; width:100%; max-width:560px;
  padding-bottom:clamp(40px,5vw,64px);
}
.ed-sp-hero-fig{ margin:0; position:relative; overflow:hidden; }
.ed-sp-hero-fig--lead{
  border-radius:var(--r-lg);
  aspect-ratio:7/5.6;
  background:var(--paper-2);
  box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.7);
}
.ed-sp-hero-fig--lead::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(40,34,80,.06); pointer-events:none;
}
.ed-sp-hero-fig--lead img{
  width:100%; height:100%; object-fit:cover;
  /* lead with the equipment + exam table of this real Rockwell room.
     Per specialty, set this to suit the new photo. */
  object-position:38% center;
}
.ed-sp-hero-fig--place{
  position:absolute; right:clamp(-8px,-1vw,-22px); bottom:0;
  width:clamp(170px,42%,250px);
  border-radius:var(--r); overflow:hidden;
  background:var(--card);
  box-shadow:var(--sh-2);
  border:3px solid var(--paper);
}
.ed-sp-hero-fig--place::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(40,34,80,.07); pointer-events:none;
}
.ed-sp-hero-fig--place img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:1.5/1;
  object-position:center center;
}
.ed-sp-hero-fig--place figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:9px 12px;
  font-size:.72rem; letter-spacing:.04em; color:var(--on-navy-2);
  background:linear-gradient(0deg, rgba(20,16,63,.84), rgba(20,16,63,.12) 78%, transparent);
}

/* ============================================================
   2 · What this care covers — ruled editorial index
   A two-column scope list with serif sub-labels + line icons,
   not a checkbox card grid. List items are template slots.
   ============================================================ */
.ed-sp-covers{ padding-block:var(--sec); background:var(--paper); }
.ed-sp-covers-head{ max-width:60ch; margin-bottom:clamp(34px,4vw,52px); }
.ed-sp-covers-head h2{
  font-size:clamp(2.1rem,3.8vw,3.1rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.06;
}
.ed-sp-covers-lede{
  margin-top:18px; max-width:58ch;
  font-size:clamp(1.05rem,1.2vw,1.18rem); line-height:1.6; color:var(--body-2);
}

.ed-sp-scope{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,5vw,88px);
  border-top:1px solid var(--line-2);
}
.ed-sp-scope-row{
  display:flex; gap:clamp(16px,1.6vw,22px); align-items:flex-start;
  padding-block:clamp(24px,2.6vw,32px);
  border-bottom:1px solid var(--line);
}
/* keep the two columns' rows on shared baselines: the last row in a
   2-col grid loses its bottom rule so the index closes cleanly */
.ed-sp-scope-row:last-child,
.ed-sp-scope-row:nth-last-child(2):nth-child(odd){ border-bottom:none; }
.ed-sp-scope-ic{
  display:grid; place-items:center; flex:none;
  width:48px; height:48px; border-radius:var(--r);
  background:transparent; border:1px solid var(--navy); color:var(--navy);
  transition:transform var(--med) var(--ease-expo), border-color var(--med) var(--ease-expo), color var(--med) var(--ease-expo);
}
.ed-sp-scope-ic svg{ width:24px; height:24px; }
.ed-sp-scope-row:hover .ed-sp-scope-ic{ transform:translateY(-3px); border-color:var(--red); color:var(--red); }
.ed-sp-scope-body h3{
  font-size:1.22rem; font-weight:600; letter-spacing:-.012em; line-height:1.2; color:var(--navy);
}
.ed-sp-scope-body p{
  margin-top:.5rem; max-width:38ch;
  font-size:.97rem; line-height:1.56; color:var(--body-2);
}

/* ============================================================
   3 · Connected to your primary care — the one navy band
   Asymmetric thesis + ruled "how it connects" list. This is the
   differentiator section every specialty keeps; only the specialty
   noun in the copy changes.
   ============================================================ */
.ed-sp-conn{
  padding-block:var(--sec);
  background:linear-gradient(165deg, var(--navy-deep) 0%, var(--navy-deeper) 100%);
  color:var(--on-navy);
}
.ed-sp-conn-in{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(40px,5.5vw,92px); align-items:start;
}
.ed-sp-conn-eyebrow{
  font-family:"Figtree",sans-serif; font-weight:600; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:#ff8a80;
  margin-bottom:clamp(16px,1.8vw,22px);
}
.ed-sp-conn-lead h2{
  color:var(--on-navy);
  font-size:clamp(2.1rem,4vw,3.2rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.05; max-width:14ch;
}
.ed-sp-conn-lede{
  margin-top:20px; max-width:42ch;
  font-size:clamp(1.06rem,1.2vw,1.2rem); line-height:1.62; color:var(--on-navy-2);
}
.ed-sp-conn-quote{
  margin:clamp(24px,3vw,34px) 0 0;
  padding-left:22px; position:relative;
  font-family:"Spectral",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.22rem,1.7vw,1.5rem); line-height:1.4;
  letter-spacing:-.006em; color:var(--on-navy); max-width:38ch;
  text-wrap:pretty;
}
.ed-sp-conn-quote::before{
  content:""; position:absolute; left:0; top:.3em; bottom:.3em;
  width:3px; border-radius:var(--r-pill); background:var(--red);
}

.ed-sp-conn-list{ margin:0; border-top:1px solid var(--on-navy-rule); }
.ed-sp-conn-row{
  padding-block:clamp(22px,2.6vw,30px);
  border-bottom:1px solid var(--on-navy-rule);
}
.ed-sp-conn-row dt{
  font-family:"Spectral",serif; font-weight:600;
  font-size:clamp(1.18rem,1.5vw,1.42rem); letter-spacing:-.012em; line-height:1.18;
  color:var(--on-navy);
}
.ed-sp-conn-row dd{
  margin:.55rem 0 0; max-width:50ch;
  font-size:1rem; line-height:1.6; color:var(--on-navy-2);
}

/* ============================================================
   4 · What to expect — a genuinely ordered 3-step flow
   Numbers are information here (a real sequence), not decorative
   eyebrow scaffolding. Steps are reusable across specialties.
   ============================================================ */
.ed-sp-expect{ padding-block:var(--sec); background:var(--paper-2); border-bottom:1px solid var(--line); }
.ed-sp-expect-head{ max-width:60ch; margin-bottom:clamp(34px,4vw,52px); }
.ed-sp-expect-head h2{
  font-size:clamp(2rem,3.5vw,2.9rem); font-weight:600; letter-spacing:-.02em; line-height:1.07;
}
.ed-sp-expect-lede{
  margin-top:16px; max-width:56ch;
  font-size:clamp(1.04rem,1.2vw,1.16rem); line-height:1.58; color:var(--body-2);
}
.ed-sp-steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,2.4vw,34px);
  counter-reset:none;
}
.ed-sp-step{
  display:flex; flex-direction:column; gap:clamp(16px,1.8vw,22px);
  padding-top:clamp(20px,2.2vw,26px);
  border-top:2px solid var(--navy);
}
.ed-sp-step-no{
  display:inline-flex; align-items:baseline;
  font-family:"Spectral",serif; font-weight:700; font-style:italic;
  font-size:clamp(2.1rem,3vw,2.7rem); line-height:.9;
  letter-spacing:-.03em; color:var(--red);
}
.ed-sp-step-body h3{
  font-size:1.26rem; font-weight:600; letter-spacing:-.012em; line-height:1.2; color:var(--navy);
}
.ed-sp-step-body p{
  margin-top:.5rem; max-width:34ch;
  font-size:.98rem; line-height:1.56; color:var(--body-2);
}

/* ============================================================
   5 · Closing CTA — light, asymmetric (not a second navy slab)
   ============================================================ */
.ed-sp-close{
  padding-block:clamp(56px,7vw,104px);
  background:var(--paper);
}
.ed-sp-close-in{
  display:grid; grid-template-columns:1.25fr auto;
  align-items:center; gap:clamp(28px,4vw,56px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:clamp(30px,4vw,56px);
}
.ed-sp-close-rule{
  display:block; width:38px; height:2px; border-radius:2px;
  background:var(--red); margin-bottom:clamp(16px,1.8vw,22px);
}
.ed-sp-close-copy h2{
  font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.06; color:var(--navy);
}
.ed-sp-close-copy p{
  margin-top:14px; max-width:52ch;
  font-size:clamp(1.04rem,1.2vw,1.16rem); line-height:1.58; color:var(--body-2);
}
.ed-sp-close-actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px,1.8vw,20px);
}

/* ============================================================
   Responsive — 1024 (tablet)
   ============================================================ */
@media (max-width:1024px){
  /* hero stays 2-up but tightens; place plate shrinks proportionally */
  .ed-sp-hero-in{ gap:clamp(28px,4vw,48px); }

  /* connected band stacks: thesis over list */
  .ed-sp-conn-in{ grid-template-columns:1fr; gap:clamp(30px,4vw,42px); }
  .ed-sp-conn-lead h2{ max-width:20ch; }
  .ed-sp-conn-lede,.ed-sp-conn-quote{ max-width:60ch; }
}

/* ============================================================
   Responsive — 920 (hero stacks, mirrors shared hero breakpoint)
   ============================================================ */
@media (max-width:920px){
  .ed-sp-hero-in{ grid-template-columns:1fr; gap:44px; }
  .ed-sp-hero-copy{ max-width:none; }
  .ed-sp-hero-lede{ max-width:56ch; }
  .ed-sp-hero-art{
    justify-self:stretch; margin-inline:auto;
    width:min(100%,520px);
    padding-bottom:clamp(34px,7vw,52px);
  }

  /* scope index → single column */
  .ed-sp-scope{ grid-template-columns:1fr; }
  .ed-sp-scope-row{ padding-block:clamp(20px,4vw,26px); }
  .ed-sp-scope-row:nth-last-child(2):nth-child(odd){ border-bottom:1px solid var(--line); }
  .ed-sp-scope-row:last-child{ border-bottom:none; }
  .ed-sp-scope-body p{ max-width:54ch; }

  /* steps → single column ordered list */
  .ed-sp-steps{ grid-template-columns:1fr; gap:0; }
  .ed-sp-step{
    flex-direction:row; align-items:flex-start; gap:clamp(16px,4vw,22px);
    padding-block:clamp(22px,4vw,28px); padding-top:clamp(22px,4vw,28px);
    border-top:1px solid var(--line-2);
  }
  .ed-sp-step:first-child{ border-top:2px solid var(--navy); }
  .ed-sp-step-no{ flex:none; min-width:1.4em; }
  .ed-sp-step-body p{ max-width:52ch; }
}

/* ============================================================
   Responsive — 560 (phone, 390 target)
   ============================================================ */
@media (max-width:560px){
  .ed-sp-hero h1{ font-size:clamp(2.5rem,11vw,3.1rem); }
  .ed-sp-hero-in{ padding-block:40px 60px; }
  .ed-sp-hero-cta .ed-btn{ flex:1 1 auto; justify-content:center; }
  /* place plate gets a touch larger and tucks to a corner cleanly */
  .ed-sp-hero-fig--place{ width:clamp(150px,46%,210px); right:-6px; }

  .ed-sp-close-in{ grid-template-columns:1fr; gap:clamp(22px,5vw,30px); }
  .ed-sp-close-actions{ align-items:stretch; }
  .ed-sp-close-actions .ed-btn{ justify-content:center; }
  .ed-sp-close-actions .ed-textlink{ justify-content:center; }
}

/* ============================================================
   Reduced motion — neutralize this page's hover transforms.
   (The shared sheet's reduce block covers shared components; these
   are page-local additions, so disable them here too.)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ed-sp-crumb-back:hover{ gap:.5em; }
  .ed-sp-crumb-back:hover svg,
  .ed-sp-scope-row:hover .ed-sp-scope-ic{ transform:none; }
}