/* ============================================================
   MATNIFICENT — Responsive overrides
   Layout-only adjustments that inline styles cannot express
   (viewport media queries). Targets the runtime-serialized
   inline `style` attribute, so no per-element markup is needed.
   Serialized form has a space after the colon and inside repeat()
   e.g.  grid-template-columns: repeat(4, 1fr)
   ============================================================ */

/* ---------- TABLET (<= 1024px) ----------
   Dense multi-column grids step down. */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------- TABLET PORTRAIT / LARGE PHONE (<= 760px) ----------
   Two-column splits, card pairs and feature trios stack. */
@media (max-width: 760px) {
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"],
  [style*="grid-template-columns: 0.92fr 1.08fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1.18fr 0.82fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Fixed-height media panels become shorter when full-width. */
  [style*="height: 540px"],
  [style*="height: 440px"],
  [style*="height: 420px"],
  [style*="height: 400px"] {
    height: 320px !important;
  }
}

/* ---------- PHONE (<= 520px) ----------
   Everything collapses to a single column; tighten spacing. */
@media (max-width: 520px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  :root {
    --s-7: 24px;   /* section side padding / large gaps */
    --s-8: 44px;
    --s-9: 60px;   /* section vertical padding */
    --s-10: 76px;
  }
}

/* ============================================================
   SITE NAV — mobile menu
   Desktop links + inline CTA hide under 900px; a hamburger
   reveals a full-width panel. Markers: data-nav-links,
   data-nav-cta, data-nav-burger, data-nav-panel.
   ============================================================ */
[data-nav-burger] { display: none !important; }
[data-nav-panel]  { display: none !important; }

@media (max-width: 900px) {
  [data-nav-links] { display: none !important; }
  [data-nav-cta]   { display: none !important; }
  [data-nav-burger] { display: inline-flex !important; }
  [data-nav-panel][data-open="true"] { display: flex !important; }
}