/* ============================================================
   mobile.css — responsive breakpoints
   Loaded last so it overrides the component styles above.
   ============================================================ */

/* ---- tablet ---- */
@media (max-width: 1000px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .section { padding: 60px 0; }
  .nav-links { display: none; }
  .nav-cta .btn { display: none; }
  .hamburger { display: flex; }
  .license-bar { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-photo { max-width: 380px; margin: 0 auto; }
}

/* ---- mobile: 2-col → carousels / stacks ---- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .commission-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr !important; }
  .why-grid { grid-template-columns: 1fr; }
  .editorial-strip { grid-template-columns: 1fr; }

  /* communities: 2-col on mobile per spec */
  .comm-grid { grid-template-columns: repeat(2, 1fr); }

  /* horizontal swipe carousels */
  .carousel {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * { scroll-snap-align: center; }
  .carousel-dots { display: flex; }

  .review-grid {
    grid-auto-flow: column; grid-auto-columns: 86%;
    grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 16px; padding-bottom: 8px; scrollbar-width: none;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-grid > * { scroll-snap-align: center; }

  .blog-grid {
    grid-auto-flow: column; grid-auto-columns: 86%;
    grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: 16px; scrollbar-width: none;
  }
  .blog-grid::-webkit-scrollbar { display: none; }
  .blog-grid > * { scroll-snap-align: center; }

  .trust-track { gap: 0; }
  .trust-track .sep { display: none; }
  .trust-track span { font-size: 13px; padding: 3px 12px; }

  .yelp-card { padding: 32px 22px; }
  .yelp-card .quote { font-size: 17px; }

  #clients-map, .map-fallback { height: 340px; }
}

@media (max-width: 420px) {
  .comm-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-script { font-size: 38px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}