/* =============================================
   TOPP Performance — Mobile Responsive Styles
   Applies to all pages. Breakpoints:
   - 900px: tablet
   - 600px: mobile
   ============================================= */

/* ── NAV ── */
@media (max-width: 900px) {
  .nav { padding: 0 1.5rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex !important; }
}

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ── MOBILE MENU OVERLAY ── */
.mobile-menu {
  display: none;
  position: fixed;
  top: 62px; left: 0; right: 0; bottom: 0;
  background: var(--black);
  z-index: 150;
  flex-direction: column;
  padding: 2rem 2rem;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.2s;
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--white); }
.mobile-menu .mob-book {
  background: var(--pink);
  color: var(--white) !important;
  text-align: center;
  border-radius: 4px;
  padding: 1rem !important;
  margin-top: 1.5rem;
  border-bottom: none !important;
}
.mobile-menu .mob-contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.mobile-menu .mob-contact a {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255,255,255,0.45);
  border-bottom: none;
  padding: 0.3rem 0;
}

/* ── HERO ── */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-left {
    padding: 3rem 1.5rem 2.5rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .hero-right { order: -1; }
  .hero-photo { min-height: 260px !important; }
  .hero-stats-bar { grid-template-columns: 1fr 1fr 1fr !important; }
  .hero-summary-bar { grid-template-columns: 1fr 1fr 1fr !important; }
  .hstat, .hsum { padding: 1rem 0.5rem !important; }
  .hstat-num, .hsum-num { font-size: 1.4rem !important; }
  .hero-name { font-size: 3rem !important; }
  .hero-title { font-size: 2.8rem !important; }
  .hero-tagline-block p { font-size: 0.9rem !important; }
  .hero-pills, .hero-level-pills, .hero-sport-pills, .hero-service-pills { gap: 0.4rem !important; }
  .hero-ctas { flex-direction: column !important; }
  .hero-ctas .btn { text-align: center !important; }
  .hero-location-bar, .hero-reach-bar { flex-wrap: wrap !important; gap: 0.6rem !important; padding: 1rem 1.5rem !important; }
  .loc-divider, .reach-divider { display: none !important; }
  .hero-eyebrow { flex-wrap: wrap !important; gap: 0.4rem !important; }
}

/* ── THREE PILLARS ── */
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr !important; }
  .pillar { padding: 2.5rem 1.5rem !important; }
  .pillar-tagline { font-size: 1.7rem !important; }
}

/* ── SERVICES STRIP (homepage) ── */
@media (max-width: 900px) {
  .services-strip { grid-template-columns: 1fr !important; }
}

/* ── ABOUT SECTION ── */
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr !important; }
  .about-photo-wrap { min-height: 280px !important; }
  .about-content { padding: 2.5rem 1.5rem !important; }
  .qual-list { grid-template-columns: 1fr !important; }
}

