/* =========================================================
   MBOBOYU MEDICAL POLYCLINIC — Responsive & media-query rules
   Split out from style.css so breakpoints stay easy to find.
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media (max-width: 980px){
  .top-bar .top-info span:nth-child(2){ display:none; }
  .main-nav{
    position:fixed; inset:74px 16px auto 16px;
    background:var(--surface);
    flex-direction:column;
    align-items:stretch;
    padding:10px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    border:1px solid var(--line);
    display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:14px 16px; }
  .menu-toggle{ display:flex; }
  .nav-actions .btn span.long{ display:none; }
}

@media (max-width: 1080px){
  .why-grid, .services-grid, .dept-grid, .doctors-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-strip, .testi-grid, .article-grid, .values-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-masonry{ columns:2; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:420px; margin:0 auto; }
  .split{ grid-template-columns:1fr; }
  .split.reverse{ direction:ltr; }
}

@media (max-width: 640px){
  .section{ padding:64px 0; }
  .why-grid, .services-grid, .dept-grid, .doctors-grid,
  .stats-strip, .testi-grid, .article-grid, .values-grid, .grid-2, .grid-3{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1px solid rgba(255,255,255,.12); }
  .gallery-masonry{ columns:1; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta-band{ padding:34px; }
  .pathway{ grid-template-columns:1fr; gap:26px; }
  .pathway::before{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
}