/* ==========================================================================
   CX Guru  responsive.css
   Breakpoint overrides. Loaded after main.css.
   Strategy: desktop-first component CSS lives in main.css; this file collapses
   multi-column layouts at tablet/mobile and wires up the mobile nav + CTA bar.
   ========================================================================== */

/* ---- Large tablets / small laptops (<= 1024px) ------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }

  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy { max-width: 640px; }

  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }

  .leadmag-grid { grid-template-columns: 1fr; }
  .scorecard-grid { grid-template-columns: 1fr; }
  .scorecard-left { border-right: 0; border-bottom: 1px solid var(--line); }

  .wall { columns: 2; }
}

/* ---- Tablets (<= 860px): collapse nav into drawer ---------------------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-actions .btn:not(.nav-toggle) { display: none; }
  .nav-toggle { display: flex; }
  .nav { gap: 1rem; }

  .mobile-cta { display: flex; }
  body { padding-bottom: 72px; }   /* room for sticky mobile CTA */

  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .roadmap { grid-template-columns: 1fr; }

  .console-row { grid-template-columns: 1fr; }

  h1 { font-size: clamp(2.3rem, 9vw, 3.2rem); }
}

/* ---- Phones (<= 600px) -------------------------------------------------- */
@media (max-width: 600px) {
  :root { --section-y: clamp(3rem, 12vw, 4.5rem); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .wall { columns: 1; }

  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .filters { gap: 0.4rem; }

  .btn-row { width: 100%; }
  .hero .btn-row .btn { flex: 1; }

  .pquote blockquote { font-size: 1.25rem; }

  .gauge { width: 128px; height: 128px; }
  .console-body { padding: 0.85rem; }
  .video-thumb .play { width: 46px; height: 46px; font-size: 1.1rem; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Small phones (<= 380px) ------------------------------------------- */
@media (max-width: 380px) {
  .stat-row { grid-template-columns: 1fr; }
  .brand small { display: none; }
}

/* ---- Print -------------------------------------------------------------- */
@media print {
  .site-header, .mobile-cta, .mobile-nav, .bp-bg, .bp-glow, .marquee-wrap { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .pipeline, .console, .scorecard { border-color: #ccc; box-shadow: none; }
}

/* ---- mobile overflow hardening (added) ---- */
@media (max-width: 600px) {
  .hero-grid > *, .split > * { min-width: 0; }
  .console, .pipeline, .scorecard { max-width: 100%; }
  .console-foot { flex-wrap: wrap; gap: 0.5rem; }
  .console-foot span:first-child { min-width: 0; }
  .pipeline .node { flex-wrap: wrap; }
  .pipeline .node .node-status { margin-left: auto; }
}