/* ============================================================
   PAGE: ABOUT — sections unique to /about.html
   Tokens mapped to the home-page canon. Figma's spacing scale
   diverges from ours at three values (s-5=24, s-9=64, s-10=80),
   so spacings are mapped BY VALUE: 24→--s-6, 64→--s-10, 80→--s-11.
   ============================================================ */

/* ============================================================
   HERO — title line break
   ============================================================ */
/* phone: drop the forced <br> so the display title wraps naturally and "clinical" lands on
   line 2 (a clean "CoreVue built around / clinical quality" can't fit at the phone font size);
   from tablet up the intended two-line split is restored */
.hero h1 br{display: none}
@media (min-width: 600px){ .hero h1 br{display: inline} }


/* ============================================================
   HERO STATS STRIP — bordered 3-up, sits on the hero's paper bg
   (same rhythm as .service-cards; styled like .why-grid cells)
   ============================================================ */
.stat-strip{
  display: grid; grid-template-columns: 1fr;
  background: var(--c-white);
  background-clip: padding-box;   /* translucent border composites over the hero bg, not white */
  border: 1px solid var(--c-rule);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--s-8);   /* 48 — hero intro → strip (phone), like .service-cards */
}
@media (min-width: 600px){ .stat-strip{margin-top: var(--s-10)} }   /* 64 — from tablet up */
@media (min-width: 905px){ .stat-strip{grid-template-columns: repeat(3, 1fr)} }
.stat-cell{
  padding: var(--card-pad-lg);   /* 32 */
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--gap-text);          /* 24 — number → description (exact, since no min-height below 905) */
  border-bottom: 1px solid var(--c-rule);
}
.stat-cell:last-child{border-bottom: none}
/* ≥905 (3 columns): dividers switch to right borders (cells size to content; grid keeps the row equal) */
@media (min-width: 905px){
  .stat-cell{border-bottom: none; border-right: 1px solid var(--c-rule)}
  .stat-cell:last-child{border-right: none}
}
/* desktop only: min-height gives the wide cards presence (phone & both tablets size to content) */
@media (min-width: 1240px){
  .stat-cell{min-height: 200px}
}
.stat-num{display: flex; align-items: baseline; gap: var(--gap-icon); color: var(--c-navy)}   /* big word + small word */
.stat-word{font-size: var(--t-h3-size); line-height: var(--lh-h3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--c-navy-60)}
.stat-cell p{color: var(--c-navy-80)}


/* ============================================================
   ABOUT INTRO — statement + body paragraphs / image
   ============================================================ */
/* the hero's own padding-bottom already provides the inter-section space — a top
   padding here would double it (both blocks sit on the same paper bg) */
.about-intro{padding: 0 var(--section-px) var(--section-pb)}
.intro-grid{display: grid; grid-template-columns: 1fr; gap: var(--gap-block)}
@media (min-width: 905px){ .intro-grid{grid-template-columns: 1fr 1fr; align-items: stretch} }
.intro-text{display: flex; flex-direction: column; gap: var(--gap-text)}   /* 24 — statement → body */
.intro-body{color: var(--c-navy)}
.intro-body p + p{margin-top: var(--gap-text)}   /* 24 — paragraph spacing (blank line in Figma) */
.intro-media{border-radius: var(--r-xl); overflow: hidden; background: var(--c-paper-3); min-height: 320px}
/* phone + portrait tablet: the photo becomes a full-bleed band ABOVE the text, square-edged —
   its own block, like .pathway on the home page (breaks out of the section padding to full viewport) */
@media (max-width: 904.98px){
  .intro-media{
    order: -1;
    width: 100vw; margin-left: calc(50% - 50vw);
    border-radius: 0;
    aspect-ratio: auto; min-height: 0;
    height: 300px;   /* = .pathway phone height (home reception photo) */
  }
  /* photo → title gap = the inter-section gap (same as hero → photo = --section-pb), not --gap-block */
  .intro-grid{row-gap: var(--section-pb)}
}
@media (min-width: 600px) and (max-width: 904.98px){ .intro-media{height: 430px} }   /* = .pathway tablet height */
.intro-media img{width: 100%; height: 100%; object-fit: cover; display: block}


