/* Mobile overrides for templates that ship inline `style=""` grids and fixed
 * font sizes. We use attribute selectors to target the specific inline-style
 * patterns we know exist in templates — that way these rules win over the
 * inline styles without resorting to !important everywhere.
 *
 * Loaded AFTER main.css in base.html so cascade puts these last.
 *
 * Tested viewports: 360px (Android small), 390px (iPhone 13), 768px (iPad).
 */

/* === Global overflow guard — applied at any viewport ====================== */
/* The body should never scroll horizontally. Wide tables scroll WITHIN their
 * `.card` container (overflow-x:auto). Any element with hard-coded width >
 * viewport must be caught here as a safety net. */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  main, section, article, aside {
    max-width: 100%;
  }
}

/* === Mobile (≤ 768px) ===================================================== */
@media (max-width: 768px) {

  /* --- Hero / page two-column grids → stack ----------------------------- */
  /* home_page.html hero (1.15fr 1fr) and dataset row (1.15fr 1fr) */
  div[style*="grid-template-columns:1.15fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* operator_review_page.html main grid (1fr 280px) — sidebar drops below */
  div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* dossier cards on /best/ (80px 1fr 320px) and (64px 1fr 120px) */
  div[style*="grid-template-columns:80px 1fr 320px"],
  div[style*="grid-template-columns:64px 1fr 120px"] {
    grid-template-columns: 1fr !important;
  }
  /* repeat(3,1fr) — "Choose your path", network triplets, etc. */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* repeat(4,1fr) — "From deposit to sealed record" */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 1fr 1fr top-level grids — "What we track / What we do not claim" etc. */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* CRITICAL: grid items have `min-width: auto` by default, which means a
   * single long word or wide child can expand the track WIDER than the
   * grid container itself. Forcing min-width: 0 lets the column shrink to
   * the actual container width. Same for flex children. */
  div[style*="grid-template-columns:1.15fr 1fr"] > *,
  div[style*="grid-template-columns:1fr 280px"] > *,
  div[style*="grid-template-columns:80px 1fr 320px"] > *,
  div[style*="grid-template-columns:64px 1fr 120px"] > *,
  div[style*="grid-template-columns:repeat(3,1fr)"] > *,
  div[style*="grid-template-columns:repeat(4,1fr)"] > *,
  div[style*="grid-template-columns:1fr 1fr"] > * {
    min-width: 0 !important;
    max-width: 100%;
  }
  /* And word-wrap on long unbreakable text (h1, long anchor URLs, etc.) */
  h1, h2, h3, h4, p, a, span, td, th {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* --- Remove right-side borders on cells once stacked ------------------ */
  /* When the grid collapses to 1 column, vertical separators look broken */
  div[style*="grid-template-columns:1fr 280px"] > div[style*="border-right"],
  div[style*="grid-template-columns:80px 1fr 320px"] > div[style*="border-right"],
  div[style*="grid-template-columns:64px 1fr 120px"] > div[style*="border-right"],
  div[style*="grid-template-columns:repeat(3,1fr)"] > div[style*="border-right"],
  div[style*="grid-template-columns:repeat(4,1fr)"] > div[style*="border-right"],
  div[style*="grid-template-columns:1fr 1fr"] > div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid var(--border, #e5e3dc) !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"] > div[style*="border-right"]:last-child,
  div[style*="grid-template-columns:repeat(4,1fr)"] > div[style*="border-right"]:last-child,
  div[style*="grid-template-columns:1fr 1fr"] > div[style*="border-right"]:last-child {
    border-bottom: none !important;
  }

  /* --- Headings → fluid sizes ------------------------------------------- */
  /* H1 with inline font-size:40-56px → clamp */
  h1[style*="font-size:40px"],
  h1[style*="font-size:42px"],
  h1[style*="font-size:44px"] {
    font-size: clamp(26px, 7.5vw, 38px) !important;
    line-height: 1.15 !important;
  }
  /* SEOPage default h1 (.pdb h1) in main.css is 56px */
  .pdb h1, body h1 {
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.15;
  }
  /* H2 with inline font-size in 20-30px */
  h2[style*="font-size:26px"],
  h2[style*="font-size:22px"] {
    font-size: clamp(19px, 5vw, 24px) !important;
  }

  /* --- Tables → horizontal scroll --------------------------------------- */
  /* Tables overflow body by default. Apply overflow-x:auto to common
   * container patterns so the wide table scrolls within its box rather
   * than pushing body width past viewport.
   * Includes:
   *   .card           — generic surface
   *   #db-table-wrap  — database page table outer wrap
   *   div[id^="db-"]  — pagination + density wrap on database page
   *   any direct parent of a wide table (we tag via :has()) */
  .card,
  #db-table-wrap,
  div[id="db-table-wrap"] > div,
  div:has(> table.tbl) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  table.tbl {
    min-width: 480px;
    display: table;
  }
  /* Live payout feed and leaderboard have 5+ columns — slightly wider min. */
  table.tbl--dense {
    min-width: 520px;
  }

  /* --- Stat strips that flex-wrap fine but need min-width on cells ------ */
  dl.onchain-stats > div {
    min-width: 140px;
  }

  /* --- Header / nav cleanup --------------------------------------------- */
  /* Hide light/dark toggle and "Updated …" on mobile — they crowd brand.
   * Actual attribute on the buttons is data-theme-btn (set in _header.html). */
  .pdb-header .h-right [data-theme-btn],
  .pdb-header .h-right .updated {
    display: none !important;
  }
  /* Tighten header padding so brand + hamburger sit comfortably */
  .pdb-header .h-brand {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .pdb-header .h-right {
    gap: 0 !important;
    padding-right: 8px !important;
  }

  /* --- Inline padding shrink on hero sections --------------------------- */
  .pdb-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- Image / svg / pre / mono runaway --------------------------------- */
  img, svg, video, canvas, pre {
    max-width: 100% !important;
    height: auto;
  }
  pre, code.mono {
    overflow-x: auto;
    word-wrap: break-word;
  }

  /* --- Tap targets ------------------------------------------------------ */
  a.pdb-link, .pdb-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* But not in dense table rows where it'd inflate row height */
  table.tbl a.pdb-link {
    min-height: 0;
    display: inline;
  }

  /* --- Hero stat strip flex-wrap guard --------------------------------- */
  dl[style*="display:flex"][style*="flex-wrap:wrap"] {
    gap: 14px 18px !important;
  }
}

/* === Very small phones (≤ 480px) ========================================= */
@media (max-width: 480px) {
  /* "From deposit to sealed record" — 2 cols at 480-768, 1 col below */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .pdb-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* H1 even more compact */
  h1[style*="font-size:40px"],
  h1[style*="font-size:42px"],
  h1[style*="font-size:44px"] {
    font-size: clamp(22px, 7vw, 32px) !important;
  }
}