/* mobile-fixes.css — Shared mobile responsiveness fixes for all pages */
/* Add to any page: <link rel="stylesheet" href="/mobile-fixes.css"> */
/* For city pages: <link rel="stylesheet" href="../mobile-fixes.css"> */

/* ===== GLOBAL OVERFLOW FIX ===== */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* ===== TABLET (1024px) ===== */
@media (max-width: 1024px) {
  /* Force card grids to 2 columns max */
  .why-grid, .wg-grid, .feature-grid, .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* ===== MOBILE (768px) ===== */
@media (max-width: 768px) {
  /* Container padding */
  .container, [class*="container"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Section spacing */
  .section, [class*="section"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Stack ALL card grids to single column */
  .why-grid, .wg-grid, .feature-grid, .cards-grid,
  .use-grid, .steps-grid, .included-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* 2-column grids → single column */
  .leaderboard-grid, .explainer-grid, .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Gallery stays 2-col but tighter */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Form rows stack */
  .form-row, .form-row-3 {
    grid-template-columns: 1fr !important;
  }

  /* Headings scale down */
  h1, .hero h1, [class*="hero"] h1 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }
  h2, .section-title {
    font-size: 1.7rem !important;
  }

  /* Horizontal scroll containers */
  .scroll-row, [class*="scroll"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer stacking */
  .footer-inner, [class*="footer-inner"] {
    flex-direction: column !important;
    text-align: center !important;
  }

  /* Images never overflow */
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Preserve fixed-height logos & badges from the blanket rule above */
  .nav-logo-img { height: 44px !important; width: auto !important; }
  .hero-b-nascar { max-width: 100%; flex-wrap: wrap; }
  .hero-b-nascar img { height: 28px !important; width: auto !important; }
  .hero-b-nascar span { font-size: 0.72rem !important; letter-spacing: 2px !important; }

  /* City page "why" section cards — force single column */
  [class*="why"] > div,
  [class*="feature"] > div {
    display: grid;
    grid-template-columns: 1fr !important;
  }
}

/* ===== SMALL MOBILE (480px) ===== */
@media (max-width: 480px) {
  .container, [class*="container"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .section, [class*="section"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  h1, .hero h1, [class*="hero"] h1 {
    font-size: 1.7rem !important;
    line-height: 1.15 !important;
  }
  h2, .section-title {
    font-size: 1.4rem !important;
  }
  h3 {
    font-size: 1.05rem !important;
  }

  /* Cards less padding */
  [class*="card"], [class*="item"] {
    padding: 20px !important;
  }
  [class*="card-body"], [class*="card"] > div:last-child {
    padding: 16px !important;
  }

  /* Buttons */
  .btn, [class*="btn-"] {
    font-size: 0.9rem !important;
    padding: 12px 22px !important;
  }

  /* Form adjustments */
  .contact-form, [class*="form-wrap"] {
    padding: 18px !important;
  }

  /* Logo row */
  .logos-row img { height: 36px !important; }
  .logos-row { gap: 16px !important; }

  /* Nav logo & NASCAR badge — even smaller on small phones */
  .nav-logo-img { height: 38px !important; width: auto !important; }
  .hero-b-nascar img { height: 22px !important; width: auto !important; }
  .hero-b-nascar span { font-size: 0.65rem !important; letter-spacing: 1.5px !important; }
}