/* ============================================================================
   Mobile responsiveness fixes (added post-migration, 2026-06).
   The custom homepage sections use CSS grids with no mobile breakpoint, so on
   phones/tablets they keep desktop column widths (content cut off / crammed /
   overlapping). These rules stack them to a single column on small screens.
   Desktop layout (>980px) is completely unaffected.
   ========================================================================== */

@media only screen and (max-width: 980px) {
  /* 2-column (and fixed-width) content sections -> single column */
  .hero-inner,
  .mb-grid,
  .calc-grid,
  .loc-grid,
  .seo-grid,
  .svc-grid,
  .route-grid,
  .hc-stats,
  .gs-highlight,
  .hood-cols,
  .why-grid,
  .route-imgs {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* 4-up stat / spec rows -> 2x2 (still readable, avoids 4 tiny columns) */
  .hero-stats,
  .spec-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Guard: prevent any grid/flex child from forcing horizontal overflow when stacked */
  .hero-inner > *,
  .mb-grid > *,
  .calc-grid > *,
  .loc-grid > *,
  .seo-grid > *,
  .svc-grid > *,
  .route-grid > *,
  .gs-highlight > *,
  .hood-cols > *,
  .why-grid > *,
  .route-imgs > * {
    min-width: 0;
    max-width: 100%;
  }
}