/* ==========================================================================
   Maxer Photonics — Responsive
   Mobile rules are written deliberately, not derived by shrinking desktop.
   ========================================================================== */

/* ---- ≤1100px: nav condenses ---- */
@media (max-width: 1100px) {
  .nav-primary { gap: var(--space-md); }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
}

/* ---- ≤900px: full-screen nav takes over, grids drop to 2-col.
   The 3-stage pinned/travelling spectrum is a desktop-scale gesture — below
   this breakpoint js/home.js skips the scroll-linked update entirely, and
   the rule below turns the section into an ordinary stacked flow instead:
   stage 1 → the one spectrum (shown once, centered, statically settled) →
   stage 2 → stage 3, each revealed by the existing .reveal scroll-observer.
   Same rule fires under reduced motion regardless of width, for the same
   reason. The spectrum's on-load draw-in animation still runs on every
   device — only the travel/pin is disabled. ---- */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .spectrum-story { min-height: 0; }
  .spectrum-story__sticky {
    position: static;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding-block: var(--space-2xl) var(--space-xl);
  }
  .spectrum-story__visual {
    position: static;
    width: 100%;
    max-width: 460px;
    transform: none !important;
    order: 2;
  }
  .spectrum-story__stage {
    position: static;
    width: 100%;
    max-width: 560px;
    padding-inline: var(--container-pad);
    opacity: 1 !important;
    transform: none !important;
  }
  .spectrum-story__stage[data-stage="1"] { order: 1; }
  .spectrum-story__stage[data-stage="2"] { order: 3; }
  .spectrum-story__stage[data-stage="3"] { order: 4; }
  .data-readout { display: none; } /* keep the mobile story calm and legible */
  /* OSA pin-overlay choreography is desktop-only; keep the single stacked
     illustrative spectrum intact for Stage 1 continuity on small screens. */
  .osa-hud,
  .spectrum-graph__osa,
  .spectrum-caption--osa { display: none !important; }
  .spectrum-graph__demo { opacity: 1 !important; display: block; }
  .spectrum-caption--demo { display: block !important; }
}

/* Stage 3's own visual (new, additive) — on the static mobile/reduced-motion
   stack above, it takes the same static/centered treatment as the shared
   visual (inherited from `.spectrum-story__visual`), but sits after stage
   3's own text instead of after stage 1, and must override its desktop
   default of opacity:0 (which exists purely to hide it during stages 1 & 2
   of the desktop scroll-scrub — not applicable to this static stack). */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .spectrum-story__visual--stage3 {
    order: 5;
    opacity: 1 !important;
  }
}

@media (max-width: 900px) {
  .nav-primary, .header-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }

  .tech-grid, .product-grid, .app-grid { grid-template-columns: repeat(2, 1fr); }
  .process-rail { grid-template-columns: repeat(2, 1fr); }
  .featured-block, .split-block { grid-template-columns: 1fr; }
  .featured-block > *, .split-block > * { order: 0 !important; }
  .split-block .media-frame { order: -1 !important; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
}

/* ---- ≤640px: single column everywhere, tighter type/space ---- */
@media (max-width: 640px) {
  :root {
    --space-section: clamp(3.5rem, 14vw, 5rem);
  }
  .site-header { height: 64px; }
  .brand img { height: 18px; }
  .tech-grid, .product-grid, .app-grid, .process-rail { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .header-cta .btn-primary { padding: 0.7rem 1.1rem; font-size: 0.8rem; }
}

/* ---- ≤420px: smallest phones ---- */
@media (max-width: 420px) {
  .container { padding-inline: 1.1rem; }
  .eyebrow { font-size: 0.68rem; }
  .footer-links { grid-template-columns: 1fr; }
}

/* Touch target comfort */
@media (pointer: coarse) {
  .nav-primary a, .footer-col a, .btn { min-height: 44px; }
  .search-toggle, .dropdown-toggle { min-width: 44px; min-height: 44px; }
}