/* =========================================================
   TURF24×7 — Responsive Layer
   Mobile-first base lives in style.css; this file adjusts
   layout at wider breakpoints. Loaded after style.css.
   ========================================================= */

/* ---------- ≥560px : large phones ---------- */
@media (min-width: 560px) {
  .sports-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ≥768px : tablets ---------- */
@media (min-width: 768px) {
  .hero h1 { max-width: 18ch; }
  .search-grid { grid-template-columns: repeat(2, 1fr); }
  .turf-scroller { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-row { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .slot-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid.two-col { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1.2fr 2fr; }
}

/* ---------- ≥1024px : small laptops / large tablets ---------- */
@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .hamburger, .mobile-nav { display: none; }

  .search-panel { padding: 2rem 2.4rem; }
  .search-grid { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
  .search-grid .btn { height: 52px; }

  .sports-grid { grid-template-columns: repeat(6, 1fr); }
  .turf-scroller { grid-template-columns: repeat(3, 1fr); }

  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .steps-row { grid-template-columns: repeat(4, 1fr); }

  .sport-photo-card { flex-basis: 260px; }

  .community-layout { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .community-layout.reverse { grid-template-columns: 1fr 1.1fr; }
  .community-layout.reverse .community-media { order: 2; }

  .product-hero .container { grid-template-columns: 1.1fr 1fr; text-align: left; }
  .feature-row { grid-template-columns: 1fr 1fr; }
  .feature-row.reverse .feature-visual { order: -1; }
  .showcase-grid { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
  .showcase-grid .showcase-item:nth-child(2) { margin-top: -2.5rem; }
  .showcase-grid .showcase-item:nth-child(3) { margin-top: 3.5rem; grid-column: auto; max-width: none; margin-inline: 0; }

  .app-promo { grid-template-columns: 1fr 0.9fr; }
  .owner-layout { grid-template-columns: 1fr 0.9fr; }

  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-2.wide-left { grid-template-columns: 1.6fr 1fr; }

  .page-hero h1 { font-size: 3.4rem; }
}

/* ---------- ≥1280px : desktop ---------- */
@media (min-width: 1280px) {
  .turf-scroller { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ≤400px : smallest phones, tighten spacing ---------- */
@media (max-width: 400px) {
  :root { --gutter: 1.1rem; }
  .hero-ctas .btn, .final-cta-row .btn { flex: 1 1 100%; }
  .store-buttons .store-btn { flex: 1 1 100%; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Landscape phones: keep hero from being too tall ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 130vh; }
}