/* ==========================================================================
   BREAKPOINTS — NihongoDo
   ========================================================================== */

@media (max-width: 900px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page {
    padding: var(--space-3);
  }
  .hero-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .scroll-panel {
    padding: var(--space-5) var(--space-3) var(--space-4);
  }
  .scroll-panel::before {
    display: none;
  }
  .section-head h2 {
    font-size: var(--fs-lg);
  }
}

@media (max-width: 700px) {
  .xp-badge,
  .hanko-streak {
    display: none;
  }
  .c-header .brand-sub {
    display: none;
  }
}

@media (max-width: 520px) {
  .grid-chars {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  }
}

@media (max-width: 420px) {
  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 260px;
    gap: var(--space-2) var(--space-3);
  }
  .grid-cards {
    gap: var(--space-4);
  }
}

/* ─── BOTTOM NAVIGATION (4.6) ────────────────────────────── */
@media (max-width: 768px) {
  .bottom-nav {
    display: grid;
  }
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .c-navbar {
    display: none;
  }
}
@media (min-width: 769px) {
  .bottom-nav {
    display: none !important;
  }
}

/* ─── REDUCED MOTION (WCAG 2.1) ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}