/* HCP illustration + icon wiring — additive layer over the approved Stranded
   package. Loaded only on the 3 HCP pages via the layout's optional "Styles"
   section. Does NOT modify the vendored styles.css / design.css. */

/* Spot icons (client HCP_Figma_16x9 icon set — 16:9 scene illustrations, not
   glyphs). One rule works in both block cards (.health-card, .mechanisms
   article) and grid cards (.stat, .workflow-step): grid-column is a no-op
   outside a grid, so the image simply sits at the top of each card. */
.hcp-spot {
  display: block;
  grid-column: 1 / -1;
  width: clamp(104px, 13vw, 148px);
  height: auto;            /* override the img height attr so aspect-ratio governs */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 18px;
  /* No fill: Chris's redone spot illustrations are transparent (no background),
     so they sit directly on the section color. Opaque icons still cover the box,
     so dropping the paper fill is a no-op for them. */
  background: transparent;
}

/* Line icons (client HCP icon set — 24x24 stroke glyphs in brand blue).
   Replaces the former 16:9 ocean spot art on the stat, mechanism, prompt and
   resource cards. Each glyph's box comes straight from the <img> width/height
   attributes (64–104px, always square), so this rule only handles block flow
   and the gap below the glyph. Sits at the top-left of each card, matching the
   left-aligned numbers and copy beneath it. */
.hcp-icon {
  display: block;
  max-width: none;       /* never let a container img cap shrink the glyph */
  margin: 0 0 16px;
}
.patient-prompt .hcp-icon { margin-bottom: 14px; }
.patient-resource-card .hcp-icon { margin-bottom: 20px; }

/* Title-with-icon band — the "follow-up opportunity" section pairs its section
   title with a large 112px glyph to the right (no section illustration). Mirrors
   the approved package's .hcp-title-with-icon grid, with our .patient- title
   class. Collapses to a stacked icon-over-title on narrow screens. */
.hcp-title-with-icon {
  display: grid;
  grid-template-columns: 1fr 120px;
  align-items: start;
  gap: 40px;
}
.hcp-title-with-icon > .hcp-icon { width: 112px; height: 112px; margin: 10px 0 0; }
.hcp-title-with-icon .patient-section-title { max-width: 900px; }
.hcp-title-with-icon + .patient-stats { margin-top: 0; }
@media (max-width: 820px) {
  .hcp-title-with-icon { gap: 24px; grid-template-columns: 1fr 90px; }
  .hcp-title-with-icon > .hcp-icon { width: 88px; height: 88px; }
}
@media (max-width: 600px) {
  .hcp-title-with-icon { grid-template-columns: 1fr; gap: 0; }
  .hcp-title-with-icon > .hcp-icon { grid-row: 1; width: 80px; height: 80px; margin: 0 0 22px; }
}

/* Systemic-hypoxia intro — the "Repeated obstruction has systemic consequences"
   heading pairs with the circulatory-system body figure to its right (a square
   illustration from Figma). Rounded corners match the site-wide figure radius
   (22px). Collapses to a stacked figure-under-copy on narrow screens. */
.hcp-systemic-intro {
  display: grid;
  grid-template-columns: 1fr minmax(204px, 272px);
  gap: 44px;
  align-items: center;
}
.hcp-systemic-intro .patient-section-title { margin: 0; }
.hcp-systemic-art { margin: 0; }
.hcp-systemic-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}
@media (max-width: 820px) {
  .hcp-systemic-intro { gap: 28px; grid-template-columns: 1fr minmax(153px, 204px); }
}
@media (max-width: 600px) {
  .hcp-systemic-intro { grid-template-columns: 1fr; gap: 22px; }
  .hcp-systemic-art img { max-width: 272px; }
}

/* Science callout — the "oxygen signal deserves attention" inset carries a
   112px glyph beside its heading + copy instead of a section illustration.
   Mirrors the approved package's .hcp-science-callout (loaded after the compiled
   patient.css, so these win over .patient-science-inset at equal specificity:
   flat top/bottom rules replace the boxed inset). Stacks on narrow screens. */
