/* ==========================================================================
   Responsive — Breakpoints, Touch, Reduced Motion
   ========================================================================== */

/* ── Mobile-first breakpoints ───────────────────────── */

/* Phones (< 640px) */
@media (max-width: 639px) {
  .gx-container {
    --gx-container-pad: 0.75rem;
  }

  .gx-page-header__title {
    font-size: var(--gx-text-2xl);
  }

  /* Player — near edge with small gap */
  .gx-player {
    --_gap: var(--gx-sp-2);
    margin-left: calc(var(--gx-container-pad) * -1 + 4px);
    margin-right: calc(var(--gx-container-pad) * -1 + 4px);
  }

  .gx-player__wrap {
    border-radius: var(--gx-radius-sm);
  }

  .gx-player-toolbar {
    border-radius: var(--gx-radius-sm);
    padding: 0 var(--gx-sp-3);
    height: 44px;
  }

  .gx-game__title {
    font-size: var(--gx-text-xl);
  }

  .gx-player-toolbar__badge {
    font-size: 10px;
    padding: 1px 6px;
  }

  .gx-player-toolbar__btn {
    width: 32px;
    height: 32px;
  }

  .gx-player-toolbar__btn .gx-icon {
    width: 16px;
    height: 16px;
  }

  /* Hide tooltips on touch */
  .gx-player-toolbar__btn[aria-label]::after {
    display: none;
  }

  /* Info bar wraps */
  .gx-info-bar {
    gap: var(--gx-sp-1) var(--gx-sp-2);
    font-size: var(--gx-text-xs);
  }

  /* Anchor nav scrollable */
  .gx-anchor-nav__link {
    padding: var(--gx-sp-2) var(--gx-sp-3);
    font-size: var(--gx-text-xs);
  }

  .gx-gallery__carousel .gallery-item img {
    height: 100px;
  }

  /* Stack card list items */
  .gx-card-list {
    flex-direction: column;
  }

  .gx-card-list__thumb {
    width: 100%;
    aspect-ratio: 16/9;
  }

}

/* Small tablets (640px — 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .gx-game-grid {
    --gx-grid-cols: 3;
  }
}

/* Tablets (768px — 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .gx-game-grid {
    --gx-grid-cols: 3;
  }

  .gx-gallery__carousel .gallery-item img {
    height: 150px;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .gx-container {
    --gx-container-pad: 1.5rem;
  }
}

/* Wide desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .gx-game-grid {
    --gx-grid-cols: 4;
    --gx-grid-gap: 1.25rem;
  }
}

/* ── Row card mobile ────────────────────────────────── */
@media (max-width: 639px) {
  .gx-card-row__meta { display: none; }
  .gx-card-row__thumb { width: 40px; }
  .gx-card-row { gap: var(--gx-sp-2); padding: var(--gx-sp-2); }
}

/* ── Touch-friendly ─────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .gx-card:hover {
    transform: none;
  }

  .gx-card:hover .gx-card__thumb img {
    transform: none;
  }

  /* Larger tap targets */
  .gx-navbar__btn {
    width: 44px;
    height: 44px;
  }

  .gx-tag {
    padding: 4px var(--gx-sp-3);
    min-height: 32px;
  }

  .gx-filter-select {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom */
  }

  /* Prevent iOS zoom on all inputs */
  .gx-search-form__input,
  .gx-navbar__search-inline-input,
  input[type="search"],
  input[type="text"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ── Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gx-card:hover {
    transform: none;
  }

  .gx-card:hover .gx-card__thumb img {
    transform: none;
  }
}

/* ── Print ──────────────────────────────────────────── */
@media print {
  .gx-navbar,
  .gx-footer,
  .gx-filter-sidebar,
  .gx-filter-toggle,
  .gx-player,
  .gx-pagination,
  .gx-sidebar-overlay,
  .gx-admin-tools,
  .gx-view-toggle {
    display: none !important;
  }

  .gx-site__content {
    padding-top: 0;
  }

  body {
    color: #000;
    background: #fff;
  }
}