/* ==========================================================================
   Page-level layout glue.
   All values come from design system tokens — no hard-coded brand colours here.
   Component styling lives in assets/ds/_ds_bundle.css and must not be edited.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* The design system styles `body` (font, colour, ivory canvas) but does not
   reset its margin, so the browser's default 8px would inset every full-bleed
   band and leak the canvas down both edges. Bands must reach the viewport. */
body { margin: 0; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* Links inherit the brand link colour, except buttons, which style themselves. */
a:not(.sui-btn) { color: var(--srishti-plum-vivid); }
a:not(.sui-btn):hover { color: var(--plum-900); }

/* ---- Section shells -------------------------------------------------------
   .section     — constrained column on the ivory canvas
   .band        — full-bleed colour band; .band__inner re-constrains the column */
.section {
  width: 100%;
  box-sizing: border-box;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.band { padding: var(--space-8) var(--space-5); }
.band__inner { max-width: 1160px; margin: 0 auto; }
.band--rose { background: var(--rose-50); }
.band--plum-50 { background: var(--plum-50); }
.band--cta { background: var(--plum-800); }

.section__intro { max-width: 720px; }
.section__intro--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Emergency strip ------------------------------------------------------ */
.strip { background: var(--plum-900); padding: var(--space-4) var(--space-5); }
.strip__inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
}
.strip__copy { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 260px; }
.strip__title { color: var(--srishti-ivory); font-size: 0.9375rem; letter-spacing: 0.02em; }
.strip__note { color: var(--rose-200); font-size: 0.8125rem; }
.strip__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Card grids ----------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
/* Body of a service card: copy above, "read more" link pinned below it. */
.card-body { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.card-link { font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* ---- Two-column split (doctor, facilities preview) ------------------------ */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--space-7);
  align-items: center;
}
.split--wide { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.split__copy { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.split__copy p { margin: 0; line-height: 1.8; color: var(--neutral-700); }
.split__copy strong { color: var(--plum-700); }

.tag-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* The divider's hairlines are flex:1, so it needs an explicit width — the
   parent's align-items:flex-start would otherwise shrink it to just the dot. */
.divider--320 { width: 100%; max-width: 320px; margin-inline: auto; }

/* ---- Image slots ----------------------------------------------------------
   Awaiting real photography. Sized to hold the final image so swapping an <img>
   in place of .slot does not shift the layout. */
.slot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, var(--rose-100) 0%, rgba(246, 232, 232, 0) 60%),
    var(--plum-50);
  border: 1px dashed var(--plum-200);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.slot__label {
  font-size: 0.8125rem; color: var(--plum-500);
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; max-width: 22ch; line-height: 1.6;
}
.slot--photo {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--neutral-100);
}
.slot--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot__disclosure {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(53, 17, 48, 0.78);
  color: var(--srishti-ivory);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
/* Heights come from the prototypes, which size each slot to its section. */
.slot--h320 { height: 320px; }
.slot--h340 { height: 340px; }
.slot--h380 { height: 380px; }
.slot--h400 { height: 400px; }
.slot--h420 { height: 420px; }
.slot--h440 { height: 440px; }
.slot--h460 { height: 460px; }
/* When a real photo lands, give the <img> the same class to keep the crop. */
.slot > img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Facilities proof-point list ------------------------------------------
   Plain two-column list, used inside the Diagnostics "why it matters" column. */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4) var(--space-5);
}
.facility { display: flex; flex-direction: column; gap: var(--space-1); }
.facility h3 { margin: 0; }

/* ---- Facility cards (Home) -------------------------------------------------
   The facilities are the evidence for "a complete hospital", so they get weight:
   white cards on the plum band, numbered to match the Facilities page, each one
   a link into its section there. An explicit 3-column track (rather than
   auto-fit) keeps them as a balanced 3x2 — auto-fit would leave a 4+2 orphan
   row at this container width. */
.facility-cards {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .facility-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .facility-cards { grid-template-columns: repeat(3, 1fr); }
}

.facility-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--plum-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* Always visible, not hover-only — on touch there is no hover to reveal it, and
   nothing else says these are links. */
.facility-card::after {
  content: '→';
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-4);
  color: var(--rose-500);
  font-size: 1rem;
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}
.facility-card:hover::after { color: var(--rose-700); transform: translateX(3px); }
.facility-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--plum-200);
  transform: translateY(-2px);
}
.facility-card__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--rose-700);
}
.facility-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--srishti-plum);
  margin: 0;
}
.facility-card__note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--neutral-500);
  padding-right: var(--space-6);   /* clear of the arrow */
}
.facility-card:hover .facility-card__title { color: var(--srishti-plum-vivid); }

@media (prefers-reduced-motion: reduce) {
  .facility-card { transition: none; }
  .facility-card:hover { transform: none; }
}

/* ---- Closing CTA ---------------------------------------------------------- */
.cta {
  max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; gap: var(--space-4); align-items: center;
}
.cta .sui-eyebrow { color: var(--rose-200); margin: 0; }
.cta h2 { margin: 0; color: var(--srishti-ivory); }
.cta p { margin: 0; color: var(--rose-200); line-height: 1.8; }
.cta__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.cta__meta { color: var(--rose-200); font-size: 0.8125rem; }

