/* Luminara — responsive.css
   Mobile overrides for screens ≤ 768px
   Uses !important to override inline styles throughout the site */

@media (max-width: 768px) {

  body { overflow-x: hidden; }

  /* ── Navigation ── */
  nav {
    padding: 0 16px !important;
    height: 56px !important;
  }
  nav > div { gap: 8px !important; }
  /* Hide all nav links except the Schedule button (last child) */
  nav > div > a:not(:last-child) { display: none !important; }

  /* ── Page hero banners (dark top sections) ── */
  .page-hero {
    padding: 40px 20px !important;
  }
  .page-hero h1 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }

  /* ── Homepage hero ── */
  .hero-section { min-height: 65vh !important; }
  .hero-text {
    padding: 0 20px 80px !important;
    max-width: 100% !important;
  }
  .hero-text h1 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
  .hero-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Homepage about (3-col fixed widths) ── */
  .home-about {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .home-about > div:first-child { min-height: 260px !important; }

  /* ── 5-col services grid on homepage ── */
  .g5 { grid-template-columns: 1fr 1fr !important; }

  /* ── Typography ── */
  h1 { font-size: 34px !important; line-height: 1.15 !important; }
  h2 { font-size: 24px !important; line-height: 1.2 !important; }
  blockquote { font-size: 18px !important; }

  /* ── General section padding ── */
  .s { padding: 40px 20px !important; }

  /* ── 2-column grids → single column ── */
  .g2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── 3-column grids → single column ── */
  .g3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── CTA flex bar (bottom of new-patients, about) ── */
  .cta-bar {
    flex-direction: column !important;
    padding: 32px 20px !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

  /* ── Footer ── */
  footer { padding: 40px 20px 24px !important; }
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ── Safe images ── */
  img { max-width: 100% !important; }

}