/* ============================================================
   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); }
.gallery-filters .btn { padding-block: 0.6rem; }
.filter-count { font-size: var(--fs-xs); opacity: 0.7; font-weight: 700; margin-left: 0.15rem; }

/* ---- 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; }
}

/* ============================================================
   Doctor profile page
   ============================================================ */
.dp-hero { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-8); align-items: start; }
.dp-hero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.dp-hero__media img { width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; display: block; }
.dp-hero__badge {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  background: rgba(6, 24, 44, 0.72); backdrop-filter: blur(4px);
  color: #fff; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
  padding: 0.35rem 0.9rem; border-radius: var(--r-pill); letter-spacing: 0.03em;
}
.dp-hero__info h1, .dp-hero__info h2 { margin-bottom: 0.25rem; }
.dp-hero__info h2 { font-size: var(--fs-3xl); }
.dp-hero__role { color: var(--primary); font-weight: 600; margin-bottom: var(--sp-5); }

/* The doctor's bio sits in the hero beside the photo, so the column carries
   real content instead of the meta tiles it replaced. */
.dp-hero__info .prose { margin-top: var(--sp-5); max-width: 68ch; }
.dp-hero__info .prose p + p { margin-top: var(--sp-4); }

.dp-section-card { margin-top: var(--sp-6); }
.dp-section-card h3 { margin-bottom: var(--sp-4); }
/* Same column widths/gap as .dp-hero above, so the Qualification card lines
   up under the photo and the Expertise card lines up under the bio text. */
.dp-two-col { margin-top: var(--sp-6); align-items: start; grid-template-columns: 280px 1fr; gap: var(--sp-8); }
.dp-two-col .dp-section-card { margin-top: 0; }

/* Qualification / Experience / Availability + Area of Expertise columns */
.dp-fact + .dp-fact { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px dashed var(--line); }
.dp-fact__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dp-fact__icon { width: 40px; height: 40px; margin-bottom: 0; flex: none; }
.dp-fact__icon .icon { width: 20px; height: 20px; }
.dp-fact__head h3 { flex: 1; min-width: 0; margin: 0; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.dp-fact__value { color: var(--ink); line-height: var(--lh-body); }
.dp-expertise__lead { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.dp-expertise__lead + .dp-expertise__list { margin-top: var(--sp-3); }
.dp-expertise__list { list-style: none; display: grid; gap: var(--sp-2); }
.dp-expertise__list li { position: relative; padding-left: var(--sp-5); color: var(--ink-soft); line-height: var(--lh-body); }
.dp-expertise__list li::before {
  content: ""; position: absolute; left: 6px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}
.dp-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

.dp-timing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.dp-timing-card { background: var(--surface); border-radius: var(--r-md); padding: var(--sp-5); text-align: center; }
.dp-timing-day { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); color: var(--primary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-2); }
.dp-timing-hours { font-weight: 600; color: var(--ink); line-height: var(--lh-body); }
.dp-closed { color: var(--ink-faint); font-weight: 500; font-style: italic; }

.dp-schedule-banner {
  margin-top: var(--sp-6); display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; background: var(--surface);
}
.dp-schedule-banner__text { display: flex; align-items: center; gap: var(--sp-4); }
.dp-schedule-banner__text .icon-tile { margin-bottom: 0; flex: none; }
.dp-schedule-banner__text h4 { margin-bottom: 0.15rem; }
.dp-schedule-banner__text p { color: var(--ink-soft); font-size: var(--fs-sm); }
.dp-schedule-banner--stack { flex-direction: column; align-items: stretch; text-align: center; }
.dp-schedule-banner--stack .dp-schedule-banner__text { flex-direction: column; text-align: center; margin-bottom: var(--sp-4); }

@media (max-width: 860px) {
  .dp-hero { grid-template-columns: 1fr; }
  .dp-hero__media { max-width: 260px; margin: 0 auto; }
  .dp-hero__info { text-align: center; }
  .dp-hero__info .prose { text-align: left; }
  .dp-two-col { grid-template-columns: 1fr; }
  .dp-timing-grid { grid-template-columns: 1fr; }
  .dp-cta-row .btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   Appointment form sections
   ============================================================ */
.form-section-label {
  display: block; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary);
  margin: var(--sp-6) 0 var(--sp-4);
}
.form-section-label:first-child { margin-top: 0; }

/* ============================================================
   OPD schedule table
   ============================================================ */
.sched-toolbar { max-width: 420px; margin: 0 auto var(--sp-5); }
.sched-table-wrap { padding: 0; overflow-x: auto; }
.sched-table { width: 100%; border-collapse: collapse; }
.sched-table th {
  text-align: left; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
  background: var(--surface); padding: var(--sp-4) var(--sp-5); white-space: nowrap;
}
.sched-table td { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); vertical-align: middle; }
.sched-table tbody tr:hover { background: var(--primary-50); }
.sched-qual { color: var(--ink-soft); }
.sched-doc { display: flex; align-items: center; gap: var(--sp-3); }
.sched-doc img { width: 40px; height: 40px; border-radius: var(--r-pill); flex: none; object-fit: cover; }
.sched-doc a { font-weight: 600; color: var(--ink); }
.sched-doc a:hover { color: var(--primary); }
.sched-doc span { display: block; font-size: var(--fs-xs); color: var(--ink-faint); }
.sched-lines { display: block; }
.sched-line { display: block; }
.sched-line + .sched-line { margin-top: var(--sp-1); }
.sched-empty { text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--ink-soft); }

