/* ==========================================================================
   Meridian Hospital — Responsive layer
   Breakpoints: 1200 (nav density) · 1024 (tablet landscape) · 860 (tablet)
                640 (large phone) · 420 (small phone)
   The mobile layout is composed, not shrunk: stacked editorial rhythm,
   full-bleed media, one-column forms, vertical timeline.
   ========================================================================== */

/* ---------- 1200px : tighten navigation before it collides ---------- */
@media (max-width: 1200px) {
  .nav__link { padding: 10px 9px; font-size: 0.83rem; }
  .brand__tagline { display: none; }
  .split { gap: var(--sp-7); }
}

/* ---------- 1024px : tablet landscape ---------- */
@media (max-width: 1024px) {
  :root { --sp-10: 84px; --sp-9: 68px; }

  /* Nav collapses into the drawer */
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .burger { display: flex; }
  .utility-bar__list { display: none; }
  .utility-bar__inner { justify-content: space-between; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .split--reverse .split__media { order: 0; }
  .about__media { aspect-ratio: 16 / 10; }
  .about__badge { position: static; max-width: none; margin-top: -1px; box-shadow: none; }

  .why { grid-template-columns: 1fr; gap: var(--sp-7); }
  .why__media { aspect-ratio: 16 / 9; }

  .voices { grid-template-columns: 1fr; gap: var(--sp-7); }

  .emergency-band__inner { grid-template-columns: 1fr; gap: var(--sp-6); }

  .profile { grid-template-columns: 1fr; gap: var(--sp-7); }
  .profile__card { position: static; max-width: 420px; }

  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .field--search { grid-column: 1 / -1; }
  .filters .btn { grid-column: 1 / -1; }

  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }

  .quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick__card:nth-child(1), .quick__card:nth-child(2) { border-bottom: 1px solid var(--line); }
  .quick__card:nth-child(2n) { border-right: 0; }

  /* Timeline flips to vertical */
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey::before { left: 20px; right: auto; top: 8px; bottom: 30px; width: 1px; height: auto; }
  .journey__step { display: grid; grid-template-columns: 42px 1fr; gap: var(--sp-5); padding: 0 0 var(--sp-6) 0; }
  .journey__marker { margin-bottom: 0; }

  .board__head { display: none; }
  .board__row {
    grid-template-columns: 1fr 40px;
    grid-template-areas:
      "code go"
      "name go"
      "desc desc"
      "level level";
    gap: 6px var(--sp-4);
    padding-block: var(--sp-5);
  }
  .board__code { grid-area: code; }
  .board__name { grid-area: name; font-size: 1.16rem; }
  .board__desc { grid-area: desc; }
  .board__level { grid-area: level; margin-top: 4px; }
  .board__go { grid-area: go; align-self: center; }
}

/* ---------- 860px : tablet portrait ---------- */
@media (max-width: 860px) {
  :root { --sp-10: 72px; --sp-9: 56px; --header-h: 66px; }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 72px); padding-bottom: var(--sp-8); }
  .hero .btn-row { margin-bottom: var(--sp-6); }
  .hero .btn { flex: 1 1 auto; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item { padding-right: var(--sp-4); }
  .stats__item:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: var(--sp-5); padding-top: var(--sp-5); }
  .section--dark .stats__item:nth-child(n + 3) { border-color: var(--line-dark); }

  .masthead-row { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }

  .form-grid { grid-template-columns: 1fr; }
  .form-panel { padding: var(--sp-5); }
  .form-success dl { grid-template-columns: 1fr; }

  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }

  .result { grid-template-columns: 1fr; gap: var(--sp-3); }
  .result .btn { justify-self: start; }

  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .site-footer__bottom ul { flex-wrap: wrap; gap: var(--sp-4); }
}

/* ---------- 640px : phones ---------- */
@media (max-width: 640px) {
  :root { --sp-10: 60px; --sp-9: 48px; --sp-8: 44px; }

  .container { padding-inline: 18px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
  .service { min-height: 0; padding: var(--sp-5); }

  /* Quick access becomes a single readable stack */
  .quick { margin-top: -34px; }
  .quick__grid { grid-template-columns: 1fr; }
  .quick__card { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--sp-5); display: grid; grid-template-columns: 42px 1fr; gap: var(--sp-4); align-items: start; }
  .quick__card:last-child { border-bottom: 0; }
  .quick__icon { margin-bottom: 0; }
  .quick__card::before { width: 3px; height: auto; top: 0; bottom: 0; right: auto; transform: scaleY(0); transform-origin: top; }
  .quick__card:hover::before { transform: scaleY(1); }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row--inline { flex-direction: row; }
  .btn-row--inline .btn { width: auto; }
  .header-actions .btn { width: auto; }
  .cta-band .btn-row, .empty-state .btn { width: auto; }

  .header-actions .btn--appointment { display: none; }

  .facility, .facility--tall { aspect-ratio: 3 / 2.2; }

  .voice blockquote { font-size: var(--step-1); }
  .voices__aside { padding: var(--sp-5); }

  .site-footer__top { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-about { max-width: none; }

  .lightbox { padding: var(--sp-4); }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__figure img { max-height: 62vh; }

  .search-overlay__panel { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .search-overlay__form input { font-size: var(--step-2); }

  .accordion__trigger { font-size: 1rem; gap: var(--sp-4); }

  .info-table th, .info-table td { padding: 11px 13px; }
  .info-table { min-width: 460px; }

  .profile__card { max-width: none; }
  .page-hero { padding-block: var(--sp-8); }
}

/* ---------- 420px : small phones ---------- */
@media (max-width: 420px) {
  .brand__name { font-size: 1.08rem; }
  .brand__mark { width: 36px; height: 36px; }
  .icon-btn { width: 38px; height: 38px; }
  .stats { grid-template-columns: 1fr; }
  .stats__item:nth-child(n + 2) { border-top: 1px solid var(--line); margin-top: var(--sp-4); padding-top: var(--sp-4); }
  .section--dark .stats__item:nth-child(n + 2) { border-color: var(--line-dark); }
  .utility-bar { font-size: 0.72rem; }
  .mobile-nav__list a { font-size: 1.14rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .utility-bar, .mobile-nav, .search-overlay, .lightbox,
  .site-footer, .hero__scroll, .quick { display: none !important; }
  body { color: #000; }
  .section { padding-block: 18px; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}