/* ==========================================================================
   Innovative Procedures — site/procedures/

   One stylesheet for the hub and every procedure page, patient and practice.
   The pages are generated from one template (tools/procedures/), so anything
   here applies to all of them at once. Everything that already exists as a
   shared component - panel, steps, chip, card--float, disclosure, fp-faq,
   fp-close - comes from styles.css and is not restyled here.
   ========================================================================== */

/* The same tighter rhythm the practice page uses. These are long reads, and
   the landing page's full gap between every section makes them longer. */
.proc-page main {
  --section-gap: clamp(
    calc(var(--hem-unit) * 2.25),
    4.5vw,
    calc(var(--hem-unit) * 3.75)
  );
}

/* --------------------------------------------------------------------------
   Hero

   No artwork in this hero, so it keeps its bottom padding. The headline is a
   procedure name, not a slogan - some run to eight words - so it is set a
   step smaller than the landing page's display size and allowed a wider
   measure, or "Blood-Brain Barrier Disruption" would stack one word a line.
   -------------------------------------------------------------------------- */
/* Tight under the hero (2026-10-07): the hero's own bottom padding and the
   next section's top padding were each a full section gap, about 115px of
   canvas between the headline block and the first panel. Now 16 + 34. */
.proc-hero { padding-bottom: var(--hem-space-4); }
.proc-hero + .section { padding-top: calc(var(--hem-unit) * 2); }

.proc-hero__display {
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  line-height: 1.04;
  max-width: 13em;
  text-wrap: balance;
  hyphens: manual;
}

.proc-hero__top { margin-top: var(--hem-space-6); }
/* Top-aligned, unlike the landing page (styles.css bottom-aligns .hero__top
   so its buttons sit on the last line of one short headline). These
   headlines vary in length page to page; reading from the top keeps the
   label, headline and lede starting together on every one. */
.proc-hero__top { align-items: start; }

@media (min-width: 960px) {
  .proc-hero__top { grid-template-columns: 1.1fr 0.9fr; }
  /* The landing page lifts the lede by a descender's depth to sit on one
     specific word. These headlines vary, so the lift would be right on some
     and wrong on others; level boxes are right on all of them. */
  .proc-hero .hero__lede { transform: none; }
  .proc-hero .hero__sub { font-size: 1.375rem; line-height: 1.5; }
}

.proc-hero .hero__sub + .hero__sub { margin-top: calc(var(--hem-space-8) * -0.5); }
.proc-hero__caption { margin-top: var(--hem-lede-sm); }


/* --------------------------------------------------------------------------
   Regulatory status

   Said in the hero, before anything else on the page, because on a page about
   an investigational therapy it is the first thing a reader is owed. Teal for
   every state - crimson is the brand's moment color, not a warning, and a
   red badge on "Investigational" would read as an alarm the facts do not
   support.
   -------------------------------------------------------------------------- */
.proc-status {
  display: grid;
  gap: var(--hem-space-1);
  margin: 0 0 var(--hem-space-6);
  padding: var(--hem-space-3) var(--hem-space-4);
  border-left: 3px solid var(--hem-teal);
  background: var(--hem-paper);
  border-radius: 0 var(--hem-radius-md) var(--hem-radius-md) 0;
}
.proc-status__label {
  font-size: var(--hem-size-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hem-teal);
}
.proc-status__note {
  font-size: var(--hem-size-caption);
  line-height: var(--hem-lh-caption);
  color: var(--hem-text-muted);
}
.proc-status--investigational { border-left-color: var(--hem-teal-300); }

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */
.proc-page h2.t-h1 { max-width: 20ch; }
.proc-lede { margin-top: var(--hem-lede); }
.proc-sub { margin: calc(var(--hem-unit) * 2) 0 var(--hem-space-4); }
.proc-note { margin-top: var(--hem-space-4); }

/* What to Know / Why Practices Join: four short points as white cards. A
   grid rather than the carousel - four fit on a desktop row, and on a phone
   they stack into a list short enough to read straight through. */
