/* ==========================================================================
   MEDIGRAM HOSPITAL – RESPONSIVE LAYER
   Breakpoints: 1240 / 1100 / 1024 / 860 / 768 / 640 / 480 / 360
   Brand palette is controlled by design-system.css.
   ========================================================================== */

/* ---------- ≤1240: tighten header ---------- */
@media (max-width: 1240px) {
  .header-emergency span { display: none; }
  .nav-menu-list { gap: 1.05rem; }
  .nav-menu-list a { font-size: 0.87rem; }
}

/* ---------- ≤1100: hamburger navigation ---------- */
@media (max-width: 1100px) {
  .nav-menu { display: none; }
  .mobile-toggle { display: grid; }
  .header-inner { gap: 1rem; }
}

/* ---------- ≤1024: tablets landscape ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .appointment-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; max-width: 560px; }

  .testimonial-carousel { --pv: 2; }

  .emergency-flex { flex-direction: column; align-items: flex-start; }

  .facilities-layout-grid { grid-template-columns: 1fr; }
  .facility-main-card { min-height: 340px; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .doctor-profile-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

/* ---------- ≤860: stack two-column layouts ---------- */
@media (max-width: 860px) {
  .about-grid,
  .location-grid,
  .intro-split,
  .layout-sidebar,
  .doctor-profile-grid { grid-template-columns: 1fr; }

  .layout-aside,
  .doctor-profile-aside { position: static; }

  .doctor-profile-aside {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: start;
  }
  .doctor-profile-aside > .btn { grid-column: 1 / -1; }

  .layout-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-visual { max-width: 620px; }

  .services-list-grid { grid-template-columns: 1fr; }

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

  .section-head-row { flex-direction: column; align-items: flex-start; }

  .trust-bar-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-bar-item {
    justify-content: flex-start;
    border-bottom: 1px solid var(--border-color);
  }
  .trust-bar-item + .trust-bar-item { border-left: 0; }
  .trust-bar-item:not(:nth-child(3n + 1)) { border-left: 1px solid var(--border-color); }
}

/* ---------- ≤768: tablets portrait / large phones ---------- */
@media (max-width: 768px) {
  :root { --header-h: 66px; }

  .topbar-info,
  .topbar-hours { display: none; }
  .topbar .container { justify-content: center; }
  .topbar-actions { margin: 0; }

  .brand-logo img { height: 42px; max-width: 160px; }

  /* Hero: overlay becomes vertical for readability */
  .hero {
    min-height: auto;
    padding-block: 4rem 3.5rem;
  }
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(10, 37, 64, 0.78) 0%,
      rgba(10, 37, 64, 0.88) 55%,
      rgba(10, 37, 64, 0.95) 100%
    );
  }
  .hero-bg img { object-position: 65% center; }
  .hero-inner { max-width: 100%; }
  .hero-desc { max-width: 100%; }

  .emergency-actions,
  .footer-cta-buttons,
  .support-strip-actions,
  .location-actions { width: 100%; }

  .footer-cta-flex { flex-direction: column; align-items: flex-start; }

  .about-points { grid-template-columns: 1fr; }

  .doctor-profile-aside { grid-template-columns: 1fr; }
  .doctor-profile-photo { max-width: 360px; }

  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }

  .testimonial-carousel { padding-inline: 0; }
  .carousel-btn { display: none; }
}

/* ---------- ≤640: phones ---------- */
@media (max-width: 640px) {
  .btn-header-cta { display: none; }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  /* Doctor cards stay 2-up on phones for a compact directory */
  #doctorGrid.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  #doctorGrid .doctor-info { padding: 0.9rem 0.9rem 0; }
  #doctorGrid .doctor-card-footer {
    margin-inline: -0.9rem;
    padding: 0.75rem 0.9rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  #doctorGrid .doctor-name { font-size: 0.98rem; }
  #doctorGrid .doctor-qual { font-size: 0.8rem; }

  .appointment-form-grid { grid-template-columns: 1fr; }
  .appointment-footer .btn { width: 100%; }

  .facility-cards-subgrid { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .facility-sub-card { padding: 1.15rem; }

  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  .layout-aside { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; }

  .testimonial-carousel { --pv: 1; }

  .contact-cards { grid-template-columns: 1fr; }

  .service-item-row { padding-block: 1.1rem; }
  .service-arrow-btn { width: 38px; height: 38px; }

  .emergency-actions .btn,
  .footer-cta-buttons .btn,
  .support-strip-actions .btn,
  .location-actions .btn {
    flex: 1 1 100%;
    white-space: normal;
  }

  .profile-cta .btn { width: 100%; }
}

/* ---------- ≤480: small phones ---------- */
@media (max-width: 480px) {
  .hero { padding-block: 3.25rem 3rem; }
  .hero-badge { font-size: 0.68rem; padding: 0.4rem 0.8rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; white-space: normal; }

  .trust-bar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-bar-item { padding: 0.85rem 0.5rem; font-size: 0.82rem; gap: 0.45rem; }
  .trust-bar-item:not(:nth-child(3n + 1)) { border-left: 0; }
  .trust-bar-item:nth-child(2n) { border-left: 1px solid var(--border-color); }
  .trust-bar-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .stats-grid { grid-template-columns: 1fr 1fr; }

  .facility-cards-subgrid { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .floating-actions { right: 0.75rem; bottom: 0.75rem; }
  .fab { width: 48px; height: 48px; font-size: 1.2rem; }
}

/* ---------- ≤360: very small phones ---------- */
@media (max-width: 360px) {
  .brand-logo img { height: 36px; max-width: 130px; }
  .header-actions { gap: 0.6rem; }
  .header-emergency .bi { width: 38px; height: 38px; }
  #doctorGrid.grid-4 { grid-template-columns: 1fr; }
}

/* ---------- WP admin bar offsets ---------- */
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}

/* ---------- Large screens ---------- */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
  .hero { min-height: 760px; }
}

/* ---------- Print ---------- */
@media print {
  .topbar,
  .site-header,
  .mobile-drawer,
  .drawer-backdrop,
  .footer-cta-strip,
  .floating-actions,
  .carousel-btn,
  .carousel-dots { display: none !important; }

  .hero { min-height: auto; color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}