@media (max-width: 860px) {
  .sched-table thead { display: none; }
  .sched-table, .sched-table tbody, .sched-table tr, .sched-table td { display: block; width: 100%; }
  .sched-table tr { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
  .sched-table tr:first-child { border-top: 0; }
  .sched-table td { padding: 0.3rem 0; border: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); text-align: right; overflow-wrap: anywhere; }
  .sched-table td[data-label]:not([data-label=""])::before { content: attr(data-label); font-weight: 600; color: var(--ink-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; }
  .sched-table td.sched-cell--doc { justify-content: flex-start; padding-bottom: var(--sp-3); }
}

/* Management Team page */
.pf-list { display: grid; gap: var(--sp-5); max-width: 1120px; margin-inline: auto; }
.pf { display: grid; grid-template-columns: 1fr clamp(190px, 22%, 240px); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; background: #F6F5F1; border-radius: var(--r-lg); padding: clamp(1rem, 2.2vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem); }
.pf__text { text-align: right; }
.pf__name { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; color: #3D4F3A; text-transform: uppercase; }
.pf__hon { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .28em; margin-bottom: var(--sp-2); }
.pf__first { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); letter-spacing: .12em; }
.pf__last { font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, .85rem + .7vw, 1.3rem); letter-spacing: .1em; margin-top: var(--sp-1); }
.pf__role { margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; color: #5B6B57; }
.pf__bio { margin-top: var(--sp-3); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink); }
.pf__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; display: block; }
@media (max-width: 760px) {
  .pf { grid-template-columns: 1fr; }
  .pf__photo { order: -1; max-width: 240px; margin: 0 auto; }
  .pf__text { text-align: center; }
  .pf__name { align-items: center; }
  .pf__bio { text-align: left; }
}
.mgmt-thanks { margin-top: var(--sp-7); text-align: center; color: var(--ink-soft); }
.init-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-7); }
.init-tile { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.init-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.init-tile:hover .icon-tile { background: var(--grad-brand); color: #fff; }
.init-tile .icon-tile { margin-bottom: var(--sp-2); }
.init-tile__title { font-family: var(--font-head); font-weight: 700; color: var(--ink); line-height: 1.25; }
.init-tile__sub { color: var(--ink-soft); font-size: var(--fs-sm); }
.init-tile__tag { margin-top: auto; padding-top: var(--sp-2); color: var(--accent-700); font-weight: 600; font-size: var(--fs-xs); }
.init-stack { display: grid; gap: var(--sp-6); }
.initiative { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-7); align-items: start; scroll-margin-top: 140px; }
.initiative h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.initiative__sub { color: var(--accent-700); font-weight: 600; font-size: var(--fs-sm); }
.initiative__body > * + * { margin-top: var(--sp-4); }
.initiative__body p, .initiative__body li { color: var(--ink-soft); }
.initiative__body h4 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.initiative__body ul { display: grid; gap: var(--sp-2); padding-left: 1.2rem; list-style: disc; }
.initiative__note { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); color: var(--ink-soft); }
@media (max-width: 1100px) { .init-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .initiative { grid-template-columns: 1fr; gap: var(--sp-4); } }
@media (max-width: 560px) { .init-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .init-tile { transition: none; } }