.proc-know {
  list-style: none;
  margin: clamp(calc(var(--hem-unit) * 2), 4.8vw, calc(var(--hem-unit) * 3)) 0 0;
  padding: 0;
  display: grid;
  gap: var(--hem-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .proc-know { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .proc-know { grid-template-columns: repeat(4, 1fr); } }

.proc-know__item {
  background: var(--hem-paper);
  border-radius: var(--hem-radius-lg);
  box-shadow: var(--hem-shadow-card);
  padding: var(--hem-space-6);
}
.proc-know__item h3 { margin-bottom: var(--hem-space-3); text-wrap: balance; }
.proc-know__item .t-body { max-width: none; }

/* Practice page, "Show Patients What You Offer", on the canvas (no panel,
   by request 2026-10-07). Below the heading, the copy and checklist on the
   left and the status card on the right, both starting on the same line, so
   the card sits beside what it belongs to instead of floating level with
   the heading. On the gray canvas the card is a white plate, as elsewhere. */
.proc-show {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--hem-unit) * 2);
  margin-top: var(--hem-lede);
  align-items: start;
}
@media (min-width: 900px) {
  .proc-show { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: calc(var(--hem-unit) * 3); }
}
.proc-show__lede { max-width: 60ch; }
.proc-show .proc-checklist { margin-top: var(--hem-space-6); }
.proc-status-card {
  background: var(--hem-paper);
  border-radius: var(--hem-radius-lg);
  box-shadow: var(--hem-shadow-card);
  padding: var(--hem-space-6);
}
.proc-status-card .proc-status { background: var(--hem-surface-raised); margin: var(--hem-space-3) 0 var(--hem-space-4); }

/* The close: the same cut as the practice page, scoped to these pages. */
.proc-page #join h2 { max-width: 20ch; text-wrap: balance; }
.proc-page .disclosure a { color: var(--hem-teal); }

/* --------------------------------------------------------------------------
   Procedure tiles — the hub and "More to Explore"
   -------------------------------------------------------------------------- */
.proc-grid {
  list-style: none;
  margin: var(--hem-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--hem-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .proc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .proc-grid { grid-template-columns: repeat(3, 1fr); } }

.proc-tile {
  display: flex;
  flex-direction: column;
  background: var(--hem-paper);
  border-radius: var(--hem-radius-lg);
  box-shadow: var(--hem-shadow-card);
  overflow: hidden;
}
/* A card is a fixed stack: status, headline, summary, then the chips pinned
   to the bottom. Each piece has a fixed size and a fixed place, so every
   card in a row lines up line for line, and whatever room is left over
   collects in one place - above the chips - instead of opening holes in the
   middle of the card.

   The headline reserves three lines whether it needs them or not, so every
   summary starts at the same height; the summary is held to four lines. Both
   are set a step under the section type: these are cards in a row of cards,
   not headings on a page. */
.proc-tile__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--hem-space-6);
  color: inherit;
  text-decoration: none;
}
.proc-tile__link:hover .proc-tile__name { text-decoration: underline; }
.proc-tile__status {
  font-size: var(--hem-size-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hem-teal);
}
.proc-tile__name {
  --lines: 3;
  margin-top: var(--hem-space-2);
  font-family: var(--hem-font-display);
  font-weight: 700;
  /* The same size as the For Practices carousel card titles (.fp-card h3),
     the site's heading for a card in a scrolling row. Was a one-off 20px. */
  font-size: var(--hem-size-body-lg);
  line-height: var(--hem-lh-h3);
  color: var(--hem-text-heading);
  text-wrap: balance;
}
.proc-tile__summary {
  margin-top: var(--hem-space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hem-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
/* The hub speaks to both sides, so each tile ends on both doors, equal in
   weight and side by side. The patient page is first: patients are the side
   that opens a match, and the tile body above already leads there. */
.proc-tile__audiences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hem-line);
}
.proc-tile__audience {
  display: block;
  padding: var(--hem-space-3) var(--hem-space-4);
  font-size: var(--hem-size-caption);
  font-weight: 700;
  color: var(--hem-teal);
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
.proc-tile__audience + .proc-tile__audience { border-left: 1px solid var(--hem-line); }
.proc-tile__audience:hover { background: var(--hem-teal-50); }

.proc-group + .proc-group { padding-top: 0; }
.proc-related__all { margin-top: var(--hem-space-6); }
.proc-related__all a { color: var(--hem-teal); font-weight: 700; }

/* #how centers its heading and steps (styles.css, shared with the landing
   page); the lede between them has to follow or it reads as a stray. */
.proc-page #how .proc-lede { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   Hub carousels — one row per category, the shared component (carousel.css)

   Wider than the shared 16rem track: a tile carries a procedure name of up to
   four lines and a one-sentence summary, and at 256px that ran to a column.
   The track is a <ul>, so the list marker and padding are cleared, and it is
   given block padding so the card shadow is not clipped by the scroller.
   -------------------------------------------------------------------------- */
.proc-carousel { margin-top: var(--hem-space-6); }
.proc-carousel .carousel__track {
  grid-auto-columns: min(19rem, 80vw);
  gap: var(--hem-space-4);
  list-style: none;
  margin: 0;
  padding: var(--hem-space-3) 0;
}
.proc-carousel .proc-tile { height: 100%; }
/* Three lines reserved for the headline in the hub carousels only, so every
   summary in a row starts at the same height. "More to Explore" shows short
   procedure names, where the reserved space was just a gap. */
.proc-carousel .proc-tile__name { min-height: calc(var(--hem-lh-h3) * 1em * var(--lines)); }

/* Always start-aligned. The shared component centers a row that fits, which
   is right under a centered dashboard heading; here every category heading is
   left-aligned, and a centered pair of two under it read as a stray. */
.proc-carousel .carousel__track,
.proc-carousel.carousel--centered .carousel__track { justify-content: start; }

/* --------------------------------------------------------------------------
   Hub hero — copy left, the illustration right

   The only hero in this section with artwork. The art is portrait (811x1149),
   so it takes the narrower track and is capped by height rather than width,
   or on a wide screen it would stand taller than the fold. On a phone it
   follows the buttons, smaller and centered: the offer comes first.
   -------------------------------------------------------------------------- */
.proc-hub-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hem-space-8);
  align-items: center;
  margin-top: var(--hem-space-6);
}
.proc-hub-hero__copy { max-width: 40rem; }
.proc-hub-hero__copy .proc-hero__display { margin-top: var(--hem-space-3); }
.proc-hub-hero__sub { margin-top: var(--hem-lede-sm); }
/* Fills the copy column: the column is the measure here, by request
   (2026-10-06), rather than the shared ch cap on .t-body-lg. */
