/* ==========================================================================
   EMERGENCY CARE page (emergency-care.html)
   Page-specific styles. Requires ../styles.css (global tokens & components).
   ========================================================================== */

/* ---------- Small utility used only on this page ---------- */
.mt-6 { margin-top: 1.5rem; }

/* ---------- Hero actions row ---------- */
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- "What we treat" cards ---------- */
.emergency-card { border-top: 4px solid var(--emergency); }
.emergency-card > .icon { width: 2.25rem; height: 2.25rem; color: var(--emergency); }
.emergency-card h3 { margin-top: 1.25rem; font-size: 1.5rem; }
.emergency-card p { margin-top: 0.75rem; line-height: 1.75; color: var(--muted-foreground); }

/* ---------- "What to expect" steps ---------- */
.emergency-step h3 { font-size: 1.125rem; color: var(--primary); }
.emergency-step p { margin-top: 0.75rem; line-height: 1.75; color: var(--muted-foreground); }

/* ---------- Placeholder image slots (wellness band + map) ---------- */
.img-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 16rem; padding: 2rem;
  border: 2px dashed color-mix(in oklab, var(--foreground) 20%, transparent);
  border-radius: var(--radius-photo);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
.wellness-band .img-slot {
  border-color: color-mix(in oklab, var(--wellness-foreground) 35%, transparent);
  background: color-mix(in oklab, var(--wellness) 85%, black 6%);
  color: color-mix(in oklab, var(--wellness-foreground) 90%, transparent);
}

/* ---------- Wellness reassurance band ---------- */
.wellness-split { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 64rem) { .wellness-split { grid-template-columns: 1.1fr 0.9fr; text-align: left; } }
.wellness-split h2 { font-size: 1.875rem; }
.wellness-split p { margin-top: 1rem; line-height: 1.75; color: color-mix(in oklab, var(--wellness-foreground) 90%, transparent); }
.wellness-split p:first-of-type { margin-top: 1.25rem; }

/* ---------- Hours strip ---------- */
.hours-strip { padding-block: 3.5rem; background: var(--soft); }
.hours-strip .section-shell { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 64rem) { .hours-strip .section-shell { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.hours-strip .left { display: flex; align-items: flex-start; gap: 1rem; }
.hours-strip .left > .icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; margin-top: 0.25rem; color: var(--primary); }
.hours-strip h2 { font-size: 1.5rem; }
.hours-list { margin-top: 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 0.9375rem; }
.hours-list dt { font-weight: 600; color: var(--foreground); }
.hours-list dd { color: var(--muted-foreground); }
.hours-emergency {
  border-radius: var(--radius-card); border: 1px solid var(--border);
  background: var(--card); padding: 1.75rem;
}
.hours-emergency h3 { font-size: 1.0625rem; }
.hours-emergency p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted-foreground); }
.hours-phones { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* ---------- Find us / map ---------- */
.map-address { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.map-address p { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; color: var(--muted-foreground); }
.map-address .icon { flex-shrink: 0; margin-top: 0.15rem; color: var(--primary); }
.map-address a { color: var(--primary); font-weight: 600; }
.map-address a:hover { text-decoration: underline; }
.map-section .btn { margin-top: 1.75rem; }
.map-slot { min-height: 20rem; }
.map-embed {
  width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-photo); border: 1px solid var(--border);
}
.map-embed iframe { width: 100%; height: 100%; }

.big-line { padding-block: 3.5rem; text-align: center; font-size: 1.5rem; font-weight: 600; }

/* ---------- Final contact band ---------- */
.contact-band { padding-block: 3.5rem; }
.contact-band .section-shell { display: grid; gap: 2rem; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 64rem) { .contact-band .section-shell { grid-template-columns: 1.1fr 1fr; text-align: left; } }
.contact-band h2 { font-size: 1.75rem; }
.contact-band p { margin-top: 0.5rem; color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
@media (min-width: 64rem) { .pill-row { justify-content: flex-start; } }
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 35%, transparent);
  font-size: 0.8125rem; font-weight: 600;
}
.pill:hover { background: color-mix(in oklab, var(--primary-foreground) 12%, transparent); }
.pill .icon { width: 0.875rem; height: 0.875rem; }
.contact-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
@media (min-width: 64rem) { .contact-actions { justify-content: flex-start; } }
.btn-ghost-light {
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 45%, transparent);
  background: transparent; color: var(--primary-foreground);
}
.btn-ghost-light:hover { background: color-mix(in oklab, var(--primary-foreground) 12%, transparent); }