/* resources-mobile.css — site-wide mobile-safety for resources content (loaded last; mobile only).
   Targets the common overflow causes: multi-column inline grids, wide tables, code blocks,
   non-wrapping rows, oversized media, and header rows. */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
  /* wide tables become horizontally scrollable instead of breaking the page */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* code/pre wrap instead of overflowing */
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
  /* collapse any inline multi-column grid to a single column on phones */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* common resources grids by class */
  .grid, .meta-row, .cards, .two-col, .three-col, .col-grid, .kpi-grid, .matrix { grid-template-columns: 1fr !important; display: block; }
  .meta-row > *, .grid > * { margin-bottom: .5rem; }
  /* header / nav rows wrap rather than overflow */
  .site-header .wrap, .site-header .w, header .wrap, .site-nav, .nav, .meta-row, .breadcrumbs { flex-wrap: wrap; }
  .site-header .wrap, .site-header .w { height: auto; min-height: 56px; gap: .5rem; }
  /* keep content padding sane on small screens */
  .wrap, .wrap-narrow, .content, .article-body { padding-left: 18px !important; padding-right: 18px !important; }
  /* very long unbroken strings (urls, codes) shouldn't push width */
  p, li, td, th, h1, h2, h3, .lede, .pull, .tldr { overflow-wrap: anywhere; }
}