/* =====================================================================
   NostalgicVerse - responsive.css
   Mobile-first breakpoints
   ===================================================================== */

/* large tablets */
@media (max-width: 1100px) {
  .nv-footer-inner { grid-template-columns: 1fr 1fr; }
  .nv-spotlight { grid-template-columns: 1fr; }
  .nv-spotlight-side { min-height: 220px; }
}

/* tablet */
@media (max-width: 860px) {
  .nv-header-inner { gap: 0.75rem; }
  .nv-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 1rem clamp(1rem, 3vw, 1.5rem); background: rgba(5,6,13,0.96); backdrop-filter: blur(18px); border-bottom: 1px solid var(--nv-border); margin: 0; }
  .nv-nav.is-open { display: flex; }
  .nv-nav a { padding: 0.75rem 0.9rem; border-radius: var(--nv-r-md); }
  .nv-nav-toggle { display: inline-flex; }
  .nv-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .nv-spec { grid-template-columns: 1fr; gap: 0.25rem 0; }
  .nv-spec dt { margin-top: 0.5rem; }
  .nv-spec dd { margin-bottom: 0.25rem; }
}

/* phones */
@media (max-width: 640px) {
  body.nv-body { font-size: 15px; }
  .nv-hero { padding: 2.5rem 1.25rem; border-radius: var(--nv-r-lg); }
  .nv-hero-cta { gap: 0.6rem; }
  .nv-btn { padding: 0.75rem 1.1rem; font-size: 0.9rem; }
  .nv-grid { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .nv-card-body { padding: 0.85rem 0.95rem 1rem; }
  .nv-card h3 { font-size: 0.98rem; }
  .nv-card .nv-meta { font-size: 0.78rem; }
  .nv-footer-inner { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 2.25rem; }
  .nv-timeline-row { grid-template-columns: 1fr; gap: 0.25rem; padding: 1rem; }
  .nv-timeline-year { font-size: 1.2rem; }
  .nv-stats { grid-template-columns: 1fr 1fr; }
  .nv-stat .nv-stat-num { font-size: 1.4rem; }
}

/* very small phones */
@media (max-width: 380px) {
  .nv-grid { grid-template-columns: 1fr; }
  .nv-hero h1 { font-size: 2rem; }
}


/* small phones landscape and foldables */
@media (max-width: 540px) {
  .nv-hero-cta { flex-direction: column; align-items: stretch; }
  .nv-hero-cta .nv-btn { justify-content: center; }
}

/* Medium phones (560px–640px) */
@media (min-width: 541px) and (max-width: 640px) {
  .nv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-footer-inner { grid-template-columns: 1fr 1fr; }
}