/* css/page-emergency-care.css : emergency-care.html. Owner: wave C.
   Body composition: hanoverendo-int/03 procedure page + mvendo-int/01 GEO capsule (adapted spec:
   v2-specs/interiors-spec-emergency-care.md). Loaded LAST, after tokens.css + site.css + interior.css.
   Page rules only: every selector is one of this page's own classes inside .sheet-body.
   Pass 1b: hanoverendo's fixed 1060 media column = the chassis well (100%), its 1060:596 ratio kept;
   the capsule is 100% of the well; vertical spacings are the recipes' px. */

/* ------------------------------------------------------------------ media first (1060 x 596 ratio) */
.emer-media { margin-block: 0; box-shadow: var(--shadow-df); border-radius: 0; }
.emer-media img { width: 100%; height: auto; aspect-ratio: 1060 / 596; object-fit: cover; }

/* ------------------------------------------------------------------ call-first capsule (mvendo radius 30) */
.emer-capsule {
  margin: 35px 0 0; padding: 20px 15px; border-radius: 30px;
  background: #fff; box-shadow: var(--shadow-df);
  font: 400 18px/25.2px var(--font-body); color: var(--body-ink); text-align: center;
}

/* links (mvendo-interactive/05: colour change, underline kept) */
.emer-capsule a, .emer-prose a, .emer-link { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.emer-capsule a:hover, .emer-prose a:hover, .emer-link:hover { color: var(--ink); }
/* a phone number never breaks across lines */
.emer-capsule a[href^="tel:"], .emer-prose a[href^="tel:"] { white-space: nowrap; }

/* ------------------------------------------------------------------ centred prose (hanoverendo 20/28) */
.emer-prose { margin: 46px auto 0; max-width: 70ch; font: 400 20px/28px var(--font-body); color: var(--body-ink); text-align: center; }
.emer-prose p { margin: 0 0 20px; }
.emer-prose > :last-child { margin-bottom: 0; }
.emer-h { margin: 40px 0 12px; font: 400 27.424px/1.25 var(--font-display); color: var(--steel-pale); text-wrap: balance; }

/* ------------------------------------------------------------------ proof quote (house verification, E-C3) */
.emer-quote { margin: 48px auto 0; max-width: 70ch; font-size: 20px; text-align: center; }
.emer-quote::before { content: ""; display: block; width: 60px; height: 3px; margin: 0 auto 24px; background: var(--sun); }
.emer-quote__text p { font: 400 20px/28px var(--font-body); color: var(--grey-title); white-space: pre-wrap; }
.emer-quote__stars { margin-top: 16px; display: flex; justify-content: center; gap: 2px; }
.emer-quote__stars svg { width: 20px; height: 20px; fill: var(--g-star-amber); }
.emer-quote__attrib { margin-top: 10px; font: 500 18px/24px var(--font-display); color: var(--grey-title); }
.emer-quote__context {
  margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/24px var(--font-body); color: var(--grey-text);
}
.emer-quote__more { margin-top: 2px; }
.emer-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 16px/24px var(--font-body); }

/* ------------------------------------------------------------------ phone system (<= 600) */
/* hanoverendo-mobile/06: body 20 -> 18 (lh ratio 1.4); media full-bleed (.bleed) without its shadow;
   sub-heads follow the chassis 24 cut; spacings x0.6 */
@media (max-width: 600px) {
  .emer-media { box-shadow: none; }
  .emer-capsule { margin-top: 21px; }
  .emer-prose { margin-top: 28px; font-size: 18px; line-height: 25.2px; }
  .emer-prose p { margin-bottom: 18px; }
  .emer-h { margin-top: 24px; font-size: 24px; }
  .emer-quote { margin-top: 29px; }
  .emer-quote::before { margin-bottom: 14px; }
  .emer-quote__text p { font-size: 18px; line-height: 25.2px; }
}