/* ============================================================
   WHAT WE DO — tabbed services grid
   ============================================================ */
.whatwedo{background: var(--c-paper-2); padding: var(--section-pb) var(--section-px)}   /* band, like .why */
/* heading + tabs on one row; wrap on narrow screens */
.wwd-head{display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-text); margin-bottom: var(--gap-block)}

/* (the .svc-tabs Radiology/HeartCare switcher lives in components.css — shared with the booking form) */

.svc-panel[hidden]{display: none}
/* 1px gap over a rule-coloured container draws the inner dividers; the outer
   border + overflow:hidden clip them to the rounded card (handles any card count).
   --c-rule is layered OVER white (not left translucent over the warm section bg),
   so the dividers read as the same clean navy-10-on-white as .why-grid / Figma. */
.svc-grid{
  display: grid; grid-template-columns: 1fr;
  gap: 1px;
  /* inner gaps: --c-rule composited over white (clean, between the white cards).
     outer border: background clipped to padding-box so the translucent border
     composites over the warm SITE bg instead of white — no cool-grey-on-beige
     clash, blends like Figma. */
  background: linear-gradient(var(--c-rule), var(--c-rule)), var(--c-white);
  background-clip: padding-box;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-xl);
  overflow: hidden;
}
@media (min-width: 905px){ .svc-grid{grid-template-columns: 1fr 1fr} }
.svc-card{
  background: var(--c-white);
  padding: var(--card-pad-lg);   /* 32 */
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: space-between;   /* title top, body bottom (while the Prep & Details links are hidden) */
  gap: var(--gap-text);          /* 24 — title → body */
}
.svc-panel.rad   .svc-card h3{color: var(--c-purple)}
.svc-panel.heart .svc-card h3{color: var(--c-red)}
.svc-card p{color: var(--c-navy-80)}
.svc-body{display: flex; flex-direction: column; gap: var(--gap-stack)}   /* 12 — desc → link */
.svc-more{color: var(--c-navy)}
/* whole card is one click target — the Prep & Details hit area is stretched over the card
   (same pattern as .doc-card); hovering anywhere shows the link affordance */
.svc-card{position: relative}
.svc-card .svc-more::after{content: ""; position: absolute; inset: 0}
@media (hover: hover){
  .svc-more .icon{transition: transform .15s ease}
  .svc-card:hover .svc-more{text-decoration: underline; text-underline-offset: 3px}
  .svc-card:hover .svc-more .icon{transform: translateX(3px)}
}

/* "Don't see what you need?" — spans the full grid width */
.svc-note{
  grid-column: 1 / -1;
  background: var(--c-paper-3);
  /* divider on the note itself: border-top composites over paper-3 (warm), and margin-top:-1px
     overlaps the grid's 1px gap so the cool navy-10-on-white gap line above is replaced, not doubled */
  border-top: 1px solid var(--c-rule);
  margin-top: -1px;
  padding: var(--card-pad-lg);   /* 32 — aligns the banner content with the cards' padding */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--gap-block);
}
.svc-note-text{display: flex; flex-direction: column; gap: var(--gap-stack)}   /* 12 — title → desc */

/* HeartCare tab has 11 service cards (odd) — make the "Don't see what you need?" a normal single
   cell card (stacked) so it fills the 12th slot and the 2-col grid has no empty cell / footer.
   Radiology (8 even cards) keeps the full-width footer. */