.proc-hub-hero__copy .proc-hub-hero__sub { max-width: none; }
.proc-hub-hero__copy .btn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hem-space-3);
  max-width: 24rem;
}
.proc-hub-hero__copy .btn-row .btn { width: 100%; }
.proc-hub-hero__copy .proc-hero__caption { max-width: 24rem; text-align: center; }

.proc-hub-hero__art { justify-self: center; }
.proc-hub-hero__art img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(72vw, 320px);
  max-height: 440px;
  animation: hem-rise 620ms var(--hem-ease-glide) 220ms both;
}

/* A 12-column grid from 900px: six for the copy, six for the art. (The copy
   went 6 -> 7 -> 6 columns on 2026-10-06 as the art grew.) */
@media (min-width: 900px) {
  .proc-hub-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hem-space-6); align-items: end; }
  .proc-hub-hero__copy { grid-column: span 6; max-width: none; align-self: center; }
  .proc-hub-hero__art { grid-column: span 6; }
  /* Large on desktop, and standing on the section line: the hero gives up
     most of its bottom padding so the clinician's feet land just above the
     next section rather than floating mid-hero. */
  .proc-hub-hero__art img { max-width: 100%; max-height: 720px; }
  .proc-page--hub .proc-hero { padding-bottom: var(--hem-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .proc-hub-hero__art img { animation: none; }
}

/* The conditions on a tile - what a visitor recognizes before they know the
   procedure's name. Top-aligned under the summary, the way the patient and
   practice profile cards stack their chips (2026-10-07; they were pinned to
   the bottom of the card). Spare card height falls below them. */
.proc-tile__conditions {
  margin-top: var(--hem-space-4);
  padding-top: 0;
  align-self: start;
}
/* The profile-card chip, with one change: a procedure card is narrower than
   some condition names, so a long chip wraps inside its pill rather than
   being clipped. */
.proc-tile__conditions .chip { white-space: normal; flex: 0 1 auto; max-width: 100%; }

/* One card height across every category row - procedures.js measures the
   tallest card and sets --proc-tile-h. Without the script the property is
   unset and each row simply evens out within itself, as before. */
.proc-carousel .proc-tile { min-height: var(--proc-tile-h, 0); }
.proc-measuring .proc-carousel .carousel__track { align-items: start; }
.proc-measuring .proc-carousel .proc-tile { height: auto; min-height: 0; }

/* --------------------------------------------------------------------------
   Audience toggle (hub) — procedures.js sets body[data-audience]

   Nothing chosen: both links on every card, as built. One side chosen: the
   other side's link goes, and the remaining one takes the whole foot of the
   card rather than half of it.
   -------------------------------------------------------------------------- */
body[data-audience="patient"]  .proc-tile__audience--practice,
body[data-audience="practice"] .proc-tile__audience--patient { display: none; }
body[data-audience] .proc-tile__audiences { grid-template-columns: 1fr; }
body[data-audience] .proc-tile__audience + .proc-tile__audience { border-left: 0; }

/* Card headline per audience. Built with both: the patient page's condition
   headline, and the procedure name. Cards lead with the condition - what a
   patient recognizes - unless "I'm a Practice" is chosen: a practice
   manager scans for the procedure they offer, so then the name leads. */
.proc-tile__title { display: block; }
.proc-tile__title--default { display: none; }
body[data-audience="practice"] .proc-tile__title--patient { display: none; }
body[data-audience="practice"] .proc-tile__title--default { display: block; }

/* --------------------------------------------------------------------------
   Practice pages — where patients come from, and the profile checklist
   -------------------------------------------------------------------------- */
.proc-referrals {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hem-space-6);
  margin-top: calc(var(--hem-unit) * 2);
}
@media (min-width: 760px) { .proc-referrals { grid-template-columns: 1fr 1fr; gap: var(--hem-space-8); } }
.proc-referrals__item { border-top: 1px solid var(--hem-line); padding-top: var(--hem-space-4); }
.proc-referrals__item h3 { margin-bottom: var(--hem-space-3); }
.proc-referrals__item .t-body { max-width: none; }

