/* ============================================================
   responsive.css — shared mobile/tablet overrides
   Loaded by every page AFTER its inline <style>.
   Uses !important to override inline grid-template-columns set
   on React components. Class meanings:
     rg-hero   two-column hero  -> 1 col on tablet
     rg-split  side-by-side showcase -> 1 col on tablet
     rg-2      2-col layout     -> 1 col on tablet
     rg-2m     2-col layout     -> 1 col on MOBILE only (keeps 2 on tablet)
     rg-3      3-col cards      -> 2 col tablet, 1 col mobile
     rg-4      4-col cards      -> 2 col tablet, 1 col mobile
     rg-5      5-col steps      -> 2 col tablet, 1 col mobile
     rg-meta   4-cell meta strip-> stays 4, becomes 2x2 on mobile
     rg-work   home work row    -> drops meta column on mobile
     rg-tablewrap / rg-table    -> data tables scroll horizontally on mobile
     cs-navlabel                -> center nav label, hidden on mobile
   ============================================================ */

/* ---------- Tablet ≤ 920px ---------- */
@media (max-width: 920px) {
  .rg-hero, .rg-split, .rg-2, .rg-snapshot { grid-template-columns: 1fr !important; }
  .rg-3, .rg-4, .rg-5 { grid-template-columns: repeat(2, 1fr) !important; }
  /* reset any explicit visual ordering so stacked order is logical */
  .rg-split > * { order: 0 !important; }
}

/* ---------- Mobile ≤ 620px ---------- */
@media (max-width: 620px) {
  .rg-2m, .rg-3, .rg-4, .rg-5 { grid-template-columns: 1fr !important; }
  .rg-meta { grid-template-columns: 1fr 1fr !important; }
  .cs-navlabel { display: none !important; }
}

/* ---------- Home “Selected work” rows ---------- */
@media (max-width: 760px) {
  .rg-work { grid-template-columns: auto 1fr !important; row-gap: 12px !important; }
  .rg-work .work-meta { display: none !important; }
}

/* ---------- Data tables: scroll instead of squash ---------- */
@media (max-width: 760px) {
  .rg-tablewrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .rg-table { min-width: 600px !important; }
}

/* ---------- Home experience rows ---------- */
@media (max-width: 760px) {
  .rg-exp { grid-template-columns: 1fr !important; gap: 6px !important; padding-left: 10px !important; }
  .rg-exp .exp-period { text-align: left !important; }
}

/* ---------- Generic safety: never let a fixed phone mock overflow ---------- */
@media (max-width: 420px) {
  .wrap { overflow-x: hidden; }
}