/* ================================================================
   RESPONSIVE — Breakpoints & Mobile Overrides
   ================================================================ */

@media (max-width: 1024px) {
  .g-3 { grid-template-columns: 1fr 1fr !important; }
  .g-4 { grid-template-columns: 1fr 1fr !important; }
  .clinic-lay { grid-template-columns: 1fr !important; }
  .dash-lay { grid-template-columns: 1fr !important; }
  .dash-side { display: none; }

  /* Clinic profile: stack sidebar + main into single column */
  .clinic-sidebar { order: -1; }
  .grid[style*="1fr 340px"] { grid-template-columns: 1fr !important; }
  .grid[style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Map: stack sidebar below main content on tablet */
  #clinic-map { height: 260px !important; min-height: 200px !important; }
  #search-map { height: 400px !important; min-height: 300px !important; }

  /* Dashboard tables: enable horizontal scroll on tablet */
  div[style*="overflow:hidden"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }

  /* Patient pages responsive grids */
  #page-patient-home .grid[style*="repeat(4,1fr)"],
  #page-treatments .grid[style*="repeat(2,1fr)"],
  #page-browse-by-treatment .grid[style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Treatment detail: related grid to 2-col */
  #related-treatments-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .burger-btn { display: flex; }
  #nav-write-review { display: none !important; }
  #nav-claim { display: none !important; }
  #nav-signin { display: none !important; }

  /* Map: adjust for mobile */
  #clinic-map { height: 200px !important; min-height: 180px !important; }
  #search-map { height: 350px !important; min-height: 280px !important; }

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

  .bento-g { grid-template-columns: 1fr !important; }

  .hero-acts {
    flex-direction: column;
    align-items: center;
  }

  .footer-g { grid-template-columns: 1fr 1fr !important; }
  .stats-g  { grid-template-columns: 1fr 1fr !important; }
  .pricing-g { grid-template-columns: 1fr !important; }

  .t-display { font-size: clamp(40px, 10vw, 64px); }
  .t-hero    { font-size: clamp(32px, 8vw, 48px); }

  .section { padding: clamp(56px, 10vw, 100px) 0; }

  /* Tighter card padding on mobile */
  .bento { padding: clamp(24px, 5vw, 36px); min-height: 240px; }
  .gradient-card-inner { padding: clamp(24px, 5vw, 36px); }

  /* Hide scroll indicator on mobile */
  [style*="scrollDown"] { display: none; }

  /* Patient pages responsive grids */
  #page-patient-home .grid[style*="repeat(4,1fr)"],
  #page-patient-home .grid[style*="repeat(3,1fr)"],
  #page-patient-home .grid[style*="repeat(5,1fr)"],
  #page-treatments .grid[style*="repeat(2,1fr)"],
  #page-emergency .grid[style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Treatment detail: related grid + hero buttons stack on mobile */
  #related-treatments-grid { grid-template-columns: 1fr !important; }
  #page-treatment .flex[style*="gap:12px"] { flex-direction: column; }
  #page-treatment .flex[style*="gap:12px"] .btn { width: 100%; text-align: center; }

  /* Country selector: chips → dropdown on mobile */
  .country-chips-row { display: none !important; }
  .country-select-row { display: block !important; }

  /* Stack search bars on mobile + thinner inputs — ALL pages */
  #page-search .flex.gap-3,
  #page-patient-home .flex.gap-3,
  #page-emergency .flex.gap-3 {
    flex-direction: column;
    gap: 8px !important;
  }
  #page-search .input-lg,
  #page-patient-home .input-lg,
  #page-emergency .input-lg,
  #page-write-review .input-lg,
  #page-login .input-lg {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 12px;
  }
  #page-search .btn-primary,
  #page-patient-home .btn-primary,
  #page-emergency .btn-primary {
    padding: 12px 24px !important;
    font-size: 15px !important;
  }

  /* Clinic profile: photo grid to 2-col, team to 1-col on mobile */
  .grid[style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  .grid[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  .grid[style*="1fr 340px"] { grid-template-columns: 1fr !important; }

  /* Search result cards: stack vertically on mobile */
  .search-result-card .flex.justify-between {
    flex-direction: column;
    gap: 12px;
  }
  .search-result-card .text-right {
    text-align: left !important;
    min-width: unset !important;
  }

  /* Dashboard tables: make parent scrollable on mobile */
  div[style*="overflow:hidden"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }

  /* Audience bar text smaller on mobile */
  .audience-bar {
    font-size: 10px;
  }
  .audience-tab {
    padding: 0 12px;
  }
}

@media (max-width: 480px) {
  /* Hide ambient glows on small screens for performance */
  .glow-orb { display: none; }

  .footer-g { grid-template-columns: 1fr !important; }
  .stats-g  { grid-template-columns: 1fr !important; }

  /* Patient home responsive grid for browse by country */
  #page-patient-home .grid[style*="repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Photo grid to single column on small phones */
  .grid[style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

  /* Stat cards to 2-col on small phones */
  .g-4[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Map: smaller on tiny screens */
  #clinic-map { height: 180px !important; min-height: 160px !important; }
  #search-map { height: 300px !important; min-height: 250px !important; }
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rv, .rv-scale, .rv-left, .rv-right, .rv-clip, .rv-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .split-line .word {
    transform: none !important;
  }
}