/* ============================================================
   VORYN — Responsive
   ============================================================ */

/* --- Tablet / small desktop --- */
@media (max-width: 1024px) {
  .roadmap {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.2rem;
  }
  .roadmap::before { display: none; }

  .relic-grid { grid-template-columns: repeat(3, 1fr); }

  .hero-content {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Tablet --- */
@media (max-width: 768px) {
  .section { padding: 4.5rem 0; }
  .container { padding: 0 1.4rem; }

  /* Collapsing nav — flex-wrap dropdown (no overlap, no magic numbers) */
  .nav-inner { flex-wrap: wrap; gap: 0; }

  .nav-toggle { display: flex; margin-left: auto; }

  .nav-links,
  .nav-actions {
    flex-basis: 100%;
    order: 3;
    display: none;
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    margin: 1.4rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--stroke);
  }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    margin-top: 1rem;
  }

  .nav.open .nav-links,
  .nav.open .nav-actions { display: flex; }

  .nav-actions .nav-social { align-self: flex-start; }

  .btn-wl { width: 100%; text-align: center; }

  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero */
  .hero { padding-top: 5rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { text-align: center; }

  /* Roadmap → 2 col */
  .roadmap { grid-template-columns: repeat(2, 1fr); }

  /* Relics → 2 col */
  .relic-grid { grid-template-columns: repeat(2, 1fr); }

  /* Vein backdrop reads as a hard glowing line over the text on narrow
     screens. Dim it to an ambient thread, soften the bright core, and
     tuck it toward the edge so it no longer cuts through the content. */
  .vein-backdrop { opacity: 0.2; }
  .vein-backdrop svg { left: -5%; width: 42%; }
  .vein-core { filter: blur(1px) drop-shadow(0 0 4px rgba(62, 174, 121, 0.5)); }

  .wl-form { padding: 1.6rem; }
}

/* --- Mobile --- */
@media (max-width: 480px) {
  .section { padding: 3.5rem 0; }
  .nav-inner { padding: 1rem 1.4rem; }

  .hero-content { padding: 0 1.4rem; }

  .countdown-grid { gap: 0.9rem; }
  .countdown-unit { min-width: 2.6rem; }

  .drop-cap { font-size: 4rem; }

  .lore-journal { font-size: 1.05rem; }

  /* Footer runs tall on mobile — trim padding, logo, and gaps */
  .footer { padding: 3rem 0 2rem; }
  .footer-logo { width: 120px; }
  .footer-tagline { margin-bottom: 1.6rem; }
  .footer-links {
    gap: 1.4rem 2rem;
    margin-bottom: 1.6rem;
  }
}

/* --- Very small (375px baseline) --- */
@media (max-width: 375px) {
  .hero-title { font-size: 3rem; }

  .countdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.4rem;
  }

  .relic-grid { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; }
}