/* ═══════════════════════════════════════════════════════════════════════
   GIGSTACKS — RESPONSIVE LAYER  (loaded after styles.css)
   Fixes the inline grid-template-columns that could not collapse on
   phones/tablets, plus overflow, typography scaling and touch targets.
   Desktop appearance is intentionally unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 0. Global overflow guards ---- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Long words / emails / URLs must never push the page wide */
p, li, h1, h2, h3, h4, td, th, a, span { overflow-wrap: anywhere; }

/* ---- 1. Wide data grids become swipeable instead of squished ---- */
.gs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- 2. TABLET  (<= 1024px) ---- */
@media (max-width: 1024px) {
  [style*="grid-template-columns"][style*="repeat(4"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  [style*="grid-template-columns"][style*="repeat(5"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  [style*="grid-template-columns"][style*="repeat(6"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  [style*="grid-template-columns"][style*="repeat(3"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- 3. MOBILE  (<= 768px) : everything stacks ---- */
@media (max-width: 768px) {
  /* Any inline grid collapses to one column.
     auto-fit/minmax grids already reflow, so they are excluded below. */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }
  [style*="auto-fit"], [style*="auto-fill"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }

  /* Tame oversized inline padding */
  [style*="padding: 4rem"], [style*="padding:4rem"],
  [style*="padding: 5rem"], [style*="padding:5rem"],
  [style*="padding: 6rem"], [style*="padding:6rem"] {
    padding: 2rem 1.25rem !important;
  }
  [style*="padding: 3rem"], [style*="padding:3rem"] { padding: 1.75rem 1.25rem !important; }

  .container, .wrapper, main, section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Comfortable tap targets (Apple/Google guidance: >=44px) */
  button, .btn, a.btn, input[type="submit"], select, .option-btn {
    min-height: 44px;
  }
  input, select, textarea {
    font-size: 16px !important;   /* stops iOS auto-zoom on focus */
    width: 100%;
  }

  /* Stack any flex row that was laid out horizontally inline */
  [style*="display: flex"][style*="justify-content: space-between"],
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* ---- 4. SMALL PHONES (<= 480px) : fluid type ---- */
@media (max-width: 480px) {
  h1, [style*="font-size: 4"], [style*="font-size:4"] { font-size: clamp(1.9rem, 8vw, 2.4rem) !important; line-height: 1.15 !important; }
  h2, [style*="font-size: 3"], [style*="font-size:3"] { font-size: clamp(1.6rem, 6.5vw, 2rem) !important;  line-height: 1.2 !important; }
  h3, [style*="font-size: 2"], [style*="font-size:2"] { font-size: clamp(1.3rem, 5.5vw, 1.6rem) !important; }

  [style*="font-size: 1.1"], [style*="font-size:1.1"] { font-size: 1rem !important; }

  .gs-scroll > * { min-width: 560px; }  /* keep wide tables readable via swipe */
}

/* ---- 5. Print (the workspace exports a PDF via window.print) ---- */
@media print {
  nav, footer, .btn, button, #stickyCta { display: none !important; }
  body { background: #fff !important; }
}