@media (min-width: 905px){
  .svc-panel.heart .svc-note{
    grid-column: auto;
    flex-direction: column; flex-wrap: nowrap;
    align-items: flex-start; justify-content: space-between;
    min-height: 240px;
    /* dividers on the note (warm navy-10-on-paper-3) for its top & left edges, overlapping the
       cool grid-gap lines that otherwise sit on the white cards above / to the left */
    border-top: 1px solid var(--c-rule);
    border-left: 1px solid var(--c-rule);
    margin-top: -1px; margin-left: -1px;
  }
}

.wwd-book{margin-top: var(--gap-block)}
/* HeartCare tab active (its panel un-hidden by JS) → Book button turns brand red; Radiology default stays purple */
.svc-panel.heart:not([hidden]) ~ .wwd-book{background: var(--c-red)}


/* ============================================================
   EQUIPMENT — full-bleed carousel (same mechanics as .doctors)
   ============================================================ */
.equip{background: var(--c-paper); padding: var(--section-pb) 0;
  --doc-inset: max(var(--section-px), calc((100% - var(--container-max)) / 2));
}
.equip-head{padding-inline: var(--doc-inset); margin-bottom: var(--gap-block); display: flex; flex-direction: column; gap: var(--gap-text); max-width: 900px}
/* title "Precise results" drops to its own line from portrait tablet up; phone wraps naturally */
.equip-head h2 br{display: none}
.equip-nav{display: flex; gap: var(--gap-btns-m); flex-shrink: 0; justify-content: flex-end; padding-inline: var(--doc-inset)}
.equip-nav .btn{border-color: transparent}
.equip-nav .btn:focus-visible{outline: 2px solid var(--c-navy); outline-offset: 2px}
.equip-prev .icon{transform: rotate(180deg)}
.equip-nav button:disabled{opacity: .4; cursor: default}
.equip-nav button:disabled:hover{transform: none}
.equip-track{
  display: flex; gap: var(--grid-gap); margin-bottom: var(--gap-subblock);
  padding-inline: var(--doc-inset); scroll-padding-inline: var(--doc-inset);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.equip-track::-webkit-scrollbar{display: none}
.equip-track:focus-visible{outline: 2px solid var(--c-navy); outline-offset: -2px}
@media (prefers-reduced-motion: reduce){ .equip-track{scroll-behavior: auto} }

/* card = transparent column: the device floats on the section's paper-3 (no wrapper),
   and only the caption is a white rounded card below it — matches Figma exactly */
.eq-card{
  flex: 0 0 clamp(300px, 80vw, 560px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
/* the exported PNG IS the Figma image panel (604×500) with the device crop + padding
   baked in — so the media just matches that aspect and the image fills it 1:1 */
.eq-media{
  aspect-ratio: 604 / 500;
  overflow: hidden;
}
.eq-media img{width: 100%; height: 100%; object-fit: cover; display: block}
/* caption — its own white card, rounded on all corners (top corners reveal the section bg) */
.eq-info{
  flex: 1;
  background: var(--c-white);
  border-radius: var(--r-xl);
  padding: var(--card-pad-lg);
  display: flex; flex-direction: column; gap: var(--s-2);   /* 8 — title → description (Figma) */
}
.eq-info p{color: var(--c-navy-80); margin-top: auto}   /* title pinned top, description pinned to the card bottom (gap 8 stays the minimum) */

/* ≥600: arrows move up beside the heading (same edge-column grid as .doctors) */
@media (min-width: 600px){
  .equip{
    display: grid;
    grid-template-columns: var(--doc-inset) 1fr auto var(--doc-inset);
    grid-template-areas: ".    head nav  ."
                         "track track track track";
    align-items: end; row-gap: var(--gap-block);
  }
  /* margin-right keeps a gap from the lead text to the arrows where the head fills the column
     (portrait tablet + narrow landscape); inert once the head caps at max-width and a gap already exists */
  .equip-head{grid-area: head; margin-bottom: 0; padding-inline: 0; max-width: 720px; margin-right: var(--gap-block)}
  .equip-head h2 br{display: inline}   /* ≥600: force "Precise results" onto line 2 */
  .equip-nav{grid-area: nav; padding-inline: 0}
  .equip-track{grid-area: track; margin-bottom: 0}
}

/* ============================================================
   RADIOLOGY & HEARTCARE service pages (reuse this stylesheet):
   the services band sits where the hero stat strip sat — keep the
   same hero → block gap the strip had (48 phone / 64 from tablet),
   not the full section-pb.
   ============================================================ */
body[data-page="radiology"] .hero-section,
body[data-page="heartcare"] .hero-section{padding-bottom: 0}   /* .whatwedo's own padding-top (48/64) sets the hero → services gap */
body[data-page="radiology"] .hero .eyebrow{color: var(--c-purple)}   /* home hero pretitle style, in the radiology brand colour (heartcare keeps the default red) */
/* no fax/map icons beside it here — the phone button keeps its full form (icon + number) on every breakpoint */
body[data-page="radiology"] .hero-call,
body[data-page="heartcare"] .hero-call{aspect-ratio: auto; padding: 0 var(--s-7)}
body[data-page="radiology"] .hero-call .hero-call-num,
body[data-page="heartcare"] .hero-call .hero-call-num{display: inline}
body[data-page="radiology"] .whatwedo,
body[data-page="heartcare"] .whatwedo{padding-top: var(--s-8); background: var(--c-paper)}   /* service pages: no band — the whole page sits on paper */
@media (min-width: 600px){
  body[data-page="radiology"] .whatwedo,
  body[data-page="heartcare"] .whatwedo{padding-top: var(--s-10)}
}
/* service pages: doctors sit on a paper-2 band, Why CoreVue back on plain paper */
body[data-page="radiology"] .why,
body[data-page="heartcare"] .why{background: var(--c-paper)}
body[data-page="radiology"] .svc-note,
body[data-page="heartcare"] .svc-note{background: var(--c-paper-2)}   /* the About tabs keep paper-3 */
/* two radiologists — no carousel: a 3-column grid (intro + 2 cards). The .doc-card flex
   sizing is a flex property, so it's simply ignored inside this grid. */
.doctors.rad-docs{display: block; padding: var(--section-pb) var(--section-px); background: var(--c-paper-2)}   /* kills the ≥600 carousel grid (head/nav/track areas) that .doctors carries */
.rad-docs-grid{display: grid; grid-template-columns: 1fr; gap: var(--grid-gap)}
.rad-docs-intro{display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-text)}   /* title + description at the top, the Book button pinned to the card bottom line */
.rad-docs-intro h2{margin-bottom: var(--gap-text)}
.rad-docs-intro .btn{align-self: flex-start}   /* content-width button (a stretched flex item would go full width) */
@media (min-width: 600px) and (max-width: 1239.98px){
  .rad-docs-grid{grid-template-columns: repeat(2, 1fr)}
  .rad-docs-intro{grid-column: 1 / -1}
}
/* everything below lg (phone, both tablets, small laptop): the Book button drops BELOW
   the cards — side-by-side with the intro the cards overflow / squeeze the intro column.
   display:contents lifts the intro's children into the grid so the button can reorder;
   the extra margins top up the 24px grid gap to --gap-block (48) on both seams. */
@media (max-width: 1239.98px){
  .rad-docs-intro{display: contents}
  .rad-docs-intro > div{grid-column: 1 / -1; margin-bottom: var(--s-6)}   /* description → cards: 24 + 24 = 48 */
  .rad-docs-intro .btn{order: 1; grid-column: 1 / -1; justify-self: start; margin-top: var(--s-6)}   /* cards → Book: 24 + 24 = 48 */
}
@media (min-width: 1240px){
  /* intro takes the free space; the two cards keep the carousel's exact width formula
     and sit flush against the right content edge */
  .rad-docs-grid{grid-template-columns: 1fr auto auto}
  .rad-docs-grid .doc-card{width: clamp(290px, 220px + 11.5vw, 384px)}
}