/*
 * FHMC — dual-facility components.
 *
 * Loaded last in the cascade (tokens -> base -> layout -> components -> brand).
 *
 * WHY THIS FILE IS NOT NEAR-EMPTY
 *
 * FHMC is the only site in the family that is two facilities at one address:
 * a 24/7 freestanding Emergency Room and a primary care Medical Clinic. That
 * produces components no sister site has any use for — a side-by-side service
 * router, an emergency symptom grid, a two-portal chooser, a milestone
 * timeline. Putting them in core would ship an "ER or Clinic?" comparison to
 * Mercy Grace, which is a private practice.
 *
 * Per DESIGN-SYSTEM.md §150, each block below says why it cannot live in core.
 * Every value is a --ih-* token: no hex, no px font sizes, nothing that lets
 * this site drift from its siblings.
 *
 * If a second site ever becomes dual-facility, the `compare` and `symptom`
 * blocks are the ones to promote into core first.
 */

/* =====================================================
   1. PAGE HERO — interior pages
   Core has `.hero` for the homepage only. Reason to keep local: it is a
   thinner variant used by twelve local templates; promoting it to core
   would be welcome if the siblings want interior heroes too.
   ===================================================== */
.page-hero {
  background:
    radial-gradient(44rem 22rem at 110% -30%, var(--ih-brand-tint) 0%, transparent 55%),
    var(--ih-surface-alt);
  padding-block: var(--ih-space-7);
}
.page-hero h1 { max-width: 50rem; }
.page-hero .page-lede {
  font-size: var(--ih-text-lg);
  color: var(--ih-text-muted);
  max-width: 42rem;
  margin-block: var(--ih-space-4) 0;
}
.kicker {
  display: inline-block;
  font-size: var(--ih-text-sm);
  font-weight: var(--ih-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ih-brand);
  margin-block-end: var(--ih-space-3);
}
.section-head { max-width: 44rem; margin-block-end: var(--ih-space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p {
  color: var(--ih-text-muted);
  font-size: var(--ih-text-lg);
  margin-block-start: var(--ih-space-4);
}

/* =====================================================
   PROMOTED TO CORE 1.5.0 — formerly sections 2 and 4 here.
   The service router (.compare*) and the emergency symptom grid
   (.symptom*) now live in instinctive-core/assets/css/components.css.
   Do not re-add them here. Local markup uses core's --urgent / --routine
   modifiers rather than the old --er / --clinic names.

   CORRECTION, 2026-09-12. This block used to say the two components "are
   rendered by ih_compare() / ih_symptom_grid()". THAT WAS NOT TRUE WHEN
   WRITTEN. Neither function had a call site anywhere in this theme — the
   only grep hits were their definitions and this comment. The templates
   hand-wrote the markup with core's class names, and core's stylesheet
   styled it, which is why the pages looked right.

   So the comment described the intended architecture rather than the
   actual one, which is the same defect class the claim gate exists for:
   documentation asserting a mechanism nobody wired. It survived because
   the pages look right, and they look right for a reason the comment got
   wrong.

   SAME DAY, LATER: .symptom* is now genuinely rendered by
   ih_symptom_grid(). The ER template's twelve-item list moved into the
   theme's config as `symptoms` — a key core already read and nothing set
   — and the template calls the component. So for that half the original
   comment is now accurate, having been wrong when written. Recorded this
   way round on purpose: "it became true later" is a different fact from
   "it was true all along", and only one of them is a reason to trust the
   next comment.

   .compare* IS STILL HAND-ROLLED, and deliberately. The one page that
   uses it compares an ER visit with a Clinic visit on BILLING RATES and
   on TWO PORTALS. ih_compare() renders from facilities[].compare, which
   is site-wide, so feeding it that copy would put billing framing into
   any future homepage call — and the component wants the service
   comparison with billing as its `facts` row. That means new
   patient-facing copy about when to use an ER, which needs a clinician,
   not a refactor.

   What the remaining duplication costs is drift: if core renames a
   modifier, its own CSS follows and this hand-rolled copy silently stops
   matching. tools/check-theme.mjs now fails on exactly that.

   Also dormant and worth knowing: ih_provider_role(), which reads
   _ihp_role and _ihp_credentials from the record so a template "cannot
   describe a nurse practitioner as anything other than what the record
   says they are". template-leadership.php hand-reads the same two meta
   keys. Core's version is the safer shape; ours predates it.
   ===================================================== */

/* =====================================================
   3. REMOVED 2026-09-13 — the dual-path ER/Clinic cards

   Was .path-cards / .path-card / .path-card--er / .path-go / .path-tag:
   38 lines styling a hero-level "ER or Clinic?" choice.

   NO TEMPLATE EVER USED ANY OF THE FIVE. Measured across both themes, all
   three plugins, the mu-plugin and the static preview — 47 consumer files,
   zero references, and no dynamically composed class name anywhere in the
   build that could produce them.

   Superseded rather than abandoned: core's front-page.php renders the same
   ER-or-Clinic choice from ih_site('pillars') as .card elements, which this
   theme populates. The job is done, by core, with core's component — which
   is what the child-theme rule wants. What was left behind was the CSS for
   the local version.

   The old header claimed "Same reason as §2", i.e. that this was a live
   FHMC-only component. It was not. A comment asserting a dead block is
   load-bearing is the same defect this file already carries a correction
   for, one section up.
   ===================================================== */

/* =====================================================
   5. NUMBERED STEPS — "what to expect in the ER"
   ===================================================== */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ih-space-5); counter-reset: fhmc-step; }
