/* ============================================================
   J S Hospital - page-specific styles
   ============================================================ */

/* ---- Timeline (history) ---- */
.timeline { position: relative; display: grid; gap: var(--sp-6); padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline__item { position: relative; }
.timeline__item::before {
  content: ""; position: absolute; left: -2rem; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--primary); border: 3px solid var(--primary-100);
}
.timeline__year { font-family: var(--font-head); font-weight: 800; color: var(--primary); font-size: var(--fs-md); margin-bottom: 0.2rem; }
.timeline__body h3 { font-size: var(--fs-lg); margin-bottom: 0.3rem; }

/* ---- Prose (blog article) ---- */
.prose { font-size: var(--fs-md); color: var(--ink-soft); }
.prose h3 { color: var(--ink); margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-lg); }
.prose p { margin-bottom: var(--sp-4); }
.prose .lead { font-size: var(--fs-lg); color: var(--ink); }

/* ---- Service detail banner image (replaces the small icon tile) ---- */
.service-banner {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: var(--r-lg); margin-bottom: var(--sp-4); box-shadow: var(--sh-sm);
}

/* ---- Gallery filters active state handled inline via aria-pressed ---- */
.gallery-filters .btn[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- Service detail list reset (uses .facility look) ---- */
.facility ul, ul.grid { list-style: none; }

/* ---- Reduce hero negative-overlap on small screens ---- */
@media (max-width: 700px) {
  .page-home section[style*="margin-top:-2rem"] { margin-top: var(--section-y-sm) !important; }
}