/* ── Phone fixes for the older dark-design pages ──
   Those pages set their layout in inline style="" attributes (fixed 2–3 column
   grids, 3rem side padding, min-widths), which made them scroll sideways on
   phones. These rules override that on small screens only. Remove a page from
   this file's <link> once it's rebuilt in the new design (css/site.css). */
@media (max-width: 760px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="padding:"][style*="3rem"] { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  [style*="min-width"] { min-width: 0 !important; }
  [style*="display:flex"] { flex-wrap: wrap !important; }
  [style*="gap:4rem"], [style*="gap:5rem"], [style*="gap:3rem"] { gap: 1.5rem !important; }
  [style*="white-space:nowrap"] { white-space: normal !important; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  img, video, iframe { max-width: 100% !important; height: auto; }
  h1, h2, h3, p, a, li, td { overflow-wrap: break-word; }
  input, textarea, select { max-width: 100%; }
}