/* ===== TABLET (max 1024px) ===== */
@media (max-width: 1024px) {
  .trainers-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .about-grid { gap: 48px; }
}

/* ===== MOBILE NAV ===== */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .nav-links {
    position: fixed; top: 0; right: -100%; width: 280px; height: 100vh;
    background: var(--bg-darker); flex-direction: column; justify-content: center;
    gap: 32px; padding: 40px; transition: right 0.35s ease;
    box-shadow: -8px 0 32px rgba(0,0,0,0.5); z-index: 999;
  }
  .nav-links.open { right: 0; }
  .nav-links a { font-size: 1rem; }

  /* HERO */
  .hero-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .hero-cta { flex-direction: column; align-items: center; }

  /* STATS */
  .stats-container { grid-template-columns: repeat(2, 1fr); }

  /* ABOUT */
  .about-grid { grid-template-columns: 1fr; gap: 60px; }
  .about-content { padding-left: 0; }
  .about-badge { right: 0; bottom: -16px; }

  /* RECOVERY */
  .recovery-grid { grid-template-columns: 1fr; gap: 48px; }

  /* CLASSES */
  .classes-grid { grid-template-columns: repeat(2, 1fr); }

  /* TRAINERS */
  .trainers-grid { grid-template-columns: repeat(2, 1fr); }

  /* MEMBERSHIP */
  .plans-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .plans-grid-5 .plan-card:nth-child(4) { grid-column: auto; }
  .plans-grid-5 .plan-card:nth-child(5) { grid-column: 1 / 3; }

  /* CONTACT */
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }

  /* FOOTER */
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== SMALL MOBILE (max 480px) ===== */
@media (max-width: 480px) {
  .section { padding: 72px 0; }
  .classes-grid { grid-template-columns: 1fr; }
  .trainers-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .plans-grid-5 { grid-template-columns: 1fr; }
  .plans-grid-5 .plan-card:nth-child(5) { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats-container { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stat-number { font-size: 2rem; }
  .hero-scroll-hint { display: none; }
}