/* ── PHILOSOPHY ── */
@media (max-width: 900px) {
  .philosophy { grid-template-columns: 1fr !important; padding: 3rem 1.5rem !important; }
  .phil-three { grid-template-columns: 1fr !important; }
  .drives-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ── SERVICES GRID ── */
@media (max-width: 900px) {
  .services-section { padding: 3rem 1.5rem !important; }
  .coach-services-grid { grid-template-columns: 1fr !important; }
  .svc-card-wide { grid-column: span 1 !important; grid-template-columns: 1fr !important; }
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card-full { grid-column: span 1 !important; grid-template-columns: 1fr !important; }
  .umpire-intro-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .umpire-services-grid { grid-template-columns: 1fr !important; }
  .tab-nav { flex-wrap: wrap !important; width: 100% !important; }
  .tab-btn { flex: 1 !important; font-size: 0.72rem !important; padding: 0.5rem 0.8rem !important; }
}

/* ── WORKSHOPS ── */
@media (max-width: 900px) {
  .workshops-section { padding: 3rem 1.5rem !important; }
  .workshops-categories { grid-template-columns: 1fr !important; }
  .workshops-bespoke { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .workshops-bespoke .btn { width: 100% !important; text-align: center !important; }
}

/* ── TESTIMONIALS ── */
@media (max-width: 900px) {
  .testi-section, .testimonials, .testi-section { padding: 3rem 1.5rem !important; }
  .testi-grid { grid-template-columns: 1fr !important; }
  .testi-card.featured { grid-template-columns: 1fr !important; grid-column: span 1 !important; }
}

/* ── EVENTS ── */
@media (max-width: 900px) {
  .events-section { padding: 3rem 1.5rem !important; }
  .events-layout { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .event-row { grid-template-columns: 50px 1fr !important; }
  .ev-tag { display: none !important; }
}

/* ── CLINICS GRID ── */
@media (max-width: 900px) {
  .clinics-detail { padding: 3rem 1.5rem !important; }
  .clinics-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .clinics-grid { grid-template-columns: 1fr !important; }
}

/* ── REFEREEING ── */
@media (max-width: 900px) {
  .refereeing { grid-template-columns: 1fr !important; padding: 3rem 1.5rem !important; }
  .ref-photo { min-height: 220px !important; order: -1; }
}

/* ── COURSES ── */
@media (max-width: 900px) {
  .courses { padding: 3rem 1.5rem !important; }
  .courses-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ── MASSAGE / FI / ATM / SPORT SECTIONS ── */
@media (max-width: 900px) {
  .massage-section { grid-template-columns: 1fr !important; padding: 3rem 1.5rem !important; }
  .massage-photo { min-height: 240px !important; position: relative !important; top: 0 !important; }
  .fi-section { grid-template-columns: 1fr !important; padding: 3rem 1.5rem !important; }
  .fi-photo { min-height: 220px !important; order: -1; }
  .atm-section { grid-template-columns: 1fr !important; padding: 3rem 1.5rem !important; }
  .atm-photo { min-height: 220px !important; }
  .sport-section { padding: 3rem 1.5rem !important; }
  .sport-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .feldenkrais-intro { padding: 3rem 1.5rem !important; }
  .fi-what-grid { grid-template-columns: 1fr !important; }
  .phil-three { grid-template-columns: 1fr !important; }
  .focus-grid { grid-template-columns: 1fr !important; }
  .suitable-grid { grid-template-columns: 1fr 1fr !important; }
  .quals-section { padding: 3rem 1.5rem !important; }
  .quals-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .qual-list { grid-template-columns: 1fr !important; }
}

/* ── ABOUT PAGE ── */
@media (max-width: 900px) {
  .story-section { grid-template-columns: 1fr !important; padding: 3rem 1.5rem !important; }
  .story-photo { min-height: 240px !important; position: relative !important; top: 0 !important; }
  .timeline-item { grid-template-columns: 55px 18px 1fr !important; gap: 0 0.6rem !important; }
  .timeline-item::before { left: 63px !important; }
  .sport-history { padding: 3rem 1.5rem !important; }
  .sports-grid { grid-template-columns: 1fr 1fr !important; }
  .connect-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
@media (max-width: 600px) {
  .sports-grid { grid-template-columns: 1fr !important; }
}

/* ── SECTION GENERAL PADDING ── */
@media (max-width: 900px) {
  section { padding: 3rem 1.5rem !important; }
  .book-cta { padding: 4rem 1.5rem !important; }
  .book-cta::before { font-size: 8rem !important; }
  .book-cta-heading { font-size: 2.5rem !important; }
  .contact-strip { padding: 1rem 1.5rem !important; gap: 1rem !important; flex-direction: column !important; text-align: center; }
  footer { padding: 3rem 1.5rem 1.5rem !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .footer-bottom { flex-direction: column !important; gap: 0.5rem !important; text-align: center; }
  .footer-socials { justify-content: center !important; }
}

/* ── SECTION HEADINGS ON MOBILE ── */
@media (max-width: 600px) {
  .section-heading { font-size: 1.8rem !important; }
  .hero-name { font-size: 2.4rem !important; }
  .hero-title { font-size: 2.2rem !important; }
  .nav { padding: 0 1rem !important; }
  .nav-logo { font-size: 1.2rem !important; }
}

/* ── PHOTO GALLERY ── */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── SPORT BREADTH STRIP ── */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── QUAL GRID ON ABOUT ── */
@media (max-width: 900px) {
  .qual-grid { grid-template-columns: 1fr !important; }
  .qual-list { grid-template-columns: 1fr !important; }
  .highlights-list { gap: 0.5rem !important; }
  .drives-moments { gap: 2px !important; }
  .connect-channels { gap: 0.5rem !important; }
  .connect-services { gap: 0.5rem !important; }
  .phil-values { gap: 2px !important; }
}

/* ── HERO STATS ── */
@media (max-width: 600px) {
  .hero-stats-bar { grid-template-columns: 1fr !important; }
  .hero-summary-bar { grid-template-columns: 1fr !important; }
  .hstat, .hsum { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
}

/* ── INLINE SPORT BREADTH (about page inline styles) ── */
@media (max-width: 900px) {
  .sport-breadth-row { grid-template-columns: 1fr 1fr !important; }
}


/* ── PHOTO RATIO MOBILE FIX ── */
@media (max-width: 900px) {
  [style*="grid-template-columns: 3fr 1fr"],
  [class*="hero"],
  .story-section,
  .massage-section,
  .fi-section,
  .atm-section,
  .refereeing,
  .about {
    grid-template-columns: 1fr !important;
  }
}