/* =========================================================================
   mobile.css
   Global mobile polish layered on top of the marketing + page-specific CSS.
   Loaded LAST in the cascade so media queries here win.

   Breakpoint strategy:
     ≤900px — tablet-to-phone: most layout collapses to single column
     ≤640px — phone: tighter gutters, smaller type scale
     ≤420px — compact phone: last-mile density tweaks

   Rules kept additive — no layout changes above 900px.
   ========================================================================= */

/* --- Global guardrails ------------------------------------------------ */
@media (max-width: 900px) {
  /* Prevent horizontal scroll at any cost */
  html, body { overflow-x: hidden; }

  /* Relax container gutters */
  .container { padding-inline: 20px; }

  /* Images and media never exceed their column */
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

  /* Any pre/code overflow → scrollable container instead of page scroll */
  pre, code { max-width: 100%; overflow-x: auto; }

  /* Long URLs in body copy wrap */
  p a, li a { word-break: break-word; }
}

/* --- HERO (index, generic) ------------------------------------------- */
@media (max-width: 900px) {
  .hero { padding: 56px 0 40px; }
  .hero__eyebrow { font-size: 11px; }
  .hero__right { order: 2; }
}
@media (max-width: 640px) {
  .hero__headline,
  .hero h1,
  .hero .hero {
    /* already uses clamp(), but cap it harder on small phones */
    font-size: clamp(36px, 9vw, 52px);
  }
  .hero__sub, .hero__lead { font-size: 16px; }
}

/* --- Section spacing -------------------------------------------------- */
@media (max-width: 900px) {
  section, .section { padding-block: 56px; }
}
@media (max-width: 640px) {
  section, .section { padding-block: 40px; }
  h1, .h1, .display { font-size: 32px; }
  h2, .h2 { font-size: 26px; }
  h3, .h3 { font-size: 20px; }
}

/* --- Generic grids collapse ------------------------------------------- */
@media (max-width: 900px) {
  [class*="__grid"],
  [class*="-grid"],
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* --- CTAs stack ------------------------------------------------------- */
@media (max-width: 640px) {
  .cta-row, .hero__ctas, .hero__actions, [class*="__ctas"] {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-row > *, .hero__ctas > *, .hero__actions > *, [class*="__ctas"] > * {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* --- Product mocks: allow horizontal scroll for wide tables/diagrams -- */
@media (max-width: 900px) {
  .mock, .mock-shell, [class*="mock__viewport"] {
    max-width: 100%;
  }
  /* Mission508 PR card, rover table, sentinel report — let them scroll-x
     inside their container instead of blowing the page out.          */
  .mission-pr, .mission-flow,
  .rover-mock__table-wrap,
  .sentinel-mock, .station-mock,
  .agent-row {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Pricing table --------------------------------------------------- */
@media (max-width: 900px) {
  .pricing-tiers { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pricing-tier { padding: 24px !important; }

  /* Compare matrix: allow h-scroll inside its own wrapper */
  .pricing-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pricing-compare table { min-width: 640px; }
}

/* --- Resources / blog list ------------------------------------------- */
@media (max-width: 900px) {
  .posts-grid, .post-grid { grid-template-columns: 1fr !important; }
  .resources-hero, .resources__hero { padding: 48px 0 32px; }
  .post { padding: 20px !important; }
  .post__title { font-size: 18px !important; }
}

/* --- Blog post body -------------------------------------------------- */
@media (max-width: 640px) {
  .blog-post__body { font-size: 17px; line-height: 1.7; }
  .blog-post__title, .blog-post h1 { font-size: 32px !important; line-height: 1.15 !important; }
  .blog-post__meta { flex-wrap: wrap; gap: 8px; }
}

/* --- Contact page ---------------------------------------------------- */
@media (max-width: 900px) {
  .contact__grid, .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .contact-form__row--2col { grid-template-columns: 1fr !important; }
  .contact-strip { grid-template-columns: 1fr !important; }
}

/* --- Legal pages ----------------------------------------------------- */
@media (max-width: 900px) {
  .legal-layout, .legal__layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .legal-toc { position: static !important; max-height: none !important; }
}

/* --- Footer ---------------------------------------------------------- */
@media (max-width: 640px) {
  .footer__inner, .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: left !important;
  }
  .footer__cols { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* --- Touch targets --------------------------------------------------- */
@media (max-width: 900px) and (pointer: coarse) {
  a, button, [role="button"], .btn, .nav__cta {
    min-height: 44px;
  }
  .btn, .nav__cta, [class*="__cta"] {
    padding-block: 12px;
  }
}