/* Ahana Hospitals — site-wide mobile responsiveness.
   Linked directly in every page's <head> so it applies on first paint
   (not dependent on any DC component hydrating). Overrides the desktop-first
   inline styles on phones/tablets via !important. */

/* Hamburger button is hidden on desktop; shown on mobile below. */
.ah-burger { display: none; }

@media (max-width: 860px) {
  /* ---- Header: swap the spread-out nav for a hamburger ---- */
  .ah-nav      { display: none !important; }
  .ah-phone    { display: none !important; }
  .ah-burger   { display: inline-flex !important; }
  .ah-logo-img { height: 42px !important; }
  .ah-bar      { padding: 12px 18px !important; gap: 12px !important; }

  /* ---- Stack every multi-column grid into a single column ---- */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:360px 1fr"],
  [style*="grid-template-columns:1.3fr 1fr"],
  [style*="grid-template-columns:1.6fr 1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.25fr"],
  [style*="grid-template-columns:1fr 1.15fr"],
  [style*="grid-template-columns:1fr 1.05fr"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* ---- Cap large fixed-width blocks so they can't overflow ---- */
  [style*="width:1120px"], [style*="width:920px"], [style*="width:900px"],
  [style*="width:860px"], [style*="width:820px"], [style*="width:760px"],
  [style*="width:720px"], [style*="width:700px"], [style*="width:680px"],
  [style*="width:620px"], [style*="width:600px"], [style*="width:560px"],
  [style*="width:540px"], [style*="width:520px"], [style*="width:480px"],
  [style*="width:460px"] {
    max-width: 100% !important;
  }

  /* ---- Tame the largest section paddings ---- */
  [style*="padding:68px 56px"], [style*="padding:52px 56px"],
  [style*="padding:48px 52px"], [style*="padding:44px 48px 40px"],
  [style*="padding:36px 34px"], [style*="padding:32px 34px"] {
    padding: 28px 22px !important;
  }

  img { max-width: 100%; }
  html, body { overflow-x: clip; }
}