/* Management page feature sections + detail pages */
.mfeat__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: center; }
.mfeat__grid--rev { grid-template-columns: 1fr 1.05fr; }
.mfeat__grid--rev .mfeat__visual { order: 2; }
.mfeat__copy h2 { margin: var(--sp-2) 0 var(--sp-4); }
.mfeat__lead { color: var(--ink-soft); font-size: var(--fs-md); max-width: 56ch; }
.mfeat__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-6); }
.mfeat__chip { padding: .45rem .9rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
a.mfeat__chip:hover { background: var(--health-100); color: var(--accent-700); }
.mfeat--a .mfeat__visual, .mfeat--b .mfeat__visual { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); aspect-ratio: 5 / 4; }
.mfeat--a .mfeat__visual img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.mfeat__img-main { grid-row: 1 / 3; }
@media (max-width: 860px) { .mfeat__grid, .mfeat__grid--rev { grid-template-columns: 1fr; gap: var(--sp-6); } .mfeat__grid--rev .mfeat__visual { order: 0; } }
@media (max-width: 560px) { .mfeat--a .mfeat__visual, .mfeat--b .mfeat__visual { aspect-ratio: 1 / 1; } .init-grid--3 { grid-template-columns: 1fr; } }
.mfeat__tile { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-md); }
.mfeat__tile p { font-family: var(--font-head); font-weight: 700; color: var(--ink); line-height: 1.25; }
.mfeat__tile--main { grid-row: 1 / 3; background: var(--grad-dark); border-color: transparent; }
.mfeat__tile--main p { color: #fff; font-size: var(--fs-xl); }
.mfeat__mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--health-100); color: var(--accent-700); }
.mfeat__tile--main .mfeat__mark { background: rgba(255,255,255,.12); color: #7FD6CF; }
.mfeat__mark .icon { width: 26px; height: 26px; }
.init-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .init-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .init-grid--3 { grid-template-columns: 1fr; } }
.section--end-tight { padding-bottom: 0; }

/* Home: Guided by Thakershy Charitable Trust */
.lead-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.lead-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lead-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.lead-card__photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; background: var(--surface-2); }
.lead-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); text-align: center; border-top: 3px solid var(--accent-700); }
.lead-card__body h3 { font-size: var(--fs-md); }
.lead-card__body p { margin-top: var(--sp-1); color: var(--accent-700); font-weight: 600; font-size: var(--fs-sm); }
.lead-cta { margin-top: var(--sp-7); text-align: center; }
@media (max-width: 900px) { .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (max-width: 520px) { .lead-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .lead-card { transition: none; } .lead-card:hover { transform: none; } }

/* Home: Inside our hospital */
.inside-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 240px); gap: var(--sp-4); }
.inside-grid .tile { aspect-ratio: auto; border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.inside-grid .tile img { object-position: center; }
.inside-grid__feat { grid-column: 1 / 3; grid-row: 1 / 3; }
.inside-grid__lobby img { object-position: center 62%; }
@media (max-width: 900px) {
  .inside-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 30vw, 240px); }
  .inside-grid__feat { grid-column: 1 / -1; grid-row: span 2; }
}
@media (max-width: 520px) {
  .inside-grid { grid-template-columns: 1fr; grid-auto-rows: 62vw; }
  .inside-grid__feat { grid-column: auto; grid-row: span 1; }
}
.initiative__body .timeline__body h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.initiative__body .timeline { margin-top: var(--sp-5); }
#disaster-relief-support .initiative__body > h4:first-child { margin-top: 0; }
#disaster-relief-support .initiative__body > .initiative__sub { margin-top: var(--sp-6); }
#disaster-relief-support .initiative__body strong { color: var(--ink); }