/* The profile checklist: the portal card's check, a bold item, one line on
   what to write. Replaces the bare chip row, which named things without
   saying what a patient needs to read about them. */
.proc-checklist {
  list-style: none;
  margin: var(--hem-lede) 0 0;
  padding: 0;
  display: grid;
  gap: var(--hem-space-3);
}
.proc-checklist li {
  display: flex;
  gap: var(--hem-space-3);
  align-items: flex-start;
  font-size: var(--hem-size-body);
  line-height: var(--hem-lh-body);
  color: var(--hem-text);
  max-width: 60ch;
}
.proc-checklist svg { width: 18px; height: 18px; flex: none; margin-top: 5px; stroke: var(--hem-teal); }
.proc-checklist strong { font-weight: 700; color: var(--hem-text-heading); }

/* Where the audience toggle scrolls to: the first category heading, clear of
   the floating header. */
.proc-group { scroll-margin-top: calc(var(--hem-unit) * 6); }

/* --------------------------------------------------------------------------
   Heading scale for the procedures section (2026-10-07)

   The shared .t-h1 section heading reaches 79px, which is right on the
   landing page under a much larger display headline. Here the H1 is held
   smaller (procedure names run long), so the section H2s - What to Know,
   What Patients Ask, Start Matching - came out LARGER than the page's own
   H1. Capped so the order always reads, largest first:

     H1 page headline      72-76px
     H2 section heading    up to 56px
     H2 hub category       36px
     H3 section card       30px  (steps, FAQs, portal cards)
     H3 procedure card     22px
   -------------------------------------------------------------------------- */
.proc-page h2.t-h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.proc-group h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }

/* --------------------------------------------------------------------------
   Card rows line up line for line (2026-10-07)

   What to Know and Why Practices Join: each card is a
   subgrid of its row, so a title row is as tall as the tallest title in that
   row - two lines reserved only when some card actually needs two - and the
   copy under it starts at the same height across the row. Stacked on a
   phone, each card is its own row and reserves nothing. Procedure cards
   (hub and More to Explore) do this their own way: see below.
   -------------------------------------------------------------------------- */
.proc-know__item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--hem-space-3);
  align-content: start;
}
.proc-know__item h3 { margin-bottom: 0; }



/* Procedure cards: the chips start on the same line in every card. The
   summary is held to four lines and now also RESERVES four, as the title
   reserves three, so status, title, summary and chips each start at the
   same height across a row - and every row on the page. */
.proc-carousel .proc-tile__summary { min-height: calc(1.5em * 4); }

/* Patient pages: the procedure-name label and the condition headline are one
   H1 (2026-10-15, for search), drawn exactly as the separate label and
   headline were. Each part is a block so they still stack. */
.proc-hero__h1 { margin: 0; }
.proc-hero__h1 > span { display: block; }

/* "More About" - the expanded, clinically reviewed sections on a patient
   page (renders only once a procedure is signed off; see drafts.js). */
.proc-more__item { margin-top: calc(var(--hem-unit) * 2); }
.proc-more__item h3 { margin-bottom: var(--hem-space-3); }
.proc-more__item .t-body + .t-body { margin-top: var(--hem-space-3); }
.proc-more__list,
.proc-more__sources ul {
  margin: var(--hem-space-3) 0 0;
  padding-left: 1.25em;
  display: grid;
  gap: var(--hem-space-2);
  font-size: var(--hem-size-body);
  line-height: var(--hem-lh-body);
  color: var(--hem-text);
  max-width: 60ch;
}
.proc-more__sources a { color: var(--hem-teal); }
.proc-more__attribution { margin-top: var(--hem-space-3); max-width: 60ch; }