/* ==========================================================================
   Motorcycle Arcade — responsive layer
   Mobile-first base lives in style.css / games.css. This file only widens.
   Tested breakpoints: 320, 375, 390, 414, 768, 1024, 1440+
   ========================================================================== */

/* --- Very small phones (320px) ------------------------------------------- */
@media (max-width: 359px) {
  :root { --gap: .7rem; }
  .brand-name { font-size: .95rem; }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
  .hero-stats { gap: .9rem; }
  .btn { padding: .65rem .95rem; font-size: .9rem; }
}

/* --- Mobile navigation (below 900px) ------------------------------------- */
@media (max-width: 899px) {
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 1rem; overflow-y: auto; margin-left: 0;
    transform: translateX(100%); visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
    z-index: 99;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav-list a {
    padding: .85rem .75rem; font-size: 1.02rem; min-height: 48px;
    display: flex; align-items: center; border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .nav-list li:last-child a { border-bottom: 0; }
}

/* --- Tablet (768px+) ----------------------------------------------------- */
@media (min-width: 768px) {
  .wrap { padding-inline: 1.5rem; }
  .section { padding-block: 3rem; }
  .hero-inner { padding-block: 3.25rem 3.5rem; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
  .two-col { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .featured { grid-template-columns: 1.05fr 1fr; align-items: center; padding: 1.5rem; }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .toolbar { grid-template-columns: 1fr; }
  .guide-list { grid-template-columns: 1fr 1fr; }
}

/* --- Desktop (900px+) ---------------------------------------------------- */
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; gap: 2.5rem; }
  .header-search { display: none !important; }
}

/* --- Large desktop (1024px+) --------------------------------------------- */
@media (min-width: 1024px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; }
  .article-aside { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* --- Wide desktop (1440px+) ---------------------------------------------- */
@media (min-width: 1440px) {
  :root { --wrap: 1280px; }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .ad-slot, .cookie-notice, .game-shell, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; }
}