/* ==========================================================================
   mobile-optimize.css
   --------------------------------------------------------------------------
   Mobile-only refinements. EVERY rule in this file lives inside a
   `@media (max-width: …)` block, so the desktop / laptop layout is never
   touched. This file is loaded LAST on every page so it wins the cascade
   and can correct content that would otherwise overflow or get clipped on
   small screens.

   Goals (per request):
     • Everything is actually viewable on mobile
     • Nothing is cut off / pushed off-screen
     • Content fills the screen width edge-to-edge with sane gutters
   ========================================================================== */

/* ───────────────────────── Phones & small tablets ─────────────────────── */
@media (max-width: 768px) {

  /* 1 ── Never allow horizontal scroll / off-screen content ─────────────── */
  /* `clip` (with `hidden` as the legacy fallback) clips exactly the same but
     does NOT turn html/body into scroll containers — `hidden` here silently
     breaks every `position: sticky` descendant (e.g. the homepage systems
     theatre) because sticky then tracks the wrong scrollport. */
  html, body {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  /* Stop flex / grid children from refusing to shrink (the #1 cause of
     content getting cut off inside a row on mobile). */
  *, *::before, *::after {
    min-width: 0;
  }

  /* 2 ── Make every media element fit its container ─────────────────────── */
  img, video, canvas, picture, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
  }
  svg { max-width: 100%; }

  /* Wide data scrolls inside its own box instead of stretching the page. */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* 2b ─ Scroll-reveal safety: show reveal elements immediately on mobile ── */
  /* Site-wide, elements with .reveal* start at opacity:0 and a JS observer
     adds .visible when scrolled into view. If that observer is slow or
     doesn't fire on a given device, whole sections (e.g. the final CTA and
     footer) stay invisible and read as a massive blank gap. On mobile we
     just show them — the entrance animation is a desktop nicety. */
  .reveal, .reveal-left, .reveal-right, .reveal-child {
    opacity: 1 !important;
    transform: none !important;
  }

  /* 3 ── Long words / URLs / headings wrap instead of overflowing ───────── */
  h1, h2, h3, h4, h5, h6, p, a, li, span, blockquote, figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* 4 ── Containers fill the screen with comfortable gutters ────────────── */
  .container, .container-lg, .container-sm,
  .nav-container, .footer-container,
  .section-inner, .page-hero .container, .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 5 ── Collapse multi-column content grids to a single column ──────────── */
  /* Matches any "…-grid" / "…-split" layout, EXCEPT things that must keep
     their columns: the booking calendar, decorative dot patterns, and the
     desktop-only mega menu. Forcing 1fr on a non-grid element is harmless. */
  [class*="-grid"]:not(.cal-grid):not(.dot-grid):not(.nav-mega-grid),
  [class*="-split"], [class*="-cols"],
  .grid, .grid-2, .grid-3, .grid-4,
  .split, .two-col, .three-col, .four-col,
  .responsive-grid-1, .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Bento / spanning cells: drop column/row spans so nothing overflows. */
  .bento-large, .bento-medium, .bento-half, .bento-third,
  .bento-full, .bento-card, [class*="bento"] {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }

  /* 6 ── Tame oversized fixed widths so cards/heroes fit the viewport ────── */
  [style*="width: 420px"], [style*="width:420px"],
  [style*="width: 480px"], [style*="width:480px"],
  [style*="width: 560px"], [style*="width:560px"],
  [style*="width: 600px"], [style*="width:600px"],
  [style*="width: 720px"], [style*="width:720px"],
  [style*="width: 800px"], [style*="width:800px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 7 ── Calls-to-action: full-width, comfortably tappable ──────────────── */
  .hero-cta-group, .cta-group, .btn-group, .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .hero-cta-group .btn, .cta-group .btn,
  .btn-group .btn, .cta-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Minimum 44px touch target for primary tappable elements. */
  .btn, .nav-btn, button, .nav-mobile-toggle {
    min-height: 44px;
  }

  /* 8 ── Forms: 16px inputs prevent the iOS auto-zoom that breaks layout ─── */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  form { width: 100%; max-width: 100%; }

  /* Keep the booking calendar intact (7 columns) but let it fit. */
  .cal-grid, .cal-days-header { max-width: 100%; }

  /* 9 ── Homepage "systems" feature rows (the 6 templates / CRM mockups) ─── */
  /* Collapse every feature row to a single column. nova-maxx.css tries this
     with `.feature-row { grid-template-columns: 1fr }`, but the desktop rule
     `.feature-row:nth-child(even)` has higher specificity and is NOT in a
     media query, so even-numbered rows stayed two-column on mobile — their
     mockup got squeezed into a ~90px sliver on the right and clipped. These
     selectors match that specificity and force a true single column. */
  .feature-row,
  .feature-row:nth-child(odd),
  .feature-row:nth-child(even) {
    grid-template-columns: 1fr !important;
  }
  .feature-row:nth-child(odd) .feature-text,
  .feature-row:nth-child(even) .feature-text { justify-self: start !important; }

  /* These rows reveal on scroll: the mat + mockup start at opacity:0 and a
     JS IntersectionObserver only shows them while the row is ≥22% in view —
     and hides them again as you scroll past. On mobile the rows are tall, so
     visuals constantly fade out, leaving big blank gaps. Force everything
     visible so the section reads as solid content, never an empty gap. */
  .feature-media,
  .feature-row .feature-media,
  .feature-num, .feature-title, .feature-desc,
  .feature-row .sys-visual,
  .feature-row:nth-child(odd) .sys-visual,
  .feature-row:nth-child(even) .sys-visual,
  .sys-visual {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Reveal the inner mockup pieces that are otherwise gated behind .active /
     .in / body.js-clips, so each card shows its full contents. */
  .sys-visual .cal-slot,
  .sys-visual .email-step,
  .sys-visual .voice-line,
  .sys-visual .vo-tag,
  .sys-visual .qual-verdict,
  .sys-visual .crm-col,
  .sys-visual .sms-msg,
  .sys-visual .sms-messages .sms-msg,
  body.js-clips .sys-visual .cal-slot,
  body.js-clips .sys-visual .email-step,
  body.js-clips .sys-visual .voice-line,
  body.js-clips .sys-visual .vo-tag,
  body.js-clips .sys-visual .qual-verdict,
  body.js-clips .sys-visual .sms-messages .sms-msg {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Fit the mockup cards to the screen so none of the 6 templates is cut off.
     (nova-maxx.css removes their max-width for the wide desktop cell.) */
  .feature-media { overflow: hidden !important; }
  /* max-width on every child keeps the floating badges from poking out, but
     only the card itself is forced to full width (stretching a badge would
     break it, since badges are absolutely positioned). */
  .feature-media .sys-visual > * { max-width: 100% !important; }
  .feature-media .sys-visual,
  .feature-media .sys-visual > .showcase-card,
  .showcase-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* SMS template (Template 05): the desktop layout is a 180px contact
     sidebar + chat. On a ~312px card that crushes the chat to ~130px and
     clips the message bubbles. Hide the sidebar and give the chat the full
     card width so the texts are fully readable. */
  .sms-wrap { grid-template-columns: 1fr !important; }
  .sms-sidebar { display: none !important; }

  /* Sticky systems theatre (homepage): the six templates are stacked in one
     pinned stage and swapped by scroll, so only the ACTIVE one may be
     visible — the blanket `.sys-visual { opacity: 1 }` above would pile all
     six mockups on top of each other. The inner-piece reveals above are
     still wanted so the active card always shows its full contents. */
  .systems-visual-col .sys-visual { opacity: 0 !important; }
  .systems-visual-col .sys-visual.active { opacity: 1 !important; }
}

/* ───────────────────────── Small phones (≤ 480px) ─────────────────────── */
@media (max-width: 480px) {

  /* Slightly tighter gutters on the smallest screens. */
  .container, .container-lg, .container-sm,
  .nav-container, .footer-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Stat / number rows that were 2-up go full width so figures never clip. */
  .stats-bar, .stats-grid, .stat-strip-grid,
  .numbers-grid, .about-stats-grid, .hero-stats {
    grid-template-columns: 1fr !important;
  }
  .hero-stats { flex-direction: column !important; gap: 16px !important; }
  .stat-divider { display: none !important; }
}

/* ─────────────── Top nav bar — collapse to logo + hamburger ───────────── */
/* The hamburger toggle appears at <=1024px, but on the homepage the inline
   .nav-actions (Sign In + Get Started) is never hidden, so it overflows the
   floating nav pill and overlaps the logo. Those links already live in the
   mobile menu, so hide the inline actions whenever the hamburger is shown —
   exactly what nova-global.css already does on the other pages. */
@media (max-width: 1024px) {
  .nav-actions { display: none !important; }
  .nav-mobile-toggle { display: flex !important; }
}