/* ============================================================
   responsive.css — global media queries. MUST LOAD LAST.
   These rules sit at the same specificity as the ones they
   override, so source order is the only thing making them win.
   ============================================================ */

/* RESPONSIVE */
@media (max-width: 1024px) {
  .cap-layout { grid-template-columns: 1fr; gap: 48px; }
  /* The five-step flow (SWS) stacks a band before the three-step one: a fifth
     of 901–1024px is too narrow for "Requirements" at 24px. */
  .steps-grid--five { grid-template-columns: 1fr; }
  .steps-grid--five .step + .step::before { content: '\2193'; left: 50%; top: -13px; transform: translateX(-50%); }
}
/* Two card buttons need ~460px. The card interior is vw/2 - 105 in the
   two-column grid (901–1243px) and vw - 138 (vw - 114 at <=600) in one
   column, so they stop fitting in two bands: 901–1150px and <=580px. There
   the row stacks full width, gold on top, green below (DOM order). Without
   this the buttons themselves wrap to two lines rather than the row. */
@media (max-width: 1150px) and (min-width: 901px), (max-width: 580px) {
  .card-actions { flex-direction: column; align-items: stretch; }
}
/* At 320–360px even a full-width "Request Information" (188px of tracked
   caps + padding) exceeds the 206px interior; tighter tracking and padding
   keep every card button on one line. */
@media (max-width: 360px) {
  .card-actions .btn-primary,
  .card-actions .btn-gold { letter-spacing: 0.08em; padding: 13px 14px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  /* The mobile replacement for the links hidden on the line above. */
  .nav-toggle { display: flex; }
  .nav-drawer { display: block; }
  .card-grid { grid-template-columns: 1fr; }
  .mission-grid, .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .mission-photo img { height: 280px; }
  .mission-photo::before, .mission-photo::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 40px 24px 32px; }
  .cap-grid { grid-template-columns: 1fr; }
  /* Product pages (product.css): every two-column block stacks. The hero
     photo moves ABOVE the copy so the product is the first thing seen. */
  .product-hero-grid, .product-overview-grid, .spec-groups { grid-template-columns: 1fr; gap: 48px; }
  .product-hero-grid .card-media,
  .product-hero-grid .product-hero-figure { order: -1; }
  .product-gallery-grid { grid-template-columns: 1fr; }
  /* Stat tiles stack here, not at 600: a word value ("Validated") breaks
     mid-word in a third of the width between 601 and ~720px. */
  .stat-grid { grid-template-columns: 1fr; }
  /* Steps stack; the arrow badge moves to the top edge and points down. */
  .steps-grid { grid-template-columns: 1fr; }
  .step + .step::before { content: '\2193'; left: 50%; top: -13px; transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
  /* These two must flip together with .nav-inner above, or the drawer links
     stop lining up with the logo. */
  .nav-drawer-links { padding: 8px 20px 40px; }
  .nav-toggle { margin-right: -6px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { padding: 16px 20px; flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; }
  /* Product pages: the key-facts strip becomes a 2-col grid so the borders
     between facts still line up. */
  .product-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .product-fact { margin-right: 0; padding-right: 16px; }
  .product-fact:nth-child(2n) { border-right: none; padding-left: 16px; }
  .crumbs { padding-top: 88px; }
  .product-dataflow img { width: 1000px; max-width: none; }
  /* The logo fills more of a narrow frame, and the labelled badge would
     cover "ANGEL": icon only, tucked into the corner. */
  .snow-logo-play { left: 12px; bottom: 12px; padding: 10px 11px 10px 13px; }
  .snow-logo-play-label { display: none; }
}

/* Reduced motion: the drawer appears and disappears instantly. This must live
   here, not in layout.css — `transition: none` sits at equal specificity to the
   transitions there, so loading last is what lets it win without !important.
   Both selectors are listed because each carries its own transition shorthand. */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  body.nav-open .nav-drawer { transition: none; transform: none; }
}