/* Hospital directory only. Shared renderer still owns content and filtering.
   !important declarations override its legacy inline presentation, never display. */
.hospitals-page { background: var(--color-platinum); }
.hospitals-page main { color: var(--color-text-dark); }
.hospitals-page main ::selection { background: var(--color-gold); color: var(--color-teal-dark); }
.hospitals-page main :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--color-teal-primary);
  outline-offset: 4px;
}
.hospitals-page .hospitals-hero {
  padding-block: calc(var(--header-height) + 40px) 32px;
  min-height: 0;
  text-align: start;
  background: var(--color-platinum);
  color: var(--color-teal-dark);
  border-bottom: 1px solid var(--color-slate-light);
}
.hospitals-page .hospitals-hero h1 {
  max-inline-size: 24ch;
  margin: 0 0 16px;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.15;
  color: var(--color-teal-dark);
  text-wrap: balance;
}
.hospitals-page .hospitals-hero p {
  margin: 0;
  max-inline-size: 65ch;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
}
.hospitals-page .hospitals-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }
.hospitals-page .hospitals-hero-actions .btn { min-block-size: 48px; white-space: normal; text-align: center; }
.hospitals-page .hospitals-browse { border: 1px solid var(--color-teal-primary); color: var(--color-teal-primary); background: transparent; }
.hospitals-page .hospitals-browse:hover { background: var(--color-white); }
.hospitals-page .hospitals-coverage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 48px; padding-block: 32px; }
.hospitals-page .hospitals-regions { min-inline-size: 0; }
.hospitals-page .hospitals-regions h2 { margin: 0 0 16px; font-size: 1.625rem; color: var(--color-teal-dark); }
.hospitals-page .hospitals-region-links { display: grid; }
.hospitals-page .hospitals-region-links a { display: flex; align-items: center; gap: 12px; padding-block: 14px; min-block-size: 52px; border-bottom: 1px solid var(--color-slate-light); color: var(--color-teal-primary); text-decoration: none; font-weight: 500; }
.hospitals-page .hospitals-region-links a > span:first-child { flex: 1; }
.hospitals-page .hospitals-region-links a:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.hospitals-page .hospitals-region-links i { display: none; }
.hospitals-page .hospitals-region-count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-size: .875rem; }
.hospitals-page .hospitals-map-visual { min-inline-size: 0; }
.hospitals-page .hospitals-map-visual > ul { display: none !important; }
.hospitals-page .china-map-animated-card { padding: 0; margin: 0; height: 264px; min-height: 0; background: var(--color-teal-dark); border: 0; border-radius: var(--radius-md); box-shadow: none; overflow: hidden; }
.hospitals-page .china-map-svg { display: block; width: 100%; height: 100%; }
.hospitals-page .china-map-svg .map-land { fill: var(--color-teal-primary); stroke: var(--color-teal-light); }
.hospitals-page .map-pulse-ring, .hospitals-page .map-flow-arc, .hospitals-page .china-map-svg circle:has(animateMotion) { display: none; }
.hospitals-page .hospitals-directory { padding: 16px 0 64px; background: var(--color-platinum); }
.hospitals-page :is(.hospitals-directory, .hospitals-region, .hospital-card) { scroll-margin-block-start: 104px; }
.hospitals-page .hosp-cat-filter { margin-block-end: 32px; padding: 24px 0; border-block: 1px solid var(--color-slate-light); text-align: start; background: transparent; }
.hospitals-page .hosp-cat-filter-label { margin: 0 0 16px; font-size: 1.375rem; color: var(--color-teal-dark); text-transform: none; letter-spacing: normal; }
.hospitals-page .hosp-cat-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.hospitals-page .hosp-cat-chip { min-block-size: 44px; padding: 10px 16px; white-space: normal; border: 1px solid var(--color-slate-light); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-teal-primary); font-size: .9375rem; }
.hospitals-page .hosp-cat-chip:hover { border-color: var(--color-teal-primary); }
.hospitals-page .hosp-cat-chip.is-active { background: var(--color-teal-primary); border-color: var(--color-teal-primary); color: var(--color-white); }
.hospitals-page .hosp-filter-empty { padding: 24px 0 0; color: var(--color-text-muted); }
.hospitals-page .hospitals-region { margin-block-end: 40px; }
.hospitals-page .hospitals-region > h3 { color: var(--color-teal-dark) !important; padding: 0 !important; border: 0 !important; margin-block-end: 20px !important; font-size: 1.5rem !important; text-wrap: balance; }
.hospitals-page .hospitals-region > .pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
.hospitals-page .hospital-card { min-inline-size: 0; background: var(--color-white) !important; border: 1px solid var(--color-slate-light) !important; border-radius: var(--radius-md) !important; padding: 24px !important; text-align: start !important; box-shadow: none; }
.hospitals-page .hospital-card:hover { transform: none; box-shadow: none; border-color: var(--color-teal-primary) !important; }
.hospitals-page .hospital-card > div > div:has(> img) { height: 72px !important; width: 120px; margin: 0 0 16px !important; padding: 8px !important; border: 1px solid var(--color-slate-light) !important; border-radius: var(--radius-sm) !important; }
.hospitals-page .hospital-card img { object-fit: contain !important; max-height: 100% !important; max-width: 100% !important; }
.hospitals-page .hospital-card h3 { color: var(--color-teal-dark) !important; font-size: 1.375rem !important; line-height: 1.35; margin-block: 8px 12px !important; text-wrap: balance; }
.hospitals-page .hospital-card p { color: var(--color-text-muted) !important; font-size: .9375rem !important; line-height: 1.65 !important; }
.hospitals-page .hospital-card p:last-child { margin-block-end: 0; }
.hospitals-page .hospital-card strong { color: var(--color-teal-primary); }
.hospitals-page .hospital-card .badge-gold { background: var(--color-platinum); color: var(--color-teal-dark); text-transform: none !important; letter-spacing: normal !important; }
.hospitals-page .hospital-card .hosp-cat-badge { color: var(--color-teal-primary) !important; background: var(--color-platinum) !important; border: 0 !important; margin-inline: 0 !important; }
.hospitals-page[dir="rtl"] .hospitals-region-links i,
html[dir="rtl"] .hospitals-page .hospitals-region-links i { transform: scaleX(-1); }
@media (max-width: 700px) {
  .hospitals-page .hospitals-hero { padding-block: calc(var(--header-height) + 24px) 24px; }
  .hospitals-page .hospitals-coverage { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px; }
  .hospitals-page .hospitals-map-visual { display: none; }
  .hospitals-page .hospitals-directory { padding-block: 0 40px; }
  .hospitals-page .hosp-cat-filter { padding-block: 20px; }
  .hospitals-page .hospitals-region > .pillars-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hospitals-page .hospital-card { padding: 20px !important; }
}