/* sports-mobile.css — responsive behaviour for tablet and phone (Android + iOS). */

/* Never allow horizontal scroll; respect iOS safe areas. */
html, body { max-width: 100%; overflow-x: hidden; }
.sports-shell { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
.sports-topbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

/* Mobile nav menu (hidden desktop nav -> tap the menu button) */
.sports-nav-toggle { display: none; }
.sports-board-grid, .board-grid { }

@media (max-width: 1180px) {
  .sports-snapshot { grid-template-columns: 1fr 1fr; }
  .sports-explore-grid { grid-template-columns: repeat(3, 1fr); }
  .wc-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .sports-topnav {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--s-nav); padding: 8px 0 14px; border-top: 1px solid rgba(255,255,255,.08);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease; z-index: 49; max-height: 80vh; overflow: auto;
  }
  .sports-topnav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .sports-topnav a { padding: 14px 24px; font-size: 16px; width: 100%; }
  .sports-topnav a.active::after { left: 24px; right: auto; bottom: 8px; width: 22px; }
  .sports-nav-tools button { font-size: 22px; padding: 8px; }   /* bigger tap target */
  .sports-nav-toggle { display: inline-flex; }
}

@media (max-width: 820px) {
  .sports-hero { padding: 36px 24px 80px; }
  .sports-hero::after { opacity: 0.4; }
  .sports-stats { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
  .sports-status-actions { margin-left: 0; width: 100%; }
  .sports-status-actions .sports-button { flex: 1; justify-content: center; }
  .page-hero { padding: 24px 22px 26px; }
}

@media (max-width: 620px) {
  .sports-shell { padding-top: 16px; padding-bottom: 64px; }
  .sports-snapshot { grid-template-columns: 1fr; }
  .sports-explore-grid { grid-template-columns: repeat(2, 1fr); }
  .sports-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sports-stats strong { font-size: 30px; }
  .sports-stats article { padding: 16px 12px; }
  .sports-hero h1 { font-size: clamp(32px, 11vw, 46px); }
  .board-grid { grid-template-columns: 1fr; }
  .sports-section { margin-top: 30px; }
  .sports-section-title { font-size: 19px; }
  /* comfortable tap targets */
  .sports-button, .snap-link, .trend-all, .page-back, .crumbs a { min-height: 38px; display: inline-flex; align-items: center; }
}

@media (max-width: 380px) {
  .sports-stats { grid-template-columns: 1fr 1fr; }
  .sports-hero h1 { font-size: 30px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sports-status-live i { animation: none; }
  .explore-card, .sports-topnav { transition: none; }
}