/* =============================================
   responsive-fix.css
   Mobile overflow guard. The audit found 34 pages where mobile
   screenshots rendered at >375px wide because tables, pre/code blocks,
   wide images, or fixed-width inline elements escaped the viewport.
   This file prevents horizontal scroll without changing desktop
   appearance.
   ============================================= */

@media (max-width: 768px) {
  /* Defensive: never let the document scroll horizontally on mobile. */
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Root cause of most mobile overflow on hand-written pages: CSS Grid
     and Flexbox columns refuse to shrink below their `min-content`.
     A long unbroken word, a wide table or a chart canvas blows out the
     column → the column becomes wider than the viewport. Setting
     `min-width: 0` on every element (in this media query only) opts
     them all into shrinkable mode. */
  body * {
    min-width: 0;
  }

  /* Long URLs / unbroken strings: break instead of forcing column wider. */
  body {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  /* Tables become individually scrollable on mobile. `display: block` is
     required because `overflow-x: auto` is ignored on `display: table`. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Preformatted blocks scroll within their box, not the page. */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Embedded media fit the column. */
  img,
  video,
  iframe,
  svg,
  canvas {
    max-width: 100%;
    height: auto;
  }
}