/* ============================================================
   TUEPAC — Mobile responsive layer
   Loaded LAST on every device-width (public) page.
   The pages set many column layouts with inline
   `grid-template-columns`, which never collapse on their own.
   These rules (using !important to beat inline styles) flatten
   content-column grids to a single column on phones/tablets,
   while leaving small in-component rows (icon + text, checklist
   rows, avatar + name + action) intact.
   ============================================================ */

/* Never let a stray fixed-width element cause sideways scroll. */
html, body { overflow-x: hidden; }

@media (max-width: 820px){

  /* --- Collapse content-column grids set inline ---
     Match any element whose inline style declares grid columns,
     EXCEPT those using `auto` tracks or a leading fixed px track
     (icon rows, label columns) — those read fine narrow. */
  [style*="grid-template-columns"]:not([style*="auto"]):not([style*="px 1fr"]):not([style*="px 1.5fr"]):not([style*="px auto"]){
    grid-template-columns: 1fr !important;
  }

  /* Rail sidebars are `1fr NNNpx` — a big column then a fixed aside.
     These DO need to stack; the rule above skips px, so name them. */
  [style*="fr 260px"], [style*="fr 280px"], [style*="fr 300px"],
  [style*="fr 320px"], [style*="fr 340px"], [style*="fr 360px"],
  [style*="fr 380px"], [style*="fr 400px"]{
    grid-template-columns: 1fr !important;
  }

  /* Any grid gap set inline stays, but tighten oversized ones. */

  /* Hero: stack lead + panel, let CTAs wrap and go full width. */
  .hero__inner { gap: 28px !important; }
  .hero__cta { flex-wrap: wrap; }
  .hero__cta .btn { flex: 1 1 auto; }

  /* Forms that were two-up collapse (covered by rule above);
     make sure fields and controls span full width. */
  .formcard input, .formcard select, .formcard textarea { width: 100%; }

  /* Big pill/button rows wrap instead of overflowing. */
  .feed-filters, .seg { flex-wrap: wrap; }
}

/* Phone-scale tuning. */
@media (max-width: 560px){
  .section { padding-block: clamp(40px, 11vw, 60px); }
  .wrap, .wrap-narrow { padding-inline: 18px; }

  /* Footer bottom row stacks cleanly. */
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}