@media (min-width: 50rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: fhmc-step; display: flex; flex-direction: column; gap: var(--ih-space-2); }
.steps li::before {
  content: counter(fhmc-step);
  width: var(--ih-touch); height: var(--ih-touch);
  display: grid; place-items: center;
  border-radius: var(--ih-radius-pill);
  background: var(--ih-brand);
  color: var(--ih-white);
  font-weight: var(--ih-weight-bold);
  font-size: var(--ih-text-sm);
}
.steps strong { font-size: var(--ih-text-lg); }
.steps p { margin: 0; font-size: var(--ih-text-sm); color: var(--ih-text-muted); }

/* =====================================================
   6. CHECKLIST
   ===================================================== */
.checklist { list-style: none; padding: 0; display: grid; gap: var(--ih-space-3); }
.checklist li { display: flex; gap: var(--ih-space-3); align-items: flex-start; }
.checklist .check {
  flex: none;
  width: 1.5em; height: 1.5em;
  border-radius: var(--ih-radius-pill);
  background: var(--ih-brand-tint);
  color: var(--ih-brand-deep);
  display: grid; place-items: center;
  margin-top: 0.15em;
}
.checklist .check svg { width: 0.85em; height: 0.85em; }
.checklist strong { display: block; }
.checklist p { margin: 0; font-size: var(--ih-text-sm); color: var(--ih-text-muted); }

/* =====================================================
   7. FAQ ACCORDION — native <details>, no JS required
   Cannot live in core yet: paired with FAQPage structured data emitted by
   the local faq template part. Good core candidate once siblings want FAQs.
   ===================================================== */
.faq-list { display: grid; gap: var(--ih-space-3); }
.faq-item {
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-radius-sm);
  background: var(--ih-surface);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ih-space-4);
  font-weight: var(--ih-weight-bold);
  color: var(--ih-ink);
  padding: var(--ih-space-4) var(--ih-space-5);
  min-height: var(--ih-touch);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-weight: var(--ih-weight-normal); color: var(--ih-brand); flex: none; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item[open] summary { border-block-end: 1px solid var(--ih-grey-200); }
.faq-item .faq-answer { padding: var(--ih-space-4) var(--ih-space-5); color: var(--ih-text-muted); }
.faq-item .faq-answer > :last-child { margin-block-end: 0; }

/* =====================================================
   8. TIMELINE — "Our Story"
   Destination for 26 legacy news posts that 301 here.
   ===================================================== */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0.6em 0;
  inset-inline-start: 0.55em;
  width: 2px;
  background: linear-gradient(var(--ih-brand-tint), var(--ih-grey-300));
}
.timeline > li { position: relative; padding-inline-start: var(--ih-space-6); padding-block-end: var(--ih-space-6); }
.timeline > li:last-child { padding-block-end: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 1.15em; height: 1.15em;
  border-radius: var(--ih-radius-pill);
  background: var(--ih-surface);
  border: 3px solid var(--ih-brand);
}
.timeline .tl-milestone::before { background: var(--ih-brand); }
.timeline .tl-date {
  display: block;
  font-size: var(--ih-text-sm);
  font-weight: var(--ih-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ih-brand);
  margin-block-end: var(--ih-space-1);
}
.timeline h3 { font-size: var(--ih-text-lg); margin-block-end: var(--ih-space-2); }
.timeline p { font-size: var(--ih-text-sm); color: var(--ih-text-muted); margin: 0; }

