/* Game Winner Athletics - phone and tablet rules.
   ---------------------------------------------------------------------------
   The pages are built from inline styles with no breakpoints, so everything
   here is scoped inside a media query and overrides by element, not by class.
   Desktop is untouched.

   Measured on a 390px viewport before this file existed:
   - nav > div (the links row) rendered 498-567px wide with its right edge at
     669-738px. The page wrapper sets overflow-x:hidden, so instead of
     scrolling, "Contact Us" and the CTA were simply CUT OFF and unreachable.
     That was the most serious problem on the site: no way to navigate.
   - nav links were 16-32px tall, well under the 44px a fingertip needs.
   - form labels rendered at 10px.
*/

@media (max-width: 860px) {

  /* ── Navigation ────────────────────────────────────────────────────────
     Let the bar wrap instead of running off the screen. The links move to
     their own full-width row underneath the logo, where all of them fit. */
  nav {
    flex-wrap: wrap !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    row-gap: 4px !important;
  }

  /* The links row. Only applies where the nav actually has one - the
     checkout and free-trial pages carry two plain links and are unaffected. */
  nav > div {
    width: 100%;
    flex-wrap: wrap !important;
    /* 10px, not 16px: the nav is sticky, so every wrapped row costs 44px of
       every screen for the whole visit. At 16px the links needed four rows
       (213px tall); at 10px they pack into three (169px) with no crowding and
       nothing overflowing. */
    column-gap: 10px !important;
    row-gap: 0 !important;
    justify-content: flex-start !important;
  }

  /* A dropdown panel is positioned relative to its own wrapper, so it must not
     be stretched to the full row like the links container above. */
  nav > div div[style*="position: absolute"] { width: auto; }

  nav a {
    min-height: 44px;
    min-width: 44px;          /* the Instagram icon link was 18px wide */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Buttons and block-level links everywhere else.
     min-height alone is deliberate: an inline <a> inside a paragraph ignores
     min-height, so body copy is untouched, while anything already laid out as
     a block or a flex item (the "Explore the Club" style links) grows. */
  a[href], button { min-height: 44px; }

  /* The programs filter pills are plain inline anchors, so they DO need a
     display change to take a height. inline-flex keeps them on one row and
     looks the same - they already carry their own padding and border. */
  a[href^="#"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The nav is sticky; on a short phone screen a wrapped bar plus a dropdown
     should never own more than a third of the viewport. */
  nav { max-height: 33vh; overflow-y: auto; }

  /* ── Readability ───────────────────────────────────────────────────────
     Form labels at 10px are the ones that matter: they sit next to the input
     a parent is filling in on a phone. Nudged to 12.5px, which is still
     visually a small label but is legible. */
  label { font-size: 12.5px !important; }
}

/* ── Grids ────────────────────────────────────────────────────────────────
   Selectors match the SPACED form ("repeat(4, 1fr)") because these pages are
   rendered by support.js and the browser re-serialises a style attribute set
   from JS - the unspaced source form never appears in the live DOM.

   Only the column sets that measured as damaged are listed. Grids that read
   fine at a given width are deliberately left alone.

   Each pattern is listed TWICE, spaced and unspaced, on purpose. The .dc.html
   pages are rendered by support.js so the browser re-serialises their style
   attributes with spaces ("1.4fr 1fr"); the plain .html pages (checkout,
   membership, camps, training) are static, so theirs keep the source form
   ("1.4fr 1fr" written as authored). Matching only one form silently misses
   half the site.

   Prefix rules cover their longer relatives: "1.4fr 1fr" also matches
   "1.4fr 1fr 1fr" and "1.4fr 1fr 1.4fr 1.2fr"; "1fr 1fr" also matches
   "1fr 1fr 1fr". That is intended - all of them go to one column on a phone. */

/* The hero is the one grid still broken at tablet width: its text column fell
   to ~170px, so the h1 ("Maximize Your Full Potential.") overflowed its column
   and ran underneath the photo. */
@media (max-width: 900px) {
  header#top[style*="grid-template-columns: 1.12fr 0.88fr"],
  header#top[style*="grid-template-columns:1.12fr 0.88fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  /* Every fractional multi-column grid in the site goes to a single column. */
  [style*="grid-template-columns: 1fr 1fr"],   [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"], [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns: 1.4fr 0.8fr"],[style*="grid-template-columns:1.4fr 0.8fr"],
  [style*="grid-template-columns: 1.35fr .85fr"],[style*="grid-template-columns:1.35fr .85fr"],
  [style*="grid-template-columns: 1.3fr 1fr"], [style*="grid-template-columns:1.3fr 1fr"],
  [style*="grid-template-columns: 1.25fr 0.95fr"],[style*="grid-template-columns:1.25fr 0.95fr"],
  [style*="grid-template-columns: 1.12fr 0.88fr"],[style*="grid-template-columns:1.12fr 0.88fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],[style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],[style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns: 0.92fr 1.08fr"],[style*="grid-template-columns:0.92fr 1.08fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Four across becomes two, not one: these are short stat and price cells
     that still read in a pair and would make the page very long stacked. */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Icon-and-text rows: keep both columns, just give the icon less. */
  [style*="grid-template-columns: 120px 1fr"],[style*="grid-template-columns:120px 1fr"] { grid-template-columns: 84px 1fr !important; }
  [style*="grid-template-columns: 150px 1fr"],[style*="grid-template-columns:150px 1fr"] { grid-template-columns: 96px 1fr !important; }
}

/* Wider tap targets for the footer and any pill row, at both phone and
   tablet width. Only the box grows - type and colour are untouched.
   min-width extends the box to the right rather than centring the label, so
   nothing in the footer columns shifts. */
@media (max-width: 1024px) {
  footer a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  button { min-width: 44px; }
}