/* Service centers (page-service-centers.php), from the mockup centers.html: chips to each centre, one row per centre (photo + details), the department rows. */
a.chip { display: inline-flex; align-items: center; }
.sub { margin-top: 10px; }
.sub-p { margin-top: 14px; }
/* cover photo: kept because the admin can change it from the page (kht-page-hero-upload) */
.cover { position: relative; aspect-ratio: 16 / 6; border-radius: var(--r-lg); background: var(--stage) center / cover no-repeat; margin-bottom: clamp(40px, 6vw, 72px); }
.kht-page-hero-upload { position: absolute; right: 12px; top: 12px; z-index: 3; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 12px; padding: 7px 12px; cursor: pointer; }
.kht-page-hero-upload.is-saving { opacity: .7; cursor: wait; }
.sc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: start; padding-block: 40px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.sc .ph { aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: var(--stage); }
.sc .ph img { width: 100%; height: 100%; object-fit: cover; }
.sc h2 { margin-top: 4px; font-size: clamp(22px, 2.6vw, 28px); }
.sc .feat a:hover, .row a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.row a { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.row p + a { margin-top: 8px; }
@media (max-width: 900px) { .sc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cover { aspect-ratio: 3 / 2; } }