/* =====================================================
   9. CONTACT LAYOUT & EMBEDS
   ===================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ih-space-7); align-items: start; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contact-block { display: grid; gap: var(--ih-space-5); }
.contact-item { display: flex; gap: var(--ih-space-4); align-items: flex-start; }
/*
 * A flex child is floored at min-content, and the min-content here is an
 * EMAIL ADDRESS — one unbreakable token. At 200% text that held the column
 * open past the viewport and the paragraph beneath it inherited the width.
 * min-width: 0 lets the column narrow; overflow-wrap: anywhere is what gives
 * it somewhere to break, and only `anywhere` counts the broken form toward
 * min-content.
 */
.contact-item > * { min-width: 0; }
.contact-item a { overflow-wrap: anywhere; }
.contact-item strong { display: block; font-size: var(--ih-text-sm); }
.contact-item p { margin: 0; font-size: var(--ih-text-sm); color: var(--ih-text-muted); }
.contact-item a { font-weight: var(--ih-weight-medium); }
.info-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ih-space-6); }
@media (min-width: 52rem) { .info-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.embed-frame {
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-radius);
  overflow: hidden;
  background: var(--ih-surface-sunk);
  box-shadow: var(--ih-shadow-sm);
}
.embed-frame iframe { display: block; width: 100%; border: 0; }
.map-embed iframe { height: clamp(18rem, 40vw, 26rem); }
.booking-embed iframe { height: clamp(40rem, 80vh, 56rem); }

/* =====================================================
   10. CARD ICON & LINK — used by local templates
   ===================================================== */
/*
 * 🔴 `--ih-radius-chip`, not `--ih-radius-sm`. This is an icon chip, and the
 * handoff pins them: "icon chips: 40–44px square, 11–12px radius, #FBEAEC
 * fill". At 4px a 44px square reads as a rounded input; core added the 12px
 * token for exactly this and core's own `.icon-badge` already uses it.
 *
 * This class is a near-duplicate of that component — nine FHMC templates use
 * `.card-icon` and none use `.icon-badge` — which is how the two drifted
 * apart without anything noticing. Worth collapsing into core's, but that is
 * a template change across nine files and not this one; matching the token
 * closes the visible gap now.
 */
.card-icon {
  width: var(--ih-touch); height: var(--ih-touch);
  border-radius: var(--ih-radius-chip);
  background: var(--ih-brand-tint);
  color: var(--ih-brand);
  display: grid;
  place-items: center;
  margin-block-end: var(--ih-space-2);
}
.card-icon svg { width: 1.5em; height: 1.5em; }

/*
 * The emergency notice's icon, which rendered at 1068 x 1068 on staging.
 *
 * base.css gives `svg` a fill and no dimensions, so an SVG with no sized
 * wrapper expands to its container. Six of our templates dropped a bare
 * `ih_icon( 'ambulance' )` straight inside `.emergency-notice` — core never
 * does, both of its own usages hold text and a CTA only, so core's CSS has
 * no reason to size one there. Our markup, our bug.
 *
 * A NEW CLASS ON OUR OWN ELEMENT rather than `.emergency-notice svg` in
 * brand.css: the second would be a child restyling a core component, which
 * DESIGN-SYSTEM rule 4 forbids. This styles a span we put there.
 *
 * brand-deep on brand-tint, not brand. That pairing is 5.12:1; --ih-brand on
 * the same tint is 4.45 and fails AA — see docs/accessibility.md, where it is
 * recorded as the failing combination the palette contains and habit keeps
 * off the page.
 */
.notice-icon {
  display: inline-grid;
  place-items: center;
  width: var(--ih-touch);
  height: var(--ih-touch);
  border-radius: var(--ih-radius-sm);
  background: var(--ih-brand-tint);
  color: var(--ih-brand-deep);
  margin-block-end: var(--ih-space-2);
}
.notice-icon svg { width: 1.5em; height: 1.5em; }

