/* ============================================================
   GLOBAL MOBILE RESPONSIVE SAFETY NET
   Loaded AFTER all other CSS. Complements the per-template
   @media rules (home/article/match/player/news already collapse
   their own sidebars) — this only fills gaps and guarantees no
   horizontal overflow on phones.
   ============================================================ */

/* 1. Never let the page scroll sideways.
   `clip` is used in preference to `hidden` because it does NOT
   create a scroll container, so it won't break position:sticky
   (e.g. the sidebar skyscraper). `hidden` is the fallback for
   older browsers. */
html { overflow-x: hidden; overflow-x: clip; }
html, body { max-width: 100%; }

/* 2. Media & embeds can never exceed their container */
img, video, iframe, embed, object, canvas, svg { max-width: 100%; }
img, video { height: auto; }

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Trim oversized horizontal padding on the big page containers */
  .max-w-7xl, .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Wide tables scroll within their own box instead of stretching the page */
  table { max-width: 100%; }
}

/* ── Phone ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Collapse explicit 2-column inline grids to a single column
     (excludes 3-column "1fr 1fr 1fr" which is handled below) */
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }

  /* 3 / 4 column blocks → 2 columns (keeps stat tiles readable,
     instead of one tall stack) */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Collapse any remaining fixed-sidebar grids (1fr 300px etc.)
     that don't already have their own rule */
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns:1fr 260px"],
  [style*="grid-template-columns:1fr 220px"] {
    grid-template-columns: 1fr !important;
  }

  /* Class-based content grids that lack their own mobile rule */
  .news-sec-grid, .contact-info-grid, .art-form-grid,
  .info-grid, .data-grid, .charts-grid, .src-dev-grid {
    grid-template-columns: 1fr !important;
  }

  /* fixtures day-tab selector: 5 columns is far too tight on a phone,
     turn it into a horizontal-scroll strip showing ~3 days at a time */
  .grid.grid-cols-5 {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid.grid-cols-5::-webkit-scrollbar { display: none; }
  .grid.grid-cols-5 > * { flex: 0 0 34%; }

  /* Long fixed-size headings shouldn't push the layout wider */
  h1, h2, h3 { overflow-wrap: anywhere; word-break: break-word; }

  /* Tighten very large clamp() vertical paddings a touch on phones */
  .section { padding-top: 36px; padding-bottom: 36px; }
}