/* ============================================================
   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;
  }
  /* Compatible-surfaces mini cards: three-up on tablet (drops to two
     on phones below). Must follow the general rule to win source order. */
  [data-surfaces-grid] {
    grid-template-columns: repeat(3, 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: 65fr 35fr"],
  [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;
  }
}

/* Smart Heat hero copy is right-aligned on desktop; revert to left on small screens. */
@media (max-width: 760px) {
  [data-heat-hero-copy] {
    margin-left: 0 !important;
    text-align: left !important;
  }
  [data-heat-hero-copy] h1,
  [data-heat-hero-copy] p {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Installation hero: the branded cartons sit left of center, so the narrow
   phone crop must shift toward them or the wordmark gets cut in half. */
@media (max-width: 760px) {
  [data-install-hero] { object-position: 38% 50% !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;
  }
  /* Compatible-surfaces mini cards stay two-up on phones to save space.
     Must come after the general collapse rule above to win source order. */
  [data-surfaces-grid] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--s-2) !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; }
  /* Mobile: center the logo, move the hamburger to the left */
  [data-nav-bar] { justify-content: center !important; }
  [data-nav-burger] { position: absolute !important; left: var(--s-5); top: 0; bottom: 0; margin: auto 0 !important; }
}

/* ---------- "Also performs across" — horizontal swipe slider on mobile ----------
   Desktop keeps the 3-up grid; below 760px the row becomes a scroll-snap slider. */
@media (max-width: 760px) {
  [data-also-grid] {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--s-4);
    padding-bottom: var(--s-3);
  }
  [data-also-grid]::-webkit-scrollbar { display: none; }
  [data-also-grid] > a {
    flex: 0 0 82% !important;
    max-width: none !important;
    scroll-snap-align: start;
  }
  /* The whole-home banner uses an ultra-wide strip on desktop; give it a normal
     16:9 image in the phone slider so it matches the other cards. */
  [data-also-banner] > div:first-child {
    aspect-ratio: 16 / 9 !important;
  }
}