/* ==========================================================================
   Zombie Games Hub — Responsive refinements
   Breakpoints tested: 320, 375, 390, 414, 768, 1024, 1280, 1440, 1920.
   style.css is already mobile-first; this file handles the edges.
   ========================================================================== */

/* ---- Very large screens: keep line lengths sane -------------------------- */
@media (min-width: 1600px) {
  :root { --wrap: 1320px; }
  .grid--games { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

@media (min-width: 1920px) {
  body { font-size: 17px; }
}

/* ---- Desktop / small laptop --------------------------------------------- */
@media (max-width: 1280px) {
  .nav__list a { padding: 9px 10px; font-size: .9rem; }
}

@media (max-width: 1100px) {
  :root { --s-7: 40px; --s-8: 52px; }
}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .section { padding-block: var(--s-6); }
}

@media (max-width: 768px) {
  .grid--games { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3); }
  .grid--cats  { grid-template-columns: 1fr; }
  .grid--posts { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; }
  .hero__facts { gap: var(--s-4); }
  .hero__facts b { font-size: 1.3rem; }
}

/* ---- Large phones -------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --s-7: 34px; --s-8: 42px; }
  .grid--games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .card__body { padding: 10px 12px 12px; }
  .card__title { font-size: .94rem; }
  .card__desc { display: none; }           /* keep phone cards compact + scannable */
  .card__meta { font-size: .72rem; }
  .brand__name span { display: none; }
  .hero__cta .btn { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .mini-list img { width: 62px; flex-basis: 62px; height: 42px; }
}

/* ---- Small phones (320–375) --------------------------------------------- */
@media (max-width: 400px) {
  .wrap { padding-inline: 12px; }
  /* At 320px the brand and three icon buttons no longer both fit at full size,
     so let the brand text truncate and tighten the buttons. */
  .brand { flex-shrink: 1; min-width: 0; }
  .brand__name { min-width: 0; overflow: hidden; }
  .brand__name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .icon-btn { width: 38px; height: 38px; }
  .header-actions { gap: 0; }
  .site-header__inner { gap: 8px; }
  .grid--games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card__badges .badge:not(:first-child) { display: none; }
  .badge { font-size: .66rem; padding: 2px 7px; }
  .brand__name b { font-size: .95rem; }
  h1 { font-size: 1.6rem; }
  .btn { padding: 10px 16px; font-size: .9rem; }
  .hero__facts { gap: var(--s-3) var(--s-4); }
}

@media (max-width: 340px) {
  .grid--games { grid-template-columns: 1fr; }
  .brand__mark { width: 28px; height: 28px; flex-basis: 28px; }
}

/* ---- Landscape phones: give the game canvas the whole viewport ----------- */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .game-stage { --stage-max-h: 100vh; }
  .game-page__aside { display: none; }
}

/* ---- Print --------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .ad-slot, .game-shell, .toast,
  .search-panel, .nav-scrim, .toc, .share-row { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  a { color: #000; text-decoration: underline; }
  .article-body { max-width: none; }
}

/* ---- Forced colors / high contrast --------------------------------------- */
@media (forced-colors: active) {
  .btn, .card, .panel, .chip { border: 1px solid CanvasText; }
  .card__title a::after { display: none; }
}