/*
 * Cross-cutting responsive overrides not already covered inline in each
 * component stylesheet. See docs/responsive-spec.md for the full per-
 * breakpoint behavior spec this implements.
 */

/* Mobile landscape — reduce vertical hero padding so the CTA/panel stay
   reachable without excessive scrolling (docs/responsive-spec.md,
   "Mobile landscape" section). */
@media (max-width: 767px) and (max-height: 480px) and (orientation: landscape) {
  .nac-hero { padding-top: 64px; }
  .nac-hero__inner { padding-top: var(--nac-space-6); padding-bottom: var(--nac-space-6); }
}

/* Page/legal template basic layout (page.php, index.php, 404.php) */
.nac-page__inner { max-width: 800px; margin: 0 auto; padding: var(--nac-space-16) var(--nac-space-4); }
.nac-404 { text-align: center; }

/* Slow-network / reduced-data fallback class, toggled by reduced-motion.js
   (docs/responsive-spec.md, "Slow-network / low-power fallback"). */
.nac-lite-mode .nac-glass-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--nac-glass-bg-flat-fallback); }
.nac-lite-mode .nac-hero__illustration { display: none; }

/* PHASE 2.4 — small-phone tuning for the 430px and 390px verification
   breakpoints: tighter chrome, no behavioral changes. */
@media (max-width: 430px) {
  .nac-hero__illustration { height: 150px; }
  .nac-footer__sticker svg { width: 130px; height: 130px; }
  .band { padding: 26px 22px; }
  .opt { padding: var(--nac-space-2) var(--nac-space-3); }
}
@media (max-width: 390px) {
  .nac-hero__inner { padding-left: var(--nac-space-3); padding-right: var(--nac-space-3); }
  .nac-container.wrap { padding: 0 var(--nac-space-3); }
  .krow { flex-wrap: wrap; }
  .krow .btn { flex: 1; }
}