/* Excellar Global — global responsive overrides.
   The site uses inline styles (no classes), so these rules target the inline
   `style` attribute directly and use !important to win specificity.
   Breakpoints: <=980px tablet, <=640px phone. */

/* ---- Prevent horizontal overflow globally ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* =========================================================
   TABLET  (<= 980px)
   Multi-column grids collapse to 1–2 columns; side padding shrinks.
   ========================================================= */
@media (max-width: 980px) {

  /* Any padded 1200px container: reduce the 32px side padding */
  [style*="padding: 76px 32px"],
  [style*="padding: 84px 32px"],
  [style*="padding: 72px 32px"],
  [style*="padding: 66px 32px"],
  [style*="padding: 64px 32px"],
  [style*="padding: 60px 32px"],
  [style*="padding: 56px 32px"],
  [style*="padding: 34px 32px"],
  [style*="padding: 14px 32px"],
  [style*="padding: 48px 32px"],
  [style*="padding: 40px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

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

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

  /* Two-panel asymmetric hero / bands -> stack */
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr"],
  [style*="grid-template-columns: 1.5fr 0.9fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero: reduce the huge H1 */
  [style*="font-size: 46px"] { font-size: 34px !important; }
  [style*="font-size: 42px"] { font-size: 32px !important; }
  [style*="font-size: 40px"] { font-size: 30px !important; }
  [style*="font-size: 33px"],
  [style*="font-size: 32px"] { font-size: 26px !important; }

  /* About snapshot 200px|1fr -> stack the label above value */
  [style*="grid-template-columns: 200px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* =========================================================
   PHONE  (<= 640px)
   Everything single column. Header wraps. Buttons full-width-ish.
   ========================================================= */
@media (max-width: 640px) {

  /* All grids -> single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* NOTE: header responsiveness (burger menu) is handled in SiteHeader.dc.html's
     own <style> block — do NOT add generic header/nav wrap rules here, they fight
     the burger toggle. Content bands below only. */

  /* Content CTA/closing bands: allow the heading+button to stack */
  main [style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-wrap: wrap !important;
  }

  /* Trim big headline sizes further */
  [style*="font-size: 46px"],
  [style*="font-size: 42px"],
  [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="font-size: 33px"],
  [style*="font-size: 32px"],
  [style*="font-size: 30px"] { font-size: 23px !important; }
  [style*="font-size: 28px"] { font-size: 22px !important; }

  /* Reduce vertical section padding so pages aren't endless on mobile */
  [style*="padding: 76px 32px 72px"] { padding: 40px 20px 40px !important; }
  [style*="padding: 84px 32px"] { padding: 48px 20px !important; }
  [style*="padding: 72px 32px"] { padding: 44px 20px !important; }
  [style*="padding: 66px 32px 60px"] { padding: 40px 20px 36px !important; }

  /* Closing/CTA bands: stack heading + button, button aligns left */
  [style*="justify-content: space-between"][style*="flex-wrap: wrap"] { gap: 20px !important; }

  /* Origin band: image gets a sensible height when stacked */
  [style*="min-height: 340px"] { min-height: 220px !important; }

  /* Quote form: 3-up and 2-up field rows already collapse via grid rule above */
}