/* ============================================================
   RESPONSIVE.CSS — Mobile-first breakpoints
   Barnet Premier Swim

   Base = mobile (320px+)
   600px  = tablet
   960px  = desktop
   1200px = wide
   ============================================================ */

/* ── TABLET — 600px+ ── */
@media (min-width: 600px) {
  section      { padding: 88px 40px; }
  nav          { padding: 0 40px; }
  .hero        { padding: 90px 40px 64px; }

  .hero-btns            { flex-direction: row; }
  .btn-primary, .btn-wa { flex: 1; }

  .why-grid   { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .times-grid { grid-template-columns: repeat(4, 1fr); }

  .frow       { grid-template-columns: 1fr 1fr; }
  .frow .full { grid-column: 1 / -1; }
  .btn-sub    { width: auto; min-width: 280px; }
  .form-shell { padding: 40px 36px; }

  .map-box { height: 340px; }
}

/* ── DESKTOP — 960px+ ── */
@media (min-width: 960px) {
  section { padding: 108px 64px; }
  nav     { padding: 0 64px; }

  .nav-links { display: flex; }
  .hamburger { display: none; }

  .about-inner { grid-template-columns: 1fr 1fr; gap: 64px; }

  .hero          { min-height: 100vh; justify-content: center; padding: 108px 64px 88px; }
  .hero-inner    { max-width: 680px; }
  .hero-btns     { width: fit-content; }
  .btn-primary,
  .btn-wa        { flex: none; }

  .why-grid { grid-template-columns: repeat(3, 1fr); }

  .how-inner       { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .how-inner .head { margin-bottom: 0; }

  .loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .map-box  { height: 420px; }

  .ft   { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .fl   { flex-direction: row; gap: 24px; }
  .fbot { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ── WIDE — 1200px+ ── */
@media (min-width: 1200px) {
  section { padding: 120px 88px; }
  nav     { padding: 0 88px; }
  .hero   { padding: 108px 88px 96px; }
}