/*
 * CAPTIONED PHOTO GRID — "what is in the building".
 *
 * Asked for by the design handoff for the imaging shots. FHMC-only for the
 * reason the top of this file gives: the claim it supports is that CT, X-ray
 * and a laboratory are in THIS building, which is the dual-facility freestanding
 * ER's argument and no sister site's.
 *
 * A list, not a row of divs, because it is an enumeration of three things and
 * a screen reader should say so.
 *
 * Caption sits under the image rather than over it: text over a photograph
 * has no guaranteed contrast, and the palette is about to change under this
 * component when the Modern tokens land. Every value here is a token, so it
 * re-skins with them.
 */
/*
 * 🔴 `minmax(min(13rem, 100%), ...)`, NOT `minmax(13rem, ...)`.
 *
 * A bare rem minimum overflows the viewport as soon as the text scales. At
 * 200% text 13rem is 416px, and in a 320px window this grid pushed the page
 * 128px wide — measured on `/emergency-room/`, where the widest offender was
 * the "CT scanner — in this building" card reaching 448px.
 *
 * This is core's own documented pattern, and core's `.grid` carries the note
 * explaining it: "min() keeps the single column from overflowing on narrow
 * viewports, which a bare minmax(280px, 1fr) does". I wrote this grid without
 * it. WCAG 1.4.10 asks for no horizontal scrolling at 320px, and a caption
 * grid is not worth a scrollbar on every other element of the page.
 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--ih-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Card radius and elevation from the handoff ("cards 16–24px radius", "card
 * shadow 0 6px 18px rgba(32,30,29,0.05)"), matching core's `.card`. This was
 * on `--ih-radius` (8px) with no shadow, so a captioned photograph read as a
 * bordered box beside cards that read as cards.
 */
.photo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-radius-lg);
  box-shadow: var(--ih-shadow);
  overflow: hidden;
  background: var(--ih-surface);
}
.photo-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.photo-card__caption {
  padding: var(--ih-space-2) var(--ih-space-3);
  font-size: var(--ih-text-sm);
  font-weight: var(--ih-weight-bold);
  color: var(--ih-text-muted);
}

/*
 * An odd last card spans the row instead of leaving a hole beside it.
 *
 * Three photographs in a two-column track left the third stranded with an
 * empty cell to its right, which reads as a missing fourth image rather than
 * a deliberate three. Seen on staging, not predicted.
 *
 * `:last-child:nth-child(odd)` only fires when the count is odd, so a fourth
 * photograph added later falls into a clean 2x2 with no rule to remove.
 */
.photo-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/*
 * HERO MEDIA — the entrance photograph beside the headline.
 *
 * The design handoff: "the two entrance sets let you give the ER and the
 * clinic each their own hero." Both entrance photographs are 930x1400
 * PORTRAIT, including the one named `-wide`, so they cannot go in the
 * landscape 16/9 slots used elsewhere on these pages — a portrait image in
 * one crops to a horizontal band that loses the door, which is the whole
 * subject.
 *
 * A two-column hero solves it without cropping anything: the text keeps the
 * reading column it already had, and the photograph occupies a portrait
 * frame beside it at its own aspect ratio.
 *
 * Collapses to one column below 52rem and the image is HIDDEN there rather
 * than stacked. On a phone the hero's job is the headline and the two
 * buttons — a tall portrait photograph between them and the call button
 * would push the thing a worried person came for below the fold.
 */
/*
 * 🔴 `minmax(0, 1fr)`, NOT the implicit `auto` track. This is the grid
 * equivalent of `min-width: 0` on a flex item, and leaving it out was mine.
 *
 * A grid track sized `auto` — which is what a single-column grid gets by
 * default — is floored at its content's MIN-CONTENT width and will grow past
 * its own container to honour it. Measured at 200% text in a 320px viewport
 * on /primary-care/appointments/: this container computed 305px wide with a
 * grid track of **429px inside it**, so everything in the hero overhung the
 * page by 129px.
 *
 * It also defeated the fix one layer down. `.btn` had already been given
 * `max-width: 100%` — but 100% of a 429px track is 429px, so the button
 * dutifully obeyed a constraint that was itself too wide. A max-width is
 * only as good as the box it refers to, which is why this had to be fixed
 * at the track rather than at the button.
 */
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ih-space-6);
  align-items: center;
}
.page-hero__media { display: none; }

