/* responsive.css — mobile adjustments for the showcase.
 * The dashboards are authored with inline styles (no classes), so these rules
 * target the inline grid/padding patterns via [style*="…"] substring selectors
 * and override them with !important inside a mobile media query. Loaded on every
 * page by dc-lite.js. Desktop layout is untouched above the breakpoint. */

@media (max-width: 680px) {

  /* --- Reclaim width: shrink the page-wrapper side padding --- */
  [style*="margin:0 auto;padding:"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- Stack multi-column grids --- */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) { grid-template-columns: 1fr !important; }

  /* --- Two-pane fractional layouts -> stack --- */
  [style*="grid-template-columns:1.2fr .8fr"],
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1.55fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1.4fr auto 1.6fr"] { grid-template-columns: 1fr !important; }

  /* --- auto-fill/fit tracks whose min exceeds a phone width -> single col
         (otherwise the forced min-track overflows horizontally) --- */
  [style*="minmax(340px"],
  [style*="minmax(320px"],
  [style*="minmax(220px"],
  [style*="minmax(200px"] { grid-template-columns: 1fr !important; }

  /* --- Trim the largest card / section paddings for breathing room --- */
  [style*="padding:48px 44px"],
  [style*="padding:48px 40px"],
  [style*="padding:30px 32px"],
  [style*="padding:30px 30px"],
  [style*="padding:34px 30px"],
  [style*="padding:24px 26px"],
  [style*="padding:22px 24px"],
  [style*="padding:26px 30px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* --- Let wide tables scroll instead of overflowing the page --- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- Headroom under the sticky bars: tighten oversized hero top padding --- */
  [style*="padding:48px 40px 110px"],
  [style*="padding:56px 56px 80px"],
  [style*="padding:34px 30px 80px"] { padding-top: 22px !important; }
}

/* Very small phones — drop 2-up stat grids to a single column */
@media (max-width: 430px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}