.hcp-science-callout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 40px;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 30px 0;
}
/* Systemic-impact heart→brain art (16:9). Fills the illustration column so the
   full composition shows — replaces the former 112px line glyph. */
.hcp-science-callout > .hcp-callout-art { width: 100%; height: auto; margin: 0; }
.hcp-science-callout > .hcp-callout-art > img { display: block; width: 100%; height: auto; }
.hcp-science-callout h3 { font-size: 32px; }
.hcp-science-callout p { font-size: 16px; }
@media (max-width: 820px) {
  .hcp-science-callout { gap: 28px; grid-template-columns: minmax(150px, 200px) 1fr; }
}
@media (max-width: 600px) {
  .hcp-science-callout { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .hcp-science-callout > .hcp-callout-art { max-width: 320px; }
  .hcp-science-callout h3 { font-size: 30px; }
}

/* Workflow steps read as a single left-to-right row: icon → number → text.
   Overrides the vendored 3-column grid (which put the 16:9 icon on its own
   top row and wrapped the description underneath). Heading + description are
   grouped in .workflow-text so they stack within the third column. This file
   loads after styles.css/design.css/site-enhancements.css, so these win at
   equal specificity — including over the vendored responsive overrides. */
/* Center the whole step block horizontally on the page (rows stay aligned to
   each other; icons remain in one column) without changing any wrapping. */
.workflow {
  max-width: 880px;
  margin-inline: auto;
}

/* The step number is part of the title now ("01 Identify"), so the row is just
   icon + text — no separate number column. */
.workflow-step {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 26px;
  row-gap: 0;
}

.workflow-step .hcp-spot {
  grid-column: auto;          /* cancel the full-width 1 / -1 span */
  width: 92px;
  margin: 0;
}

/* Numeral leads the heading, same size/weight as the title, in coral. */
.workflow-text h3 { margin: 0; }
.workflow-text h3 .step-num { color: var(--coral); margin-right: 0.18em; }
.workflow-text p { margin: 8px 0 0; }

/* Narrow screens: icon on the top line, "01 Title" + text span below. */
@media (max-width: 560px) {
  .workflow-step {
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 10px;
  }
  .workflow-step .hcp-spot { width: 64px; }
  .workflow-text { grid-column: 1 / -1; }
}

/* The first section sits directly under the hero. Its .patient-rule divider was
   removed (in the view) so no stray line shows right below the hero — but that
   section still uses .patient-mechanisms, whose default navy top-border was only
   suppressed while the section carried .patient-rule. Re-drop it here so the
   icon-card row stays borderless, matching the rest of the H2 page. Scoped to
   the hero's immediate next section, so the later impact-band mechanisms keep
   their border. */
body[data-page="H2"] .patient-interior-hero + .patient-section .patient-mechanisms {
  border-top: 0;
}

/* Sleep-specialist-roles row — a second figures row beneath the re-engagement
   motivations on the Resources page. Each figure adds a bold role label between
   the number and its descriptive caption (the motivations row above has no
   label, so this is scoped to .hcp-roles). The row sits a clear gap below the
   first, introduced by its own eyebrow. */
.hcp-roles-title { margin-top: 52px; }
/* Match the number size of the motivations row directly above. That row carries
   icons, so its figures use the compact icon-beside-number size (clamp 46–84px);
   the roles row has no icons, so without this it would fall back to the larger
   default figure. Specificity (5 classes) beats the vendored .patient-four rule
   at every breakpoint. */
.patient-stats.patient-four.hcp-roles .patient-stat .patient-number {
  font-size: clamp(46px, 6vw, 84px);
}
.hcp-roles .patient-stat-label {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--navy);
  margin-top: 14px;
  max-width: 360px;
}
.hcp-roles .patient-stat-label + p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
}

/* Supporting illustrations dropped into sections that had no figure slot.
   Constrained + centered so they read as support art without disturbing the
   section's existing grid/columns. */
.hcp-added {
  margin: 34px auto 0;
  max-width: 640px;
}

.hcp-added img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}