/* ================================================================
   CD RESTOP — Global Responsive Fixes
   Supplements per-page inline styles with missing breakpoints
   ================================================================ */

/* ── TABLET (max-width: 960px) ── */
@media (max-width: 960px) {
  /* Index: why-grid and other 3+ col grids should go 2-col */
  .why-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .how-timeline {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px;
  }
  .locations-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .testimonials-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Reduce padding globally on tablet */
  section {
    padding-left: 16px;
    padding-right: 16px;
  }
  .container {
    padding: 0 20px;
  }
}

/* ── MOBILE (max-width: 700px) ── */
@media (max-width: 700px) {
  /* -- Typography minimums -- */
  body {
    font-size: 14px !important;
    line-height: 1.6;
  }
  h1, .hero-title, .pricing-hero h1, .calc-hero h1 {
    font-size: 24px !important;
    line-height: 1.2;
  }
  h2, .section-title, .cta-title {
    font-size: 22px !important;
  }
  h3 {
    font-size: 18px !important;
  }

  /* -- Touch targets: all interactive elements min 44px -- */
  a, button, input[type="submit"], input[type="button"],
  .btn-gold, .btn-glass, .btn-ghost, .btn-nav-login, .btn-nav-register,
  .nav-cta-login, .nav-cta-start, .role-tab, .role-card,
  select, .form-group input, .form-group select, .form-group textarea {
    min-height: 44px;
  }
  .mobile-menu a, .mobile-nav-overlay a, .nav-mobile-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* -- Navbar: ensure hamburger shows, links hide -- */
  .nav-links, .nav-actions, .nav-right {
    display: none !important;
  }
  .hamburger, .nav-mobile-toggle {
    display: flex !important;
  }

  /* -- Hero: single column, reduced sizes -- */
  .hero .container {
    flex-direction: column !important;
    gap: 32px;
  }
  .hero-content, .hero-visual {
    flex: none !important;
    max-width: 100% !important;
    width: 100%;
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .hero-buttons .btn-gold,
  .hero-buttons .btn-glass {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* -- Cards: single column, full width -- */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 20px;
  }
  .pricing-card.featured {
    transform: none !important;
    order: -1;
  }
  .why-grid,
  .how-timeline,
  .locations-grid,
  .testimonials-grid,
  .cta-paths {
    grid-template-columns: 1fr !important;
  }

  /* -- Calculator: stack form + results -- */
  .calc-wrapper {
    grid-template-columns: 1fr !important;
    padding: 0 16px;
  }
  .results-panel {
    position: static !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* -- Login/Register: full width card with proper padding -- */
  .login-card {
    max-width: 100% !important;
    padding: 0 20px 24px !important;
    border-radius: 20px !important;
    margin: 0 8px;
  }
  .reg-card {
    max-width: 100% !important;
    padding: 0 18px 22px !important;
    border-radius: 20px !important;
    margin: 0 8px;
  }
  .login-page,
  .register-page {
    padding: 80px 12px 24px !important;
  }
  .social-btns {
    flex-direction: column;
  }
  .role-cards {
    grid-template-columns: 1fr !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  /* -- Footer: single column -- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  /* -- Comparison table: horizontal scroll -- */
  .comp-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* -- Reduce section padding -- */
  .container {
    padding: 0 16px;
  }
}

/* ── SMALL MOBILE (max-width: 400px) ── */
@media (max-width: 400px) {
  h1, .hero-title {
    font-size: 22px !important;
  }
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-stat-number {
    font-size: 20px !important;
  }
  .login-card,
  .reg-card {
    margin: 0 4px;
    padding: 0 14px 20px !important;
  }
}

/* ── ACCESSIBILITY: ensure no horizontal scroll ── */
html, body {
  overflow-x: hidden;
}
img, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}