/* ============================================================
   mobile.css — Shared mobile responsiveness layer
   Assistiv Cloud · loaded last so it overrides page styles
   Targets phone-width viewports (<=640px) and tablet (<=820px)
   Fixes the common patterns that break across pages:
     - multi-column footers crushing on small screens
     - fixed-width inline grids
     - tables overflowing horizontally
     - sticky nav badge overflow
   ============================================================ */

/* ---- Universal guards ---- */
* { /* prevent long unbroken strings forcing horizontal scroll */ }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; height: auto; }

/* ============================================================
   TABLET AND BELOW  (<= 820px)
   ============================================================ */
@media (max-width: 820px) {
  /* Generic two/three/four-column grids collapse to one */
  .brief-grid,
  .brief-grid-3 { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PHONE AND BELOW  (<= 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* ---- Footer: the most widespread offender ----
     The footer uses inline grid-template-columns:240px 1fr and
     repeat(4,1fr) with a 4rem gap. Force everything to stack. */
  footer > div { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  footer > div > div[style*="grid-template-columns:240px 1fr"],
  footer > div > div[style*="grid-template-columns: 240px 1fr"],
  footer [style*="grid-template-columns:240px 1fr"],
  footer [style*="grid-template-columns: 240px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  footer [style*="grid-template-columns:repeat(4,1fr)"],
  footer [style*="grid-template-columns: repeat(4, 1fr)"],
  footer [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  /* very narrow: footer link columns go single */
  /* (kept at 2-up by default for scannability) */

  /* ---- Tables: wrap in horizontal scroll instead of overflowing ---- */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* Tables explicitly built to be full width keep their layout but scroll */
  .trend-table, .signal-table, .data-table { min-width: 0; }

  /* ---- Sticky nav: allow it to shrink, hide non-essential bits ---- */
  nav[style*="position:sticky"],
  nav[style*="position: sticky"] {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  /* ---- Generic inline two-column grids stack ---- */
  .grid-2, .two-col, .split-2,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Heat strips / many-column micro grids ---- */
  .heat-strip { grid-template-columns: repeat(4, 1fr) !important; }

  /* ---- Wrap section padding tighter on phones ---- */
  .wrap, .section-inner, .container { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* ---- Reduce oversized hero / display type so it fits ---- */
  h1 { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; line-height: 1.15 !important; }

  /* ---- Cards and panels full width ---- */
  .card, .panel, .brief-card { width: auto !important; }

  /* ---- Flex rows that should wrap ---- */
  .stat-row, .badge-row, .meta-row { flex-wrap: wrap !important; }
}

/* ============================================================
   SMALL PHONE  (<= 400px)
   ============================================================ */
@media (max-width: 400px) {
  footer [style*="grid-template-columns:repeat(4,1fr)"],
  footer [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}