/* Responsive layer for the site kit.
   The screens are built with inline styles, so breakpoint overrides are matched
   on the inline grid declarations React emits (note the normalised spacing:
   "repeat(4, 1fr)", "0.85fr"). Keep these selectors in sync if a grid changes. */

/* Nav labels never break mid-phrase */
header nav a { white-space: nowrap; flex: none; }

/* ---- Tablet: 4- and 3-up become 2-up ---- */
@media (max-width: 1080px) {
  header .tagc-btn--ghost { display: none; }
  header > div { gap: 24px !important; }
  header nav { gap: 20px !important; margin-left: 0 !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  main h1 { font-size: 44px !important; }
  main p[style*="92px"] { font-size: 68px !important; }
}

/* ---- Phone: everything stacks ---- */
@media (max-width: 820px) {
  :root { --page-pad: 20px; --gutter-section: 56px; --gutter-section-tight: 40px; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* keep the two internal grids that must stay side-by-side */
  [style*="grid-template-columns: 1fr 44px 1fr"] { grid-template-columns: 1fr 24px 1fr !important; }
  [style*="grid-template-columns: 104px 1fr"] { grid-template-columns: 104px 1fr !important; }
  main h1 { font-size: 32px !important; max-width: none !important; }
  main h2 { font-size: 25px !important; max-width: none !important; }
  main h3 { font-size: 21px !important; }
  main p[style*="92px"] { font-size: 54px !important; }
  main img { max-width: 100% !important; }
  header > div { height: auto !important; flex-wrap: wrap; padding-top: 12px !important; padding-bottom: 12px !important; gap: 12px !important; }
  header nav { flex-wrap: wrap; gap: 16px !important; margin-left: 0 !important; }
  footer [style*="justify-content: space-between"] { flex-direction: column; gap: 12px !important; }
}

/* ---- Small phone: drop the header CTA entirely ---- */
@media (max-width: 560px) {
  header .tagc-btn--primary { display: none; }
  main h1 { font-size: 28px !important; }
}