/* nova-responsive.css — the single responsive layer for the whole site.

   WHY ONE FILE AND NOT MOBILE/TABLET COPIES OF EACH PAGE
   Three separate bugs this session came from one stale duplicate homepage —
   the logo, the top bar and the configurator back-link all pointing at an old
   copy. Duplicating five 120 KB pages across two more form factors would
   guarantee the same drift, three times over. Every page loads this file, so a
   breakpoint is fixed once and is fixed everywhere.

   The pages carry desktop values as INLINE styles, which no author stylesheet
   can beat without !important — so this layer is written as explicit override
   bands rather than mobile-first base rules. Same result, and it is the only
   thing that actually works against inline geometry.

   BANDS
     ≤ 560   phone, portrait
     ≤ 780   phone landscape and 768-class tablets
             (NOT 820/834 — those are iPad portrait and belong in the band
              below, which is why the boundary is 780 and not 820)
     781–1180 tablet — a sales device, held and handed over
     > 1180  desktop, untouched
*/

/* ─────────────────────────────────────────────────────────────────────────
   TABLET · 781–1180
   Treated as a sales tool rather than a small desktop: full 3D, touch-sized
   targets, and two columns kept wherever they still read.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 781px) and (max-width: 1180px) {

  /* Grids authored for a wide desktop column. At tablet width these three-up
     and weighted-two-up tracks still fit as an even two, which is why they
     collapse here rather than waiting for the phone band — a 262px sidebar
     beside two flexible columns has nowhere to go at 800px. */
  [style*="grid-template-columns:1fr 1fr 262px"],
  [style*="grid-template-columns: 1fr 1fr 262px"] { grid-template-columns: 1fr 1fr !important; }

  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important; gap: 18px !important;
  }

  [style*="grid-template-columns:1.25fr 1fr"],
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"] {
    grid-template-columns: 1fr 1fr !important; gap: 28px !important;
  }

  /* auto + 1fr is a big figure beside its explanation; the figure wins all the
     room at this width, so it stacks instead. */
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important; gap: 20px !important;
  }

  section { padding-left: 26px !important; padding-right: 26px !important; }

  /* a 262px fixed third column cannot survive here */
  [data-roi] { grid-template-columns: 1fr 1fr !important; gap: 22px 28px !important; }
  [data-roi-out] {
    grid-column: 1 / span 2 !important; grid-row: auto !important;
    text-align: left !important; border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    padding: 18px 0 0 0 !important;
  }

  [data-world] { height: 58vh !important; min-height: 400px !important; }

  /* every hit target reaches 44px, because this is used with a thumb */
  a.btn, button, .toggle, [role="switch"] { min-height: 44px !important; }
  nav a { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PHONE + SMALL TABLET · ≤ 780
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* Any inline two-, three- or four-column grid collapses. Listed explicitly
     because these are the exact values the pages carry inline. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.25fr 1fr"],
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [data-two], [data-roi] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  [data-roi] > div,
  [data-roi-out] {
    grid-column: 1 !important; grid-row: auto !important;
    text-align: left !important; border-left: none !important;
  }
  [data-roi-out] {
    border-top: 1px solid rgba(255,255,255,.14) !important;
    padding: 18px 0 0 0 !important;
  }

  /* section rhythm: tighter, but never cramped */
  section { padding-left: 18px !important; padding-right: 18px !important; }
  section[style*="padding:92px"], section[style*="padding: 92px"] { padding-top: 52px !important; padding-bottom: 26px !important; }
  section[style*="padding:64px"], section[style*="padding: 64px"] { padding-top: 40px !important; padding-bottom: 22px !important; }
  [style*="padding:44px 28px"], [style*="padding: 44px 28px"] { padding: 26px 20px !important; }
  [style*="padding:34px 40px"], [style*="padding: 34px 40px"] { padding: 24px 20px !important; }
  [style*="padding:210px 28px"], [style*="padding: 210px 28px"] { padding: 64px 18px !important; min-height: 0 !important; }

  /* type: fluid, and never below 16px for body copy on a phone */
  h1 { font-size: clamp(27px, 7.6vw, 38px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(21px, 5.8vw, 28px) !important; line-height: 1.14 !important; }
  h3 { font-size: clamp(19px, 5vw, 24px) !important; }
  p, li { font-size: 16.5px !important; }

  /* header: logo left, one action right, nothing wrapping to three rows */
  header > div { padding: 12px 16px !important; gap: 12px !important; }
  header nav { gap: 10px !important; font-size: 14px !important; flex-wrap: nowrap !important; }
  header nav a:not(.btn) { display: none !important; }   /* search + all-services live in the page */
  header nav a.btn { padding: 12px 18px !important; font-size: 14.5px !important; white-space: nowrap !important; }

  /* full-bleed world bands: shorter, and the copy sits above rather than over */
  [data-world] { height: 74vh !important; min-height: 420px !important; }

  /* a 44px minimum on everything tappable */
  a.btn, button, .toggle, [role="switch"], .dot { min-height: 44px !important; }
  .dot { min-width: 30px !important; }

  /* decorative absolutes are the usual source of a phantom horizontal scroll */
  [style*="position:absolute"][style*="filter:blur"],
  [style*="position: absolute"][style*="filter: blur"] { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PHONE PORTRAIT · ≤ 560
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  section { padding-left: 16px !important; padding-right: 16px !important; }
  [data-world] { height: 62vh !important; min-height: 340px !important; }

  /* the overlay copy on a world band needs the whole width and a solid floor */
  [data-world] [style*="max-width:620px"],
  [data-world] [style*="max-width: 620px"] { max-width: none !important; }

  /* pill rows become stacked blocks so nothing gets a two-word line */
  [style*="border-radius:100px"][style*="display:inline-flex"] { font-size: 13px !important; }

  h1 { font-size: clamp(25px, 8.2vw, 33px) !important; }
  .fig, [style*="display:flex"][style*="gap:17px"] { gap: 12px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   TOUCH, at any size
   A hover-only affordance is invisible on a touch screen, so anything that
   only appears on hover is made permanent instead.
   ───────────────────────────────────────────────────────────────────────── */
@media (hover: none) {
  a.xcard, a.btn { transform: none !important; }
  /* the cursor-lit hero has nothing to light on touch, so lift the ambient */
  nova-hero-stage { --nv-touch: 1; }
}