/* ==========================================================================
HOME page (index.html)
Page-specific styles. Requires ../styles.css (global tokens & components).
========================================================================== */
/* ---------- Image placeholders ----------
Swap each .img-slot for a real ![]()
when photos are ready (see comments in index.html).
Then delete this block if nothing else uses it. */
.img-slot {
position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 4 / 3;
padding: 0.875rem; overflow: hidden; border-radius: 0.75rem;
border: 1px dashed color-mix(in oklab, var(--primary) 35%, transparent);
background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--background)), color-mix(in oklab, var(--primary) 4%, var(--soft)));
color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.4;
}
.img-slot.tall { aspect-ratio: 4 / 5; }
.map-slot { min-height: 18rem; align-items: center; justify-content: center; text-align: center; }
.map-embed iframe, .map-slot iframe { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 18rem; border: 0; border-radius: 0.75rem; }
/* ---------- Hero (home) ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: min(80vh, 36rem); overflow: hidden; background: var(--foreground); }
.hero > img, .hero > .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero > img { object-fit: cover; object-position: center; }
.hero-media {
display: flex; align-items: flex-end; justify-content: flex-end; padding: 1rem 1.25rem;
background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 55%, var(--foreground)), var(--foreground));
color: color-mix(in oklab, var(--background) 55%, transparent); font-size: 0.8125rem;
}
.hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, var(--foreground), color-mix(in oklab, var(--foreground) 75%, transparent), color-mix(in oklab, var(--foreground) 10%, transparent));
}
.hero .section-shell { position: relative; padding-block: 2.5rem; }
@media (min-width: 48rem) { .hero .section-shell { padding-block: 3rem; } }
.hero-copy { max-width: 42rem; color: var(--background); }
.hero-eyebrow { margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; }
/* Icon accent uses the calm light-blue token (not the warm/orange accent —
orange is reserved for emergency cues only). */
.hero-eyebrow .icon { width: 1.25rem; height: 1.25rem; color: var(--light-blue); }
.hero h1 { font-size: 2.25rem; line-height: 1.25; }
@media (min-width: 48rem) { .hero h1 { font-size: 3.75rem; } }
.hero-text { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 2rem; color: color-mix(in oklab, var(--background) 90%, transparent); }
.hero-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .hero-actions { flex-direction: row; } }
/* ---------- Proof / credentials strip ----------
Sits between About and Departments. Stat numbers and accreditation
logos are placeholders — see comments in index.html. Do not style this
to look "finished" with invented figures; the dashed slot below is
intentionally visible until real logos are added. */
.proof-stats {
display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40rem) { .proof-stats { grid-template-columns: repeat(4, 1fr); } }
.proof-stat {
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border);
padding: 1.5rem 1rem; text-align: center;
}
.proof-stat .icon { width: 1.75rem; height: 1.75rem; color: var(--primary); }
.proof-number { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--primary); }
.proof-label { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.4; }
.proof-accred { margin-top: 2.5rem; text-align: center; }
.proof-accred-label { font-weight: 600; color: var(--foreground); margin-bottom: 0.75rem; }
.proof-accred-slot {
display: flex; align-items: center; justify-content: center; min-height: 5rem;
border-radius: var(--radius-card); padding: 1.25rem;
border: 1px dashed color-mix(in oklab, var(--primary) 35%, transparent);
background: color-mix(in oklab, var(--primary) 4%, var(--card));
color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.4; max-width: 40rem; margin-inline: auto;
}
/* ---------- Departments (photo cards with a colored icon badge) ----------
Each card is: photo (4:3, top corners rounded) -> a circle badge that
straddles the photo/body seam -> title + copy. The badge color and icon
are set per-department via the modifier class below (dept-pulmonology,
dept-cardiology, …), which sets --dept-color and picks the