@media (min-width: 52rem) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .page-hero__media { display: block; }
  .page-hero__media img {
    width: 100%;
    height: auto;
    border-radius: var(--ih-radius-lg);
    display: block;
  }
}
.card-link { font-weight: var(--ih-weight-bold); font-size: var(--ih-text-sm); color: var(--ih-brand-deep); margin-block-start: auto; }
.btn-icon { display: inline-flex; }
.btn-icon svg { width: 1.1em; height: 1.1em; }
.card__meta-cat {
  color: var(--ih-brand);
  font-weight: var(--ih-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* =====================================================
   11. TEAM GRID
   Note: ih-providers provides the Provider CPT and core provides
   `.provider-card`. This grid is only the layout wrapper used by the local
   leadership template; migrate to core's once siblings publish teams.
   ===================================================== */
.team-grid { display: grid; gap: var(--ih-space-5); }
@media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team-card { text-align: center; align-items: center; }
.team-card img, .team-card .media-placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ih-radius-sm); }
.team-card .team-role {
  font-size: var(--ih-text-sm);
  font-weight: var(--ih-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ih-brand);
}

/* =====================================================
   12. PLACEHOLDERS & EDITOR NOTES
   Both are pre-launch scaffolding. The editor note is deliberately loud:
   it marks copy that must be confirmed by staff before publishing.
   ===================================================== */
.media-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ih-surface-alt), var(--ih-brand-tint));
  color: var(--ih-brand-deep);
  font-weight: var(--ih-weight-bold);
  font-size: var(--ih-text-sm);
  text-align: center;
  padding: var(--ih-space-5);
  border-radius: var(--ih-radius);
  aspect-ratio: 4 / 3;
}
.editor-note {
  border: 1px dashed var(--ih-brand);
  background: var(--ih-surface-alt);
  border-radius: var(--ih-radius-sm);
  padding: var(--ih-space-4);
  font-size: var(--ih-text-sm);
  color: var(--ih-brand-deep);
}
.editor-note strong { color: var(--ih-brand-deep); }

/* =====================================================
   13. ARTICLE BODY & FORMS — local templates
   ===================================================== */
.article { max-width: var(--ih-container-narrow); margin-inline: auto; }
.article > * + * { margin-block-start: var(--ih-space-4); }
.article h2 { margin-block-start: var(--ih-space-7); }
.article h3 { margin-block-start: var(--ih-space-6); }
.article img { border-radius: var(--ih-radius); }
/* The form markup moved to the ih-forms plugin in core 1.5.0, and its layout
   CSS did not go with it. .form-grid, .form-grid--2, .form-field,
   .form-field--full and .fhmc-hp styled the LOCAL form that promotion
   deleted — 27 lines outliving their markup. ih-forms ships its own
   ih-form__* classes and a honeypot, and reuses only .form-note and
   .form-notice* from here, which is why those two stay.

   PROMOTE-TO-CORE.md recorded that promotion as "96 lines of CSS and an
   entire form implementation deleted". The count was short: these survived,
   invisibly, because nothing checks the direction "is a styled class ever
   used". */
.form-note { font-size: var(--ih-text-sm); color: var(--ih-text-muted); }
.form-notice { border-radius: var(--ih-radius-sm); padding: var(--ih-space-4); font-size: var(--ih-text-sm); font-weight: var(--ih-weight-medium); }
.form-notice--ok { background: var(--ih-surface-alt); color: var(--ih-ink); border: 1px solid var(--ih-border); }
.form-notice--error { background: var(--ih-brand-tint); color: var(--ih-brand-deep); border: 1px solid var(--ih-brand); }

/* =====================================================
   14. AD LANDING PAGE — strip nav so there is one decision
   Local because only FHMC runs paid acquisition today.
   ===================================================== */
