/* Responsive behaviour for the 2026 page designs.
   ---------------------------------------------------------------------------
   Those pages set their grid tracks in inline style attributes — a 236px label
   rail, a 250px image column, four or five equal tiles. An inline declaration
   outranks every stylesheet rule, so the hooks below carry !important: without
   them the only way to make those grids respond is to rewrite the markup of
   every page. Desktop is untouched by construction — every rule lives inside a
   max-width query.

     .g-stack  two-column layouts (hero split, label rail, text + image) → 1
     .g-2up    two equal columns → 1 on phones
     .g-tiles  three or more equal columns → 2, then 1
     .g-col    single-column grid: stop an `auto` track flooring at min-content

   Linked by: /, /guides/, /advocates/, /research/, /about/, /contact/.
   Add the link when a page starts using inline grid tracks.                  */

@media (max-width: 900px) {
  /* minmax(0,…) not 1fr: a bare 1fr floors at the item's min-content, so one
     wide child (a data table) drags the whole track past the viewport. */
  .g-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  .g-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g-stack > *, .g-tiles > *, .g-2up > * { min-width: 0; }

  /* An implicit `auto` track floors at the widest child's min-content, so a
     table's min-width propagates all the way out to the page. */
  .g-col { grid-template-columns: minmax(0, 1fr) !important; }
  .g-col > * { min-width: 0; }

  /* Data tables can't reflow below their min-content. Making the table its own
     scroll box keeps the page from scrolling instead: rows stay readable and
     the table pans. */
  main table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* A bare URL or token in inline code has no break opportunity of its own. */
  :not(pre) > code { overflow-wrap: anywhere; }
}
@media (max-width: 620px) {
  .g-2up { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 460px) {
  .g-tiles { grid-template-columns: minmax(0, 1fr) !important; }
}