/* ============================================
   Global mobile / tablet responsive overrides
   Applies to all public pages
   ============================================ */

@media (max-width: 767px) {
  /* Typography scale down */
  h1 { font-size: 1.875rem !important; line-height: 1.15 !important; }
  h2 { font-size: 1.5rem !important; line-height: 1.2 !important; }
  h3 { font-size: 1.25rem !important; line-height: 1.25 !important; }
  .font-display { letter-spacing: -0.01em !important; }

  /* Horizontal padding tighter on mobile */
  section { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Full-bleed sections that should not have side padding on mobile */
  section#tooth-video,
  section#hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section#tooth-video .tooth-text { left: 1rem !important; right: auto !important; }
  section#tooth-video .tooth-text.text-right { left: auto !important; right: 1rem !important; }

  /* Any grid with 2+ columns collapses to 1 column by default */
  .grid.grid-cols-2:not(.keep-mobile-grid),
  .grid.grid-cols-3:not(.keep-mobile-grid),
  .grid.grid-cols-4:not(.keep-mobile-grid),
  .grid.grid-cols-6:not(.keep-mobile-grid),
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4,
  .grid.md\:grid-cols-6,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Flex rows that should stack */
  .flex.flex-row,
  .flex.sm\:flex-row,
  .flex.md\:flex-row {
    flex-direction: column !important;
  }

  /* Large heroes: reduce padding */
  section.py-20, section.py-24, section.py-28, section.py-32,
  section.md\:py-24, section.md\:py-28, section.md\:py-32 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Modal / popup card width */
  .modal-overlay > div,
  [class*="max-w-"] {
    max-width: 100% !important;
  }

  /* Tables scroll horizontally */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Hero padding for member portal / account / enroll */
  .relative.min-h-screen { min-height: auto !important; padding: 3rem 1rem !important; }

  /* Sign up / sign in glass card fills width */
  .signup-glass, .glass-card { padding: 1.5rem !important; border-radius: 1.5rem !important; }

  /* Two-col hero → stack */
  .grid.md\:grid-cols-2.gap-12 { gap: 2rem !important; }

  /* Enrollment wizard fields */
  .enroll-wizard .grid.grid-cols-1.md\:grid-cols-2,
  .enroll-wizard .grid.grid-cols-1.md\:grid-cols-3,
  .enroll-wizard .grid.grid-cols-1.md\:grid-cols-4,
  .enroll-wizard .grid.grid-cols-1.lg\:grid-cols-3,
  .enroll-wizard .grid.grid-cols-1.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Carousel slides smaller on mobile */
  .ig-slide, .mp-slide { flex: 0 0 220px !important; }
  .ig-slide img, .mp-slide img { height: 300px !important; }

  /* Provider map shorter on mobile */
  #providerMap, #indexProviderMap { height: 360px !important; }

  /* Portal login: stack left/right panels */
  #sidebar-left, .w-full.lg\:w-1\/2 { width: 100% !important; }

  /* Admin sidebar handled by admin.html's own toggle script */

  /* Footers — reduce vertical padding */
  footer.py-16, footer.py-24, footer.py-28, footer.py-32,
  footer.py-40 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  footer.min-h-screen { min-height: auto !important; }

  /* Make sure images never overflow */
  img { max-width: 100%; height: auto; }

  /* Search bar inputs stack */
  form.flex.gap-3, form.flex.sm\:flex-row.gap-3 { flex-direction: column !important; }

  /* ========================================
     CINEMATIC STATS — mobile fit
     Protect these headings from the global
     h2 { 1.5rem !important } rule above.
     ======================================== */
  #cinematic-stats .cinematic-text-wrapper {
    height: auto !important;
    min-height: 48vh;
    padding: 0 1rem !important;
  }
  #cinematic-stats .cinematic-slide h2 {
    font-size: 3rem !important;
    line-height: 0.95 !important;
  }
  #cinematic-stats .cinematic-slide p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    max-width: 32ch;
    padding: 0 0.5rem;
  }

  /* About page — testimonial portraits: show the whole face, not just the forehead */
  #testimonials .grid > div > img {
    height: 22rem !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Cookie banner — stack buttons cleanly on mobile */
  #cookie-banner .flex.flex-wrap { width: 100%; justify-content: flex-start; }
  #cookie-banner a,
  #cookie-banner button:not(#cookie-close) { flex: 1 1 auto; text-align: center; }
  #cookie-banner #cookie-close { flex: 0 0 auto; }
  #cookie-banner p { font-size: 0.8125rem !important; }

  /* ========================================
     Card paddings scale down on mobile
     ======================================== */
  .p-10, .p-12 { padding: 1.5rem !important; }
  .p-8 { padding: 1.25rem !important; }
  .md\:p-8, .md\:p-10, .md\:p-12 { padding: 1.25rem !important; }

  /* ========================================
     Legal sub-footer — wrap links tightly
     ======================================== */
  footer .flex.flex-wrap.justify-center {
    gap: 0.5rem 1rem !important;
    padding: 0 0.5rem;
  }
  footer .flex.flex-wrap.justify-center a {
    font-size: 12.5px !important;
  }
  footer p.text-sm { font-size: 12.5px !important; line-height: 1.55 !important; }

  /* ========================================
     Enrollment wizard — tighten on mobile
     ======================================== */
  .master-glass { padding: 1.25rem !important; border-radius: 1.5rem !important; }
  .enroll-wizard > .bg-white > .grid,
  .enroll-wizard > .bg-white > div.grid {
    padding: 18px !important;
  }
  .enroll-wizard > .bg-white > h3 {
    padding: 14px 18px !important;
    font-size: 13px !important;
  }
  .enroll-wizard input[type="text"],
  .enroll-wizard input[type="email"],
  .enroll-wizard input[type="tel"],
  .enroll-wizard input[type="number"],
  .enroll-wizard input[type="date"],
  .enroll-wizard select {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }
  .step-dots { gap: 5px; }
  .step-dot { width: 7px; height: 7px; }
  .step-dot.is-active { width: 18px; }
  .enroll-nav-btn { padding: 12px 20px !important; font-size: 13px !important; }
  #enroll-progress-label { font-size: 13px !important; }
  /* Reduce hero spacing above the form */
  .enroll-wizard { max-width: 100% !important; }

  /* ========================================
     Admin dashboard — keep built-in mobile sidebar
     (admin has its own -translate-x-full / toggle)
     ======================================== */
  table { font-size: 12px !important; }
  table th, table td { padding: 8px 10px !important; }

  /* ========================================
     Portal login cards
     ======================================== */
  .w-full.max-w-\[460px\],
  .w-full.max-w-\[420px\],
  .w-full.max-w-\[480px\] {
    max-width: 100% !important;
  }

  /* ========================================
     Portal subpages — smaller grid/card paddings
     ======================================== */
  .grid.grid-cols-2.md\:grid-cols-3,
  .grid.grid-cols-2.md\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Member ID card on portal/account */
  .bg-gradient-to-br .font-display.text-2xl { font-size: 1.25rem !important; }

  /* ========================================
     Fixed navbars — top padding for content
     ======================================== */
  section.pt-24.pb-6 { padding-top: 5rem !important; }

  /* ========================================
     Prevent horizontal overflow site-wide
     ======================================== */
  html, body { overflow-x: hidden !important; }

  /* ========================================
     Plans page cards: full width, centered
     ======================================== */
  .w-\[calc\(25\%-15px\)\],
  .w-\[calc\(50\%-10px\)\] {
    width: 100% !important;
  }

  /* ========================================
     Find-provider map: shorter
     ======================================== */
  .grid.lg\:grid-cols-\[380px_1fr\],
  .grid.lg\:grid-cols-\[420px_1fr\] {
    grid-template-columns: 1fr !important;
  }

  /* ========================================
     Buttons / CTAs stack on mobile
     ======================================== */
  .flex.flex-col.sm\:flex-row > a,
  .flex.flex-col.sm\:flex-row > button { width: 100%; justify-content: center; }

  /* ========================================
     Location / service hero split-layout
     ======================================== */
  .grid.md\:grid-cols-\[1fr_1fr\],
  .grid.lg\:grid-cols-\[1fr_1fr\],
  .grid.lg\:grid-cols-2.gap-16,
  .grid.lg\:grid-cols-2.gap-20 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 4-col grids → 2-col on tablet */
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 3-col → keep 2 on tablet for larger cards */
  .grid.lg\:grid-cols-3.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Admin sidebar stays but narrower */
  aside.w-64 { width: 14rem !important; }
  /* Footer legal links can still wrap on tablet */
  footer .flex.flex-wrap.justify-center { gap: 0.75rem 1.5rem !important; }
}