/* 2026-07-10 REL_96 -- /clinics Clinic profile page glue (.di-clinic*). ONLY the clinic-specific bits the /org page didn't have: a real hero cover photo, the photo gallery,
   and the amenities chips. Everything else (hero text, stats, doctor cards, map, hours, similar) reuses di-org.* (DRY #11). Global di tokens only, zero raw hex, light-only. */

/* real clinic photo behind the hero (CSP-safe <img> cover instead of an inline background-image) */
.di-clinic__herophoto { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.05); z-index:0; }
.di-clinic__hero .di-org__heroovl { z-index:1; }
.di-clinic__hero .di-org__herowrap { z-index:2; }
/* the clinic hero sits over an ARBITRARY uploaded photo (can be near-white) -- a stronger scrim floor than /org's controlled bg so the small hero
   sub-texts (address/landmark/stat labels) always clear AA regardless of the image (REL_96 css-review M). Scoped clinic-only; /org's overlay unchanged. */
.di-clinic__hero .di-org__heroovl { background:linear-gradient(150deg, color-mix(in srgb, var(--blue) 88%, transparent), color-mix(in srgb, var(--ink) 96%, transparent) 66%); }

/* photo gallery */
.di-clinic__gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.di-clinic__shot { display:block; aspect-ratio:4 / 3; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--tint); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent); }
.di-clinic__shot img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.di-clinic__shot:hover img { transform:scale(1.04); }
.di-clinic__shot:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* amenities */
.di-clinic__amen { display:flex; flex-wrap:wrap; gap:10px; }
.di-clinic__amenity { display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); border-radius:var(--pill); padding:9px 15px; font-size:13.5px; font-weight:600; color:var(--ink); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent); }
.di-clinic__amenity svg { width:15px; height:15px; color:var(--green-ink); flex:0 0 15px; }

@media (max-width:560px) {
    .di-clinic__gallery { grid-template-columns:repeat(2, 1fr); gap:8px; }
}