/* =================================================================
   VeraPeach — Responsive & motion-preference layers
   -----------------------------------------------------------------
   Loaded LAST so these rules win in the cascade.

   Responsiveness model — READ THIS:
   Every breakpoint below keys off the *viewport width* (min/max-width),
   never off touch, pointer, or hover capability. Combined with the
   <meta name="viewport" content="width=device-width, initial-scale=1">
   tag in index.html, the layout always follows the ACTUAL viewport the
   browser reports.

   That is exactly what makes "Request Desktop Site" work: when a mobile
   browser requests the desktop version it widens its layout viewport
   (typically ~980px) and stops reporting the narrow device width. Since
   nothing here is gated on "is this a touch device?", the wide viewport
   falls through the max-width breakpoints and the full desktop layout
   renders — no mobile lock-in.
   ================================================================= */

/* ------------------------------------------------------------------
   1. TABLET / SMALL LAPTOP  (≤ 860px viewport)
------------------------------------------------------------------ */
@media (max-width: 860px) {
  .about__cols {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .about__pillars {
    grid-template-columns: 1fr;
  }

  .hero__banners {
    width: 86vw;
    height: 66vh;
    /* stay centered with equal side margins */
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------------
   2. MOBILE  (≤ 600px viewport)
------------------------------------------------------------------ */
@media (max-width: 600px) {
  .nav-links {
    display: none; /* keep the mobile nav clean; brand + toggle remain */
  }

  .hero {
    height: 240vh;
  }

  /* Perfectly center the card ring on mobile: the flex parent centers it,
     margin-inline:auto guarantees equal left/right margins, and capping the
     width keeps balanced side spacing on wider phones. Because the ring is
     horizontally centered, the 3D spiral originates from — and returns to —
     the exact horizontal center of the screen. */
  .hero__banners {
    width: min(90vw, 480px);
    margin-inline: auto;
  }

  .banner {
    border-radius: var(--radius-md);
    padding: 1.5rem;
  }

  .about,
  .contact {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}

/* ------------------------------------------------------------------
   3. REDUCED-MOTION FALLBACKS
   Respect users who prefer less motion: no spiral, reveals shown.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Show both banners statically, stacked vertically instead of spiraling */
  .hero {
    height: auto;
  }

  .hero__stage {
    position: static;
    height: auto;
    gap: var(--space-3);
    padding: var(--space-6) 0;
  }

  .hero__banners {
    height: auto;
    width: min(88vw, 780px);
    margin-inline: auto;
    display: grid;
    gap: var(--space-3);
  }

  .banner {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    min-height: 46vh;
  }

  .hero__hint {
    display: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}