/* ---- Footer link colours (on deep plum) ----------------------------------- */
.sui-footer a { color: var(--plum-200); }
.sui-footer a:hover { color: var(--srishti-ivory); }

/* ---- Hero photo -----------------------------------------------------------
   A hospital photograph behind the hero. It is decorative — the copy carries
   the message — so it lives in a pseudo-element rather than an <img>, and is
   never announced to screen readers.

   The scrim is part of the same background stack, painted OVER the photo, so the
   headline keeps its contrast against ivory rather than depending on the image.
   Desktop scrims left-to-right (subject sits right); mobile scrims top-to-bottom
   (subject sits below the copy). */
.sui-hero--photo { position: relative; overflow: hidden; }
.sui-hero--photo::before { display: none; }   /* the DS rose glow, redundant here */
.sui-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.sui-hero--photo .sui-hero__inner { position: relative; z-index: 1; }
.sui-hero--photo .sui-hero__mark { display: none; }

/* Mobile and tablet: keep the copy on its own ivory field, then show a dedicated
   hospital crop beneath it. Matching the reserved space to the crop's aspect
   ratio prevents the people and equipment from being hidden behind long copy. */
@media (max-width: 899px) {
  .sui-hero--photo { padding-bottom: min(85.714vw, 720px); }
  .sui-hero--photo::after {
    top: auto;
    height: min(85.714vw, 720px);
    background-image:
      linear-gradient(to bottom,
        var(--srishti-ivory) 0%,
        rgba(251, 245, 243, 0.90) 8%,
        rgba(251, 245, 243, 0.34) 20%,
        rgba(251, 245, 243, 0) 32%),
      url('../assets/img/hero-hospital-mobile-700.webp');
    background-size: 100% 100%, 100% auto;
    background-position: center bottom;
  }
}
@media (max-width: 899px) and (min-resolution: 2dppx) {
  .sui-hero--photo::after {
    background-image:
      linear-gradient(to bottom,
        var(--srishti-ivory) 0%,
        rgba(251, 245, 243, 0.90) 8%,
        rgba(251, 245, 243, 0.34) 20%,
        rgba(251, 245, 243, 0) 32%),
      url('../assets/img/hero-hospital-mobile-1000.webp');
  }
}

/* Phones: the appointment actions and emergency strip are more valuable than a
   large decorative image. Remove the photo and restore the hero's normal bottom
   spacing so the emergency information follows the CTAs immediately. */
@media (max-width: 599px) {
  .sui-hero--photo { padding-bottom: var(--space-8); }
  .sui-hero--photo::after { display: none; }
}

/* Desktop: subject on the right, copy on an ivory field to the left. */
@media (min-width: 900px) {
  .sui-hero--photo::after {
    background-image:
      linear-gradient(95deg,
        var(--srishti-ivory) 30%,
        rgba(251, 245, 243, 0.88) 48%,
        rgba(251, 245, 243, 0.30) 74%,
        rgba(251, 245, 243, 0) 100%),
      url('../assets/img/hero-hospital-wide-1600.webp');
    background-position: center right;
  }
}
@media (min-width: 1600px), (min-width: 900px) and (min-resolution: 2dppx) {
  .sui-hero--photo::after {
    background-image:
      linear-gradient(95deg,
        var(--srishti-ivory) 30%,
        rgba(251, 245, 243, 0.88) 48%,
        rgba(251, 245, 243, 0.30) 74%,
        rgba(251, 245, 243, 0) 100%),
      url('../assets/img/hero-hospital-wide-2400.webp');
  }
}

/* ---- Brand lockup ---------------------------------------------------------
   Flame mark (image) + wordmark and strapline as live text. Colours sampled
   from the logo artwork: both the wordmark (#4f1d47) and the strapline
   (#502747) are --plum-700. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
/* Mark + wordmark read as one unit; the descriptor sits beside them, past a
   hairline rule, so the logo itself stays uncrowded. */
.brand__logo { display: flex; align-items: center; gap: var(--space-2); }
.brand__mark { height: 44px; width: auto; display: block; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--plum-700);
}
.brand__rule {
  width: 1px;
  align-self: stretch;
  min-height: 40px;
  background: var(--plum-200);
  flex: none;
}
.brand__strap {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--plum-700);
}
.brand:hover .brand__name { color: var(--srishti-plum-vivid); }

/* Phone: the full lockup still fits, but only once it is scaled down — at its
   desktop size the brand (264px) plus the gap and hamburger overruns a 360px
   bar. Shrinking the mark, wordmark and tracking keeps all three parts. */
@media (max-width: 767px) {
  .sui-nav__inner { gap: var(--space-3); }   /* reclaim room from the flex gap */
  .brand { gap: var(--space-2); }
  .brand__logo { gap: 6px; }
  .brand__mark { height: 38px; }
  .brand__name { font-size: 1.375rem; }
  .brand__rule { min-height: 34px; }
  .brand__strap {
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    line-height: 1.45;
  }
}

