/* Supplements the responsive rules that now live in the mockups themselves
   (helmet <style>, @media max-width 860px — that block is the source of truth
   for the phone layout and is inlined into every page after this file, so it
   wins any tie). Only what the mockup does not cover is kept here. */

img, video, iframe { max-width: 100%; }

/* Tablets: the mockup keeps its 40px side gutters all the way down to 860px. */
@media (min-width: 861px) and (max-width: 1100px) {
  [style*="max-width:1360px"] { padding-left: 28px !important; padding-right: 28px !important; }
}

@media (max-width: 860px) {
  /* Pseudo-tables: the mockup collapses every grid to one column, which turns
     a table's heading row into a list of column names above the first row.
     Drop the headings and give each stacked row a little air instead. */
  .t-head { display: none !important; }
  .t-row { padding: 18px 0 !important; }
  .t-row > * + * { margin-top: 2px; }
}