/* ============================================================
   CascadiaAI — Mobile Responsive Override
   Loaded last to fix all mobile/layout issues across pages.
   Targets: nav, hero, sections (grids collapse to 1 col), terminal,
   footer, form elements.
   ============================================================ */

/* ---- Global: prevent horizontal scroll, ensure smooth scaling ---- */
/* IMPORTANT: use `overflow-x: clip` not `overflow-x: hidden` on html.
/   `overflow: hidden` on html/body creates a new containing block that BREAKS
     position: sticky on iOS Safari — combined with backdrop-filter on .nav, the
     entire page renders blank. `overflow-x: clip` prevents horizontal scroll
     without creating a new containing block.
     See: https://bugs.webkit.org/show_bug.cgi?id=219039 */
html, body, body.home-page main {
  overflow-x: clip !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body {
  -webkit-text-size-adjust: 100%;
}

/* Grid items default to an auto minimum. The home page contains intentionally
   wide max-content marquee/solution tracks; without an explicit zero minimum,
   iOS Safari lets those tracks widen `main` and moves centered hero content
   thousands of pixels off the viewport. Keep the tracks inside their own
   overflow containers instead of letting them resize the document. */
body.home-page main {
  grid-template-columns: minmax(0, 1fr) !important;
}
body.home-page main > section {
  width: 100% !important;
  min-width: 0 !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, picture, video, canvas, svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Keep the founder portrait inside its fixed frame on iPhone. The broad
   responsive image rule above must not replace the crop with intrinsic image
   sizing, which leaves the portrait visually stretched against the frame. */
.founder-card__image-frame img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: 50% 38% !important;
  transform: none !important;
}

/* ---- Container: full-width on mobile ---- */
body .container {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ============================================================
   Tablet (≤ 1024px) — keep grid but stack where prod is too wide
   ============================================================ */
@media (max-width: 1024px) {
  /* Hero grid: stack copy + terminal */
  body .home-agent-operations .hero-grid,
  body .who-grid,
  body .org-budget-grid,
  body .governance-control-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Home solutions grid (3-col) */
  body .home-solutions-section .home-solutions-grid,
  body .solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Packages grid */
  body .packages-grid,
  body .plan-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Integrations marquee area */
  body .integration-marquee-section .container {
    padding: 1.5rem;
  }
  /* Founder grid */
  body .founder-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Persona cards */
  body .persona-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* Footer */
  body footer.footer .footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  body footer.footer .footer-col:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Mobile (≤ 768px) — full collapse
   ============================================================ */
@media (max-width: 768px) {
  /* Home: avoid iOS WebKit compositor failures from viewport-height roots,
     nested backdrop filters, clipped terminal layers, and animated SVGs. */
  html.home-page,
  body.home-page {
    min-height: auto !important;
  }

  /* CAS-1719 — Sasha UX: kill the .reveal CSS transition on the home page
     so the iOS Core Animation `addLeafAnimation` regression (WebKit bug
     238067 / iOS 15.4+) cannot strand .reveal elements at opacity:0 when
     js-ready is applied on first paint. The JS-driven reveal still adds
     is-visible, but the opacity change is now instantaneous — no
     520ms race window for the WebKit compositor to drop the commit.
     See: https://bugs.webkit.org/show_bug.cgi?id=238067 */
  body.home-page .reveal,
  body.home-page .reveal.is-visible {
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* CAS-1719 — Sasha UX: force .reveal visible regardless of JS state.
     site.js sets js-ready synchronously, which (via prod-styles.css)
     pushes opacity:0 BEFORE IntersectionObserver can mark any element
     is-visible. On iOS Safari the transition can leave the element
     stuck at opacity:0 forever. This unconditional override guarantees
     the home page is visible the instant it paints, even if every JS
     module fails to load. The desktop reveal-on-scroll animation is
     unaffected because this rule is scoped to body.home-page. */
  body.home-page .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* CAS-1719 — Sasha UX: same protection for the hero's terminal and
     sub-components. They inherit reveal-related opacity rules and
     participate in the same iOS first-paint race. */
  body.home-page .hero,
  body.home-page .hero-terminal,
  body.home-page .hero-terminal__figure,
  body.home-page .home-agent-operations {
    opacity: 1 !important;
    transform: none !important;
  }

  /* CAS-1719 — Sasha UX: position: sticky on .nav combined with
     transform-bearing descendants triggers a known iOS Safari bug
     where the sticky element loses its scroll anchor and the
     section's transform fails to commit. The nav is decorative on
     mobile (the hamburger flyout handles nav state), so make it
     static for the home page only. Desktop retains its sticky nav. */
  body.home-page .nav {
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.home-page .nav,
  body.home-page .navbar,
  body.home-page .panel,
  body.home-page .hero-terminal,
  body.home-page .card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.home-page .panel,
  body.home-page .hero-terminal {
    background: rgba(6, 12, 31, 0.96) !important;
  }

  /* Headings shrink to fit */
  body h1 { font-size: clamp(2rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; }
  body h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  body h3 { font-size: clamp(1.15rem, 4vw, 1.4rem) !important; }
  body p  { font-size: 1rem !important; }

  /* Hero: less min-height, stack everything */
  body .hero,
  body .home-agent-operations {
    min-height: auto !important;
    padding: 4rem 0 2rem !important;
  }
  body .home-agent-operations .hero-grid {
    min-height: auto !important;
  }
  body .home-agent-operations .hero-copy {
    text-align: center !important;
  }

  /* ALL grids collapse to single column on mobile */
  body .home-solutions-section .home-solutions-grid,
  body .solutions-grid,
  body .packages-grid,
  body .plan-grid-3,
  body .testimonial-grid,
  body .persona-cards,
  body .who-grid,
  body .org-budget-grid,
  body .governance-control-grid,
  body .founder-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Hero terminal: full-width, allow text wrap, smaller font */
  body .home-agent-operations .hero-terminal {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 1rem !important;
    overflow: visible !important;
    padding: 1rem !important;
  }
  body .terminal-lines,
  body .terminal-lines--typed {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body .terminal-lines li,
  body .terminal-lines--typed li {
    min-height: auto !important;
    font-size: 0.78rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    padding: 0.15rem 0 !important;
  }
  body .terminal header,
  body .terminal__figure header,
  body .terminal .terminal-controls {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Maturity Mountain SVG: scale down so it fits */
  body .maturity-mountain__svg,
  body .maturity-mountain {
    width: 100% !important;
    height: auto !important;
  }
  body .maturity-mountain__nodes {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  /* Integration marquee: smaller fallback items */
  body .integration-marquee-fallback {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  body .integration-marquee-fallback__item {
    font-size: 0.78rem !important;
    padding: 0.4rem 0.7rem !important;
  }

  /* Footer: stack columns */
  body footer.footer {
    padding: 3rem 0 1.5rem !important;
    margin-top: 4rem !important;
  }
  body footer.footer .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: left !important;
  }
  body footer.footer .footer-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* Hero grid left/right stacks */
  body .hero-grid,
  body .home-agent-operations .hero-grid {
    grid-template-columns: 1fr !important;
  }

  body.home-page .org-connectors {
    display: none !important;
  }
  .js-ready body.home-page .org-chart-panel .virtual-org__node,
  .js-ready body.home-page .org-chart-panel .worker-dots i {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero copy centers on mobile */
  body .hero-copy {
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Who grid: founder image centered */
  body .founder-card,
  body .who-we-are-section figure {
    margin: 0 auto !important;
    max-width: 280px !important;
  }

  /* Maturity beacon SVG nodes: smaller */
  body .maturity-mountain__node {
    padding: 0.6rem 0.8rem !important;
    font-size: 0.82rem !important;
  }

  /* Sections: less vertical padding */
  body section.scene,
  body section.reveal {
    padding: 3rem 0 !important;
  }

  /* Cards / panels: less padding */
  body .card,
  body .panel,
  body .pricing-card {
    padding: 1.25rem !important;
  }

  /* Forms: stack + full width */
  body .form-group,
  body .form-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  body input, body textarea, body select, body button {
    font-size: 1rem !important;
  }
}

/* Mobile Safari-specific escape hatch. `overflow-x: clip`, absolute SVG
   gradients, and reveal transforms can share a broken WebKit render layer. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    html.home-page,
    body.home-page {
      overflow-x: visible !important;
    }
    body.home-page {
      min-height: -webkit-fill-available;
    }
    body.home-page .hero-bg {
      display: none !important;
    }
    .js-ready body.home-page .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

/* ============================================================
   Small mobile (≤ 480px) — extra tightening
   ============================================================ */
@media (max-width: 480px) {
  body .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  body h1 { font-size: 1.85rem !important; }
  body h2 { font-size: 1.4rem !important; }
  body .nav {
    padding: 10px 0 !important;
  }
  body .nav .brand-mark {
    font-size: 0.95rem !important;
  }
  body .nav-cta .btn {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }
  body .terminal-lines li,
  body .terminal-lines--typed li {
    font-size: 0.7rem !important;
  }
  body .maturity-mountain__nodes {
    grid-template-columns: 1fr !important;
  }
  body .home-agent-operations .hero-terminal {
    padding: 0.75rem !important;
  }
  body section.scene,
  body section.reveal {
    padding: 2rem 0 !important;
  }
}

/* ============================================================
   Touch device: bigger tap targets
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  body .nav-toggle,
  body button.btn,
  body a.btn-primary,
  body a.btn-secondary {
    min-height: 44px;
    min-width: 44px;
  }
  body .nav-links a {
    padding: 14px 0 !important;
  }
}

/* ============================================================
   Reduced motion: disable parallax / transforms that hurt mobile
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}