/* Smallest phones (320–379px): trimmed further, or the hamburger wraps onto a
   second row and the bar doubles in height. */
@media (max-width: 379px) {
  .brand__mark { height: 34px; }
  .brand__name { font-size: 1.1875rem; }
  .brand__rule { min-height: 30px; }
  .brand__strap { font-size: 0.5rem; letter-spacing: 0.07em; }
}

/* ---- Navbar: hamburger below 768px ----------------------------------------
   Three modes: one row (>=1100px), links wrapped to a second row (768–1099px),
   hamburger (<768px). The button only exists for JS users (`html.js`); without
   JS the links fall back to wrapping, so navigation is never unreachable. */
.nav-toggle { display: none; }

.nav-toggle {
  width: 44px; height: 44px;              /* 44px — comfortable tap target */
  align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--plum-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--plum-50); }

/* Three bars; the middle one is the element, the outer two its pseudo-elements.
   They fold into an X when the menu is open. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px; height: 2px;
  background: var(--plum-700);
  border-radius: 2px;
}
.nav-toggle__bars { position: relative; transition: background-color .15s ease; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute; left: 0;
  transition: transform .18s ease, top .18s ease;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* Below 1100px the nav can't hold one row: the brand lockup (264px), links
   (538px), CTA (189px), gaps and padding need ~1087px. So the links wrap onto a
   second row. Every link stays visible — no hamburger at this size. */
@media (max-width: 1099px) {
  .sui-nav__inner {
    flex-wrap: wrap;
    row-gap: 0;
    min-height: 0;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .sui-nav__links {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    column-gap: var(--space-4);
    width: 100%;
    order: 3;
    padding-bottom: var(--space-2);
  }
}

/* Phone (≤767px): collapse the links behind the hamburger. Without JS the rules
   above still apply, so the links remain visible and reachable. */
@media (max-width: 767px) {
  .js .nav-toggle { display: inline-flex; margin-left: auto; }

  .js .sui-nav__links {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 3;
    gap: 0;
    margin: var(--space-3) 0 0;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--plum-100);
  }
  .js .sui-nav__links.is-open { display: flex; }
  .js .sui-nav__links a {
    display: block;
    padding: var(--space-3) 0;             /* generous rows, easy to hit */
    font-size: 1rem;
  }
  .js .sui-nav__links a[aria-current="page"] { color: var(--srishti-plum-vivid); font-weight: 600; }

  /* The CTA moves into the panel rather than crowding the bar on a phone. */
  .js .sui-nav__cta { display: none; }
  .js .sui-nav__links.is-open ~ .sui-nav__cta {
    display: inline-flex;
    order: 4;
    width: 100%;
    margin-bottom: var(--space-2);
  }
}

@media (max-width: 480px) {
  .sui-nav__links a { font-size: 0.875rem; }
  .js .sui-nav__links a { font-size: 1rem; }
}

/* ---- Journey steps (Maternity) --------------------------------------------
   Numbered white cards on the rose band. Not sui-card: the prototype uses a
   lighter shadow and no icon well. */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.journey-step {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.journey-step__num {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 600;
  color: var(--rose-500); line-height: 1;
}
.journey-step h3 { margin: 0; }
.journey-step p { margin: 0; font-size: 0.875rem; line-height: 1.7; color: var(--neutral-700); }

/* ---- Readiness list (Maternity) ------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-5);
}
.readiness { display: flex; flex-direction: column; gap: 6px; }
.readiness h3 { margin: 0; }

/* ---- Alternating facility rows (Facilities) -------------------------------
   Odd rows put the image first, even rows the copy — the DOM order does the
   alternating, so no order: overrides are needed. */
.facility-rows { display: flex; flex-direction: column; gap: var(--space-8); }
.facility-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--space-7);
  align-items: center;
}
.facility-row__copy { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.facility-row__copy h2 { margin: 0; }
.facility-row__copy p { margin: 0; line-height: 1.8; color: var(--neutral-700); }

/* ---- Centred closing block (Facilities) ----------------------------------- */
.center-block {
  max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; gap: var(--space-4); align-items: center;
}
.center-block h2, .center-block p { margin: 0; }

/* ---- Contact ---------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--space-7);
  align-items: start;
}
.contact-col { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-find { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-find h2 { margin: 0; }
.contact-find p { margin: 0; line-height: 1.8; color: var(--neutral-700); }
.contact-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-5);
}
.meta { display: flex; flex-direction: column; gap: 6px; }
.meta h3 { margin: 0; }
.meta p { margin: 0; font-size: 0.875rem; line-height: 1.7; color: var(--neutral-700); }

/* Booking card — white surface on the ivory canvas, same idiom as sui-card. */
.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.form-card__head { display: flex; flex-direction: column; gap: 6px; }
.form-card__head h2 { margin: 0; }
.form-card .sui-btn { width: 100%; }
.form-card__foot { text-align: center; }

/* Utilities used sparingly where a token-only tweak is clearer than a class. */
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mb-0 { margin-bottom: 0; }