/* ============================================================
   Mobile-first responsive layer.
   The pages use inline styles, so these breakpoints override the
   serialized inline patterns ("prop: value") with !important.
   Loaded on every page via <link> in <helmet>.
   ============================================================ */

/* ---------- Tablet and below ---------- */
@media (max-width: 900px) {
  /* tighten the centered container side padding */
  section[style*="max-width: 1240px"],
  section[style*="max-width: 1100px"],
  section[style*="max-width: 980px"],
  header[style*="max-width: 1240px"],
  header[style*="max-width: 1100px"],
  header[style*="max-width: 980px"],
  footer div[style*="max-width: 1240px"],
  footer div[style*="max-width: 1100px"],
  footer div[style*="max-width: 980px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  article[style*="max-width: 720px"],
  section[style*="max-width: 720px"],
  div[style*="max-width: 720px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* header + nav wrap gracefully */
  header[style*="justify-content: space-between"] { flex-wrap: wrap; row-gap: 12px; }
  nav[style*="gap: 30px"] { gap: 16px !important; flex-wrap: wrap; }

  /* 4-up stat / meta grids -> 2-up */
  [style*="repeat(4,"] { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

  /* every other multi-column grid -> single column */
  [style*="repeat(3,"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* drop the vertical divider+indent once the band is stacked */
  [style*="border-left: 1px solid"] { border-left: 0 !important; padding-left: 0 !important; }

  /* scale display headlines down */
  [style*="font-size: 84px"] { font-size: 44px !important; }
  [style*="font-size: 62px"] { font-size: 38px !important; }
  [style*="font-size: 60px"] { font-size: 38px !important; }
  [style*="font-size: 56px"] { font-size: 34px !important; }
  [style*="font-size: 54px"] { font-size: 33px !important; }
  [style*="font-size: 52px"] { font-size: 32px !important; }
  [style*="font-size: 50px"] { font-size: 31px !important; }
  [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size: 46px"] { font-size: 30px !important; }
  [style*="font-size: 44px"] { font-size: 29px !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 27px !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 540px) {
  [style*="repeat(4,"] { grid-template-columns: 1fr !important; }
  section[style*="max-width:"],
  header[style*="max-width:"],
  footer div[style*="max-width:"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="font-size: 56px"] { font-size: 30px !important; }
  [style*="font-size: 54px"] { font-size: 29px !important; }
  [style*="font-size: 52px"] { font-size: 28px !important; }
  [style*="font-size: 50px"] { font-size: 28px !important; }
  [style*="font-size: 48px"] { font-size: 27px !important; }
}