/* === v7: Mobile-only stylesheet (desktop/iPad unchanged) === */
/* This file intentionally contains ONLY mobile rules to avoid any effect on desktop/tablet. */

@media (max-width: 768px) {
  /* General mobile safety */
  img, video, canvas, svg { max-width: 100%; height: auto; }
  pre, code, table, .table, .datatable, .codeblock { display: block; overflow-x: auto; }

  /* Top bar declutter + CTA sizing */
  header, .navbar, .nav, .nav-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .nav-inner { padding: 6px 10px !important; }
  .brand { display: flex; align-items: center; gap: 8px; }
  .brand strong { font-size: 15px !important; }
  .brand span { font-size: 10px !important; }
  .brand small, .brand .tag, .brand .sub, .brand .subtitle { display: none !important; }
  .cta, .nav .cta, .cta.join { font-size: 13px !important; padding: 6px 10px !important; line-height: 1.1 !important; border-width: 1.5px !important; }

  /* MWE badge background exactly on the mark only */
  .brand .mark {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    padding: 2px 6px !important;
    height: auto !important;
    min-height: 30px;
    width: auto !important;
    background-color: #E10600 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    border-radius: 4px !important;
    white-space: nowrap;
  }

  /* Marquee readability */
  .strip { padding: 6px 0 !important; }
  .marquee .content { font-size: 14px !important; padding: 6px 12px !important; gap: 20px !important; line-height: 1.3 !important; }
  .marquee, .strip { overflow: hidden; height: auto !important; }

  /* Schedule: single smooth horizontal scroll */
  #schedule { overflow: visible !important; }
  #schedule .card, #schedule .table-wrap, #schedule .table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  #schedule table { width: 100%; min-width: 640px; border-collapse: collapse; }
  #schedule th, #schedule td { padding: 8px 10px !important; font-size: 14px !important; white-space: nowrap; }
  #schedule td:nth-last-child(-n+2), #schedule th:nth-last-child(-n+2) { white-space: normal; }
  #schedule thead { position: static !important; }

  /* Back buttons sizing */
  .nav .cta, .cta.back, a.cta[href*="#coaches"], a.cta[href*="#roster"] {
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-width: 1.5px !important;
  }

  /* Reels & Photos bigger on phones */
  .gallery, .photos, .reels, .media-grid { display: grid; grid-template-columns: 1fr !important; gap: 12px !important; }
  .gallery img, .photos img, .media-grid img { width: 100% !important; height: auto !important; }
  .reels iframe, .reels video, .media-grid iframe, .media-grid video { width: 100% !important; height: auto !important; aspect-ratio: 16/9; }

  /* Mobile padding so text doesn't hug edges */
  section, .section, .container, .wrapper, .content { 
    padding-left: 16px !important; 
    padding-right: 16px !important; 
    box-sizing: border-box; 
  }
}

/* === v9: iPad + mobile header refinements === */

/* iPad/tablet range: push nav content inward (not background bar) */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-inner, .nav .container, header .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Mobile: add breathing room between stacked brand text and button */
@media (max-width: 768px) {
  .nav-inner { flex-direction: column; align-items: flex-start; gap: 6px !important; }
  .brand { margin-bottom: 4px !important; }
  .cta.join { margin-top: 4px !important; }
}

/* === v10: refine header spacing === */

/* Mobile: keep row layout, add spacing between brand text and join button */
@media (max-width: 768px) {
  .nav-inner { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
  .brand { margin-right: 12px !important; }
  .cta.join { margin-left: auto !important; }
}

/* iPad (tablet widths): add inner padding so content isn't flush to edges */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-inner, .nav .container, header .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}