/* Appointment form: doctor-driven calendar */
.cal-field { position: relative; }
.cal { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: min(320px, calc(100vw - 2.5rem)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: var(--sp-4); }
.cal[hidden] { display: none; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.cal__head strong { font-family: var(--font-head); font-size: var(--fs-base); }
.cal__nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cal__nav:disabled { opacity: .35; cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal__dow { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-faint); padding: 4px 0; }
.cal__day { aspect-ratio: 1; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.cal__day:hover:not(:disabled) { background: var(--health-100); color: var(--accent-700); }
.cal__day:disabled { color: var(--ink-faint); opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.cal__day.is-today { outline: 1px solid var(--line); }
.cal__day.is-picked { background: var(--primary); color: #fff; }
@media (max-width: 860px) { .sched-lines { text-align: right; } }
@media (max-width: 400px) { .cal { width: auto; right: 0; padding: var(--sp-3); } .cal__grid { gap: 2px; } }
/* Appointment form: Preferred date + time slot share one control style */
#appointmentForm .appt-pair {
  box-sizing: border-box; width: 100%; height: 3.25rem; padding: 0 2.75rem 0 1rem; margin: 0;
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; line-height: 1.5; color: var(--ink);
  background-color: #fff; background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px 18px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
#appointmentForm .appt-pair--date { cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='16' rx='2.5'/><path d='M3.5 9.5h17M8 3v4M16 3v4'/></svg>"); }
#appointmentForm .appt-pair--select { cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
#appointmentForm .appt-pair::placeholder { color: var(--ink-faint); opacity: 1; }
#appointmentForm .appt-pair:disabled { cursor: not-allowed; color: var(--ink-faint); background-color: #fff; opacity: 1; }
#appointmentForm .appt-pair:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-100); }
#appointmentForm .appt-note { margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }

/* Donate: donation impact section */
.give-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.give-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.give-item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.give-item .icon-tile { width: 48px; height: 48px; margin: 0; flex: none; }
.give-item .icon-tile .icon { width: 24px; height: 24px; }
.give-item__text { font-weight: 600; color: var(--ink); line-height: var(--lh-snug); }
.give-notice { display: flex; align-items: center; gap: var(--sp-4); max-width: 820px; margin: var(--sp-7) auto 0; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--grad-dark); color: #fff; }
.give-notice .icon-tile { margin: 0; flex: none; background: rgba(255,255,255,.12); color: #7FD6CF; }
.give-notice p { font-size: var(--fs-md); color: #fff; }
.give-notice strong { letter-spacing: .02em; }
.give-cta { text-align: center; margin-top: var(--sp-6); }
.give-cta p { font-size: var(--fs-md); color: var(--ink-soft); }
.give-cta__btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }
@media (max-width: 900px) { .give-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .give-grid { grid-template-columns: 1fr; } .give-notice { flex-direction: column; text-align: center; padding: var(--sp-5); } .give-cta__btns .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .give-item { transition: none; } .give-item:hover { transform: none; } }

/* Events: program cards + pages */
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); min-height: 440px; align-items: stretch; }
.ev-grid.is-ready { min-height: 0; }
.ev-block-title { margin: var(--sp-7) 0 var(--sp-5); font-size: var(--fs-xl); }
.ev-block-title:first-of-type { margin-top: 0; }
.ev-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ev-card__media { position: relative; padding: var(--sp-3) var(--sp-3) 0; }
.ev-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: var(--r-md); background: var(--surface-2); }
.ev-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.ev-tag { position: absolute; top: calc(var(--sp-3) + var(--sp-3)); right: calc(var(--sp-3) + var(--sp-3)); max-width: calc(100% - 2 * (var(--sp-3) + var(--sp-3))); padding: .25rem .7rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .94); color: var(--accent-700); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.ev-card__body h3 { font-size: var(--fs-md); }
.ev-meta { display: grid; gap: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.ev-meta li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.ev-meta .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent-700); }
.ev-card__body > p { color: var(--ink-soft); font-size: var(--fs-sm); }
.ev-points { display: grid; gap: var(--sp-2); padding-left: 1.1rem; list-style: disc; color: var(--ink-soft); font-size: var(--fs-sm); }
.ev-more { text-align: center; margin-top: var(--sp-6); }
.ev-note { margin: 0 auto var(--sp-6); max-width: 760px; padding: var(--sp-3) var(--sp-5); background: var(--surface-2); border-radius: var(--r-md); color: var(--ink-soft); font-size: var(--fs-sm); text-align: center; }
@media (max-width: 1024px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ev-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
/* Doctor profile bio: headings and lists supplied in the doctors write-up */
.dp-hero__info .prose h4 { color: var(--ink); margin: var(--sp-5) 0 var(--sp-3); }
.dp-hero__info .prose ul { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding-left: 1.25rem; list-style: disc; }
.dp-hero__info .prose ul ul { margin: var(--sp-2) 0 0; list-style: circle; gap: var(--sp-1); }

/* Donate form: tax-benefit and CSR notes */
.donate-notes { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-soft); }
.donate-notes strong { color: var(--ink); }

/* Donate form: invalid-field state */
.donate-form .input[aria-invalid="true"] { border-color: var(--warn); }

/* Donate: form + supporting image */
.donate-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-8); align-items: stretch; }
.donate-aside { order: -1; display: flex; flex-direction: column; gap: var(--sp-5); }
.donate-aside__head h2 { font-size: var(--fs-xl, 1.5rem); margin-bottom: var(--sp-3); }
.donate-aside__head p { color: var(--ink-soft); }
.donate-gallery { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1.5fr 1fr 1.5fr; gap: var(--sp-3); min-height: 520px; }
.donate-gallery figure { margin: 0; min-height: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.donate-gallery figure:first-child, .donate-gallery figure:last-child { grid-column: 1 / -1; }
.donate-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .donate-layout { grid-template-columns: 1fr; gap: var(--sp-6); } .donate-aside { order: 0; } .donate-gallery { grid-template-rows: none; grid-auto-rows: auto; min-height: 0; } .donate-gallery figure { aspect-ratio: 4 / 3; } }

