/* ============================================================================
   RESPONSIVE.CSS — Rawalpindi MediCare Hospital
   Targeted patch for mobile/tablet gaps NOT already handled by style.css.

   IMPORTANT: style.css already has a complete, working responsive system —
   media queries at 1024px and 768px, plus a slide-in mobile nav that's
   correctly wired to script.js. This file does NOT duplicate any of that.

   It only fixes a handful of spots where individual pages hard-code an
   inline style="..." attribute that has no class hook, so style.css's
   breakpoints can't reach it (inline styles beat external CSS unless the
   external rule uses an attribute selector + !important, which is what
   every rule below does, and only where it's actually needed).

   Load AFTER style.css:
     <link rel="stylesheet" href="assets/css/style.css">
     <link rel="stylesheet" href="assets/css/responsive.css">
   ============================================================================ */

/* ---------- Global safety net ---------- */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }


/* ============================================================================
   TABLET — 1024px and below (matches style.css's own breakpoint)
   ============================================================================ */
@media (max-width: 1024px) {

  /* faculty.php hard-codes style="grid-template-columns: repeat(3, 1fr);"
     directly on .doctor-grid. Being inline, it silently overrides
     style.css's own ".doctor-grid { grid-template-columns: repeat(2,1fr); }"
     rule at this breakpoint — this is the main reason the Doctors page
     wasn't collapsing. !important restores the intended behaviour. */
  .doctor-grid[style*="repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* The CEO/Board card on faculty.php inline-sets grid-column: span 3,
     mirroring how style.css already treats .dept-card-featured. */
  .faculty-doctor-card[style*="grid-column: span 3"] {
    grid-column: span 2 !important;
  }
}


/* ============================================================================
   MOBILE — 768px and below (matches style.css's own breakpoint)
   ============================================================================ */
@media (max-width: 768px) {

  .doctor-grid[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  .faculty-doctor-card[style*="grid-column: span 3"],
  .faculty-doctor-card[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  /* The same CEO card also inline-sets flex-direction: row (avatar next
     to text) — stack it on phones. This exact inline pattern only
     appears on that one card. */
  [style*="flex-direction: row"] {
    flex-direction: column !important;
    text-align: center;
  }

  /* Ad-hoc two-column info blocks hand-coded with no class, so
     style.css's grid rules can't reach them:
       - about.php: CEO section (0.8fr 1.2fr), Our Story (1.1fr 0.9fr),
         Mission & Vision cards (1fr 1fr)
       - departments.php: every "Conditions & Services / Lead Specialist"
         two-column block (1fr 1fr) — six of these
       - footer.php: appointment modal's Email/Phone row (1fr 1fr) */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 0.8fr 1.2fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Page-banner H1s on About / Departments / Faculty are inline
     font-size: 2.75rem (style.css only scales ".hero-section h1" on the
     homepage hero, which is a different element). */
  [style*="font-size: 2.75rem"] { font-size: 1.9rem !important; }
  /* about.php section H2s (CEO name, "Rooted in Compassion...") */
  [style*="font-size: 2.25rem"] { font-size: 1.5rem !important; }
  /* departments.php block H2s + faculty.php CEO name */
  [style*="font-size: 1.85rem"] { font-size: 1.35rem !important; }

  /* departments.php inline-sets padding: 2.5rem on every department
     block with no class hook to reduce it on small screens. */
  .dept-detail-block { padding: 1.5rem !important; }
}


/* ============================================================================
   SMALL PHONES — 480px and below
   style.css has no mobile handling at all for the logo/nav-cta row (no
   wrap, no shrink), and the new logo image is noticeably wider than the
   old heart-pulse icon (~63px vs ~44px). This narrows that pinch point
   between the logo, the "Book Appointment" button, and the hamburger icon.
   ============================================================================ */
@media (max-width: 480px) {
  .logo-icon { height: 40px; }
  .logo-title { font-size: 1.05rem; }
  .logo-subtitle { display: none; }
}