/* =====================================================================
   responsive-fix.css  — loaded AFTER gss.css.
   Adds a tablet tier, kills mobile horizontal-scroll, makes media/tables
   fluid, and provides the responsive video wrapper used on the franchise
   page. Additive only — no theme colours are overridden.
   ===================================================================== */

/* ---- Global overflow / media guards ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg, table { max-width: 100%; }
img, video { height: auto; }

/* Wide tables scroll instead of breaking the layout (admin + frontend) */
.tw, .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Responsive 16:9 video wrapper (franchise page) ---- */
.vwrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  background: #000;
}
.vwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   TABLET TIER — fills the gap between the existing 940px and 640px rules.
   The base CSS only drops 3/4-col grids at 1080px then 640px; this keeps
   things comfortable on real tablets (~768px).
   ===================================================================== */
@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .svc-board { grid-template-columns: 1fr !important; }
  /* the offset second doclist column shouldn't keep its desktop top gap */
  .split .doclist[style*="margin-top:5.4rem"] { margin-top: 1rem !important; }
}

/* =====================================================================
   MOBILE TIER
   ===================================================================== */
@media (max-width: 640px) {
  .g-3, .g-4 { grid-template-columns: 1fr; }
  .field .err { display: block; }
  .btn { min-height: 44px; }
  .sect { padding: clamp(2.4rem, 8vw, 3.4rem) 0; }
}