/* Social programs: three-photo layout with a wide lead photograph */
.mfeat--b .mfeat__visual--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); aspect-ratio: 1 / 1; }
.mfeat--b .mfeat__visual--wide img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.mfeat--b .mfeat__visual--wide .mfeat__img-main { grid-row: 1; grid-column: 1 / -1; }

/* Cleft Centre: overview + services grid */
#cleft-centre .initiative__body > .cleft-h:first-child { margin-top: 0; }
.cleft-h { font-size: var(--fs-md); color: var(--ink); }
.cleft-services { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.initiative__body ul.cleft-services__grid { display: flex; flex-wrap: wrap; align-items: flex-start; list-style: none; padding-left: 0; margin-top: var(--sp-4); gap: var(--sp-3); }
.cleft-services__grid li { display: flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); font-weight: 500; line-height: var(--lh-snug); overflow-wrap: break-word; }
.cleft-services__grid .icon { width: 18px; height: 18px; flex: none; color: var(--accent-700); }


/* Initiative: illustration under the title */
.initiative__figure { margin: var(--sp-5) 0 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.initiative__figure img { display: block; width: 100%; height: auto; }
#medical-collaborations .initiative__figure { max-width: 360px; }
/* Cleft Centre: the first (landscape) photo gets the same box height as the 3:4 portraits after it
   and fills it edge to edge (cover, centred), so the cards match with no empty bands. 100cqw = this
   figure's inner width (= a portrait image's width when the photos share one column). */
#cleft-centre .initiative__figure:first-of-type { container-type: inline-size; }
#cleft-centre .initiative__figure:first-of-type img { height: calc(100cqw * 4 / 3); object-fit: cover; }
@media (max-width: 860px) {
  #cleft-centre > div:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
  #cleft-centre > div:first-child > :not(.initiative__figure) { grid-column: 1 / -1; }
  #cleft-centre .initiative__figure:first-of-type { grid-column: 1 / -1; }
  /* full-width row: match a half-width portrait (one column minus its 1px borders) */
  #cleft-centre .initiative__figure:first-of-type img { height: calc(((100cqw + 2px - var(--sp-4)) / 2 - 2px) * 4 / 3); }
}
@media (max-width: 560px) {
  #cleft-centre > div:first-child { grid-template-columns: minmax(0, 1fr); }
  #cleft-centre .initiative__figure { max-width: 280px; }
  #cleft-centre .initiative__figure:first-of-type img { height: calc(100cqw * 4 / 3); }
}
@media (max-width: 860px) {
  #vadilo-no-visamo > div:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
  #vadilo-no-visamo > div:first-child > :not(.initiative__figure) { grid-column: 1 / -1; }
  #vadilo-no-visamo .initiative__figure:first-of-type { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  #vadilo-no-visamo > div:first-child { grid-template-columns: minmax(0, 1fr); }
}
.ev-card__placeholder { width: 100%; aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: var(--r-md); background: var(--grad-dark); color: #7FD6CF; }
.ev-card__placeholder .icon { width: 44px; height: 44px; }

/* Upcoming Programs empty state: dark brand panel, copy left, photo right */
.ev-empty { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: var(--sp-8); padding: var(--sp-8); border-radius: var(--r-xl, 28px); background: var(--grad-dark); color: #fff; overflow: hidden; }
.ev-empty__label { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7FD6CF; }
.ev-empty__copy h3 { display: grid; gap: var(--sp-1); margin: var(--sp-3) 0 var(--sp-4); color: #fff; }
.ev-empty__kicker { font-size: var(--fs-md); font-weight: 600; color: rgba(255, 255, 255, .78); }
.ev-empty__title { font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: -.02em; background: linear-gradient(90deg, #fff 0%, #7FD6CF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-empty__copy p { max-width: 42ch; margin-bottom: var(--sp-6); color: rgba(255, 255, 255, .82); font-size: var(--fs-md); }
.ev-empty__media { position: relative; margin: 0; }
.ev-empty__media::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid rgba(127, 214, 207, .55); border-radius: var(--r-lg); }
.ev-empty__media img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; border-radius: var(--r-lg); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
@media (max-width: 860px) { .ev-empty { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); } .ev-empty__media img { aspect-ratio: 16 / 10; } .ev-empty__media::before { inset: 10px -8px -10px 8px; } }
@media (max-width: 480px) { .ev-empty { padding: var(--sp-5); } .ev-empty__media { margin-right: 8px; } }

/* Upcoming Programs: with only 1 or 2 cards, keep the normal column width and centre the group */
.ev-grid[data-programs="upcoming"]:is(:has(> .ev-card:only-child), :has(> .ev-card:nth-child(2):last-child)) { display: flex; flex-wrap: wrap; justify-content: center; }
.ev-grid[data-programs="upcoming"]:is(:has(> .ev-card:only-child), :has(> .ev-card:nth-child(2):last-child)) > .ev-card { flex: 0 1 calc((100% - 2 * var(--sp-6)) / 3); }
@media (max-width: 1024px) { .ev-grid[data-programs="upcoming"]:is(:has(> .ev-card:only-child), :has(> .ev-card:nth-child(2):last-child)) > .ev-card { flex-basis: calc((100% - var(--sp-6)) / 2); } }
@media (max-width: 640px) { .ev-grid[data-programs="upcoming"]:is(:has(> .ev-card:only-child), :has(> .ev-card:nth-child(2):last-child)) > .ev-card { flex-basis: 100%; } }
@media (max-width: 560px) { .cleft-services__grid li { flex: 1 1 100%; } }
#sadhu-sadhvi-support .initiative__figure { max-width: 360px; container-type: inline-size; }
#sadhu-sadhvi-support .initiative__figure img { height: calc(100cqw - 50px); object-fit: cover; }

/* Service pages: the Department info card stays in view while the long left column scrolls and stops at the end of its row.
   The offset clears the sticky header (77px up to 1180px wide, 180px above that). Below 861px the layout stacks and nothing sticks. */
@media (min-width: 861px) {
  .svc-aside { position: sticky; top: calc(77px + var(--sp-5)); align-self: start; }
}
@media (min-width: 1181px) {
  .svc-aside { top: calc(180px + var(--sp-5)); }
}
#disaster-relief-support .initiative__figure { max-width: 360px; }

/* Home sliders (testimonials, blog): see assets/js/slider.js. Calm, stationary cards: no hover lift, shadow, zoom or colour change. */
.slider { --gap: var(--sp-6); position: relative; display: flex; align-items: center; }
.slider__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 4px; margin: -4px; }
.slider__track { display: flex; gap: var(--gap); transform: translateX(calc(var(--idx, 0) * -1 * (100% + var(--gap)) / var(--pv, 1))); transition: transform .6s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.slider__track.is-jumping { transition: none; }
.slider__track > * { flex: 0 0 calc((100% - (var(--pv, 1) - 1) * var(--gap)) / var(--pv, 1)); min-width: 0; }

.slider .card { box-shadow: none; transition: none; border-color: var(--line); }
.slider .card--hover:hover { transform: none; box-shadow: none; border-color: var(--line); }
.slider .quote { padding: var(--sp-7) var(--sp-6) var(--sp-6); }
.slider .quote__body { font-size: var(--fs-md); line-height: 1.7; }
.slider .quote__person { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.slider .post__media img { transition: none; }
.slider .post:hover .post__media img { transform: none; }
.slider .post__body { padding: var(--sp-6); }
.slider .link-arrow .icon { transition: none; }
.slider .link-arrow:hover .icon { transform: none; }
.slider .post__body a:hover, .slider .link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

.slider__btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.slider__btn:hover { border-color: var(--primary); color: var(--primary); }
.slider__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.slider__btn .icon { width: 20px; height: 20px; }
.slider__btn--prev .icon { transform: scaleX(-1); }
.slider__btn--prev { margin-right: var(--sp-5); }
.slider__btn--next { margin-left: var(--sp-5); }
@media (max-width: 860px) {
  .slider { flex-wrap: wrap; justify-content: center; gap: var(--sp-4); --gap: var(--sp-5); }
  .slider__viewport { order: 0; flex: 0 0 100%; }
  .slider__btn { order: 1; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .slider__track { transition: none; } }

/* Doctor photos: anchor to the top so heads are never cut off in the round (92px / 40px) and portrait crops */
.doctor__photo img, .sched-doc img, .dp-hero__media img { object-position: center top; }

/* Dr. Divyang Dave: his source photo (660x1245) is cut off at both side edges. dr-divyang-dave-wide.webp is that same photo, untouched in the middle, with soft side margins added (canvas expansion only), so the round frames and the profile frame can show him like every other doctor. */
.doctor__photo img[src*="/dr-divyang-dave-wide."], .sched-doc img[src*="/dr-divyang-dave-wide."] { object-fit: cover; object-position: 50% 8%; }
.dp-hero__media img[src*="/dr-divyang-dave-wide."] { object-fit: cover; object-position: center top; }
#programs .initiative__figure, #personalities .initiative__figure { max-width: 360px; }

@media (min-width: 861px) { #donor-partner-group > div:first-child { position: sticky; top: calc(77px + var(--sp-5)); } }
@media (min-width: 861px) { #medical-collaborations > div:first-child { position: sticky; top: calc(77px + var(--sp-5)); } }
.dept-card__media img[src*="cleft-craniofacial-01"], .service-banner[src*="cleft-craniofacial-01"] { object-fit: contain; }

.quote__person .quote__stars { margin-top: 4px; }

/* Testimonials slider (data-slider-fit): reviews differ a lot in length, so cards are not stretched to the tallest slide in the track.
   slider.js gives the visible cards the height of the tallest one among them and the viewport follows it. */
.slider--fit .slider__track { align-items: flex-start; }
.slider--fit .slider__track > * { transition: min-height .6s cubic-bezier(.22, .61, .36, 1); }
.slider--fit .slider__viewport { transition: height .6s cubic-bezier(.22, .61, .36, 1); }
.slider--testimonials .quote__body { font-size: var(--fs-sm); line-height: 1.65; }
/* Bottom block: "Read more" and the reviewer details are pushed to the card bottom together, so they line up across cards of any text length. */
.slider--testimonials .quote { gap: var(--sp-3); }
.slider--testimonials .quote__person { margin-top: auto; padding-top: var(--sp-4); }
.slider--testimonials .quote__toggle { margin-top: auto; }
.slider--testimonials .quote__toggle + .quote__person { margin-top: 0; }
.quote__full { display: flex; flex-direction: column; gap: var(--sp-3); }
.quote__full[hidden] { display: none; }
.quote__toggle { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quote__toggle:hover { color: var(--primary-600, var(--primary)); }