/* Trusty Marketing Site — responsive overrides
 * Loaded after tokens.css and site.css. Layered on top of the desktop-first
 * design (1360px reference). The original handoff has no breakpoints, so
 * this file provides graceful degradation for tablet and mobile widths.
 */

html, body { overflow-x: hidden; }
body { min-width: 320px; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* ===== Tablet & narrow desktop (< 1360) ===== */
@media (max-width: 1359px) {
  .container { max-width: 100%; padding: 0 32px; }
  .section   { padding: clamp(56px, 8vw, 100px) 32px; }

  :root {
    --fs-display: clamp(40px, 6.4vw, 72px);
    --fs-h1:      clamp(34px, 5.2vw, 56px);
    --fs-h2:      clamp(26px, 4vw,   40px);
    --fs-h3:      clamp(22px, 3vw,   28px);
    --fs-h4:      clamp(18px, 2.2vw, 22px);
    --fs-lead:    clamp(16px, 1.8vw, 20px);
    --section-pad: clamp(56px, 8vw, 100px);
  }

  .t-display { font-size: clamp(48px, 7.6vw, 96px); }
  .t-h1      { font-size: clamp(34px, 5.2vw, 56px); }
  .t-h2      { font-size: clamp(26px, 4vw,   44px); }
  .t-h3      { font-size: clamp(22px, 3vw,   28px); }
  .t-h4      { font-size: clamp(18px, 2.2vw, 21px); }
  .t-lead    { font-size: clamp(15px, 1.8vw, 19px); }
}

/* ===== Mobile (< 768) ===== */
@media (max-width: 767px) {
  .container { padding: 0 16px; }
  .section   { padding: 48px 16px; }

  /* Force any 2+ column grid to single column on mobile */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Multi-column flex rows wrap */
  [style*="display: flex"]:not([style*="flex-direction"]),
  [style*="display:flex"]:not([style*="flex-direction"]) {
    flex-wrap: wrap;
  }

  /* Hide developer tweaks panel on mobile */
  .tweaks-panel { display: none !important; }

  :root {
    --s-20: 56px;
    --s-24: 64px;
  }
}

/* ===== Very small (< 480) ===== */
@media (max-width: 479px) {
  .container { padding: 0 12px; }
  .section   { padding: 40px 12px; }
}