.lp-page .primary-nav,
.lp-page .nav-toggle,
.lp-page .utility-bar__inner .phone-list,
.lp-page .site-footer nav,
.lp-page .social-links { display: none !important; }
.lp-page .site-header { position: static; }
.lp-hero {
  background:
    radial-gradient(46rem 24rem at 108% -20%, var(--ih-brand-tint) 0%, transparent 58%),
    var(--ih-surface);
  padding-block: var(--ih-space-7);
}
.lp-hero .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ih-space-6); align-items: center; }
@media (min-width: 58rem) { .lp-hero .container { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.lp-trust { display: flex; flex-wrap: wrap; gap: var(--ih-space-4); list-style: none; padding: 0; margin: var(--ih-space-5) 0 0; }
.lp-trust li { display: flex; align-items: center; gap: var(--ih-space-2); font-size: var(--ih-text-sm); font-weight: var(--ih-weight-medium); }
.lp-trust svg { width: 1.1em; height: 1.1em; color: var(--ih-brand); }

/*
 * Landing-page media, for both branches of the featured-image conditional.
 *
 * Replaces three inline declarations that were repeated across the two
 * branches — the same consolidation done to 33 others earlier today, and the
 * reason check-theme carries an inline-style advisory: an inline declaration
 * cannot be overridden by the stylesheet.
 *
 * 16/9 with cover, so the 3:2 facility photography crops predictably rather
 * than stretching.
 */
.lp-media {
  margin-top: var(--ih-space-6);
  border-radius: var(--ih-radius);
  overflow: hidden;
}
.lp-media img,
.media-placeholder.lp-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.lp-form-card {
  background: var(--ih-surface);
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-radius);
  box-shadow: var(--ih-shadow);
  padding: var(--ih-space-6);
}
.lp-form-card h2 { font-size: var(--ih-text-xl); margin-block-end: var(--ih-space-2); }
.lp-form-card > p { font-size: var(--ih-text-sm); color: var(--ih-text-muted); margin-block-end: var(--ih-space-5); }

/* =====================================================
   SECTION SPACING MODIFIERS — FHMC-only additions
   Core has .section (space-8) and .section--tight (space-6). It has no
   modifier for collapsing the TOP padding, which 27 templates were doing
   with an inline style attribute instead: 21 copies of
   `style="padding-block-start:0"` and 6 of `padding-block-start: space-4`.
   An inline declaration beats every stylesheet rule short of !important, so
   it cannot be overridden or themed, and check-css.mjs cannot see it.
   Named here so the same rule exists once.
   ===================================================== */
.section--flush-top {
	padding-block-start: 0;
}

.section--flush-top-sm {
	padding-block-start: var(--ih-space-4);
}

/* =====================================================
   14. THE NO SURPRISES ACT DIALOG
   Homepage only, once per session. Isaac was explicit that the old site's
   NSA popup must survive the rebuild, with more compassionate messaging.

   Built on the native <dialog>, so the browser supplies the backdrop, the
   focus handling, Escape-to-close and the inert background. Nothing here
   restyles a core component or introduces a token — every value below is an
   --ih-* variable, per the child theme's own rule.

   The urgent line is FIRST and largest on purpose. A modal on an emergency
   room's homepage must never come between a frightened person and the phone
   number, so the number is inside it, above the reason for the dialog.
   ===================================================== */
.notice-dialog {
  max-width: 34rem;
  width: calc(100% - var(--ih-space-6));
  padding: 0;
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-radius);
  background: var(--ih-surface);
  color: var(--ih-text);
  box-shadow: var(--ih-shadow);
}
.notice-dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
}
.notice-dialog__body {
  padding: var(--ih-space-6);
}
.notice-dialog__body h2 {
  margin-top: var(--ih-space-2);
}
.notice-dialog__body p {
  margin: 0 0 var(--ih-space-4);
}

/* The emergency line: loudest thing in the box. */
.notice-dialog__urgent {
  font-weight: var(--ih-weight-bold);
  color: var(--ih-brand-deep);
  background: var(--ih-brand-tint);
  margin: 0 0 var(--ih-space-4);
  padding: var(--ih-space-3) var(--ih-space-4);
  border-radius: var(--ih-radius-sm);
}
.notice-dialog__urgent a {
  color: var(--ih-brand);
  white-space: nowrap;
}

.notice-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ih-space-3);
  margin-top: var(--ih-space-5);
}