/* ==========================================================================
   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 pin/travel update, and
   the rule below turns the section into an ordinary stacked flow instead:
   stage 1 → the one spectrum (shown once, centered) → stage 2 → stage 3.
   This block is LAYOUT only (shared by mobile and reduced-motion — position,
   order, which OSA bits stay hidden). The entrance ANIMATION for that stack
   is defined further down in two separate blocks, so reduced-motion can stay
   fully static while plain mobile still gets a scroll-triggered reveal. ---- */
@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;
    order: 2;
  }
  /* Stage 3's own visual (new, additive) — on the static mobile/reduced-
     motion stack, 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. */
  .spectrum-story__visual--stage3 { order: 5; }
  .spectrum-story__stage {
    position: static;
    width: 100%;
    max-width: 560px;
    padding-inline: var(--container-pad);
  }
  .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; }
}

/* Mobile, motion allowed: each stacked block (spectrum, then stage 1/2/3)
   fades and slides up into view as it's scrolled to — reusing the site's
   existing scroll-reveal system (the IntersectionObserver in js/home.js
   that already drives every `.reveal` element on the page; these elements
   are added to the same observed set there) instead of desktop's scroll-
   scrubbed pin/travel, which doesn't translate to a single narrow column.
   Same opacity + translateY properties desktop's JS drives per frame during
   its pin/travel — here eased in once per element via .is-visible instead
   of scrubbed continuously frame-by-frame. */
@media (max-width: 900px) {
  .spectrum-story__visual,
  .spectrum-story__stage {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .spectrum-story__visual.is-visible,
  .spectrum-story__stage.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion overrides the block above wherever both conditions apply
   (a narrow viewport with reduced motion on): the static stack stays fully
   visible immediately, with no transition — unchanged from before. */
@media (prefers-reduced-motion: reduce) {
  .spectrum-story__visual,
  .spectrum-story__stage {
    opacity: 1 !important;
    transform: none !important;
    transition: none !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; }
  .lang-switch { font-size: 0.72rem; gap: 0.15rem; }
  .lang-switch__link { padding: 0.28rem 0.45rem; }
}

/* ---- ≤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; }
}