/* =========================================================================
   Games hub - /games/ and the reusable .game-card component
   Every future format/bundle/detail page that reuses .game-card links this
   file alone (mirrors how the kiosk model pages all also link kiosks.css).
   The hero, filter bar and grid are page-specific; .game-card itself is
   kept self-contained so it carries no dependency on this page's layout.
   ========================================================================= */

/* ---------- Hero (text plus the floating game field) ------------------- */
.games-hero { padding-block: var(--sp-10) var(--section-y-tight); }
.games-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); justify-items: start; max-width: 760px; }
.games-hero h1 { font: var(--text-display-lg); letter-spacing: var(--ls-display); text-wrap: balance; }
.games-hero .lead { max-width: 62ch; }
.games-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.games-hero__ctas .btn, #quote-form .btn[type="submit"] { white-space: normal; text-align: center; }

/* ---------- Hero game field (game-field.css, game-field.js) -------------
   Floating key art right of the copy, reaching up under the header like the
   hero ground (site.css) does. It is masked out toward the copy and along
   the bottom edge rather than covered with a scrim, so the warm sweep shows
   through unchanged. Below 1100px the copy runs full width, so the hero
   opens with a strip for the field above it (`data-narrow` in the markup is
   the same query). */
.games-hero .game-field {
  --vx: 80%; --vy: 56%; --card-w: clamp(120px, 10vw, 190px);
  inset: calc(-1 * (var(--header-h) + 12px)) 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 68%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 50%, #000 68%), linear-gradient(180deg, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.games-hero > .rail-wide { position: relative; z-index: 1; }
@media (max-width: 1100px) {
  .games-hero { --strip: clamp(220px, 32svh, 300px); padding-top: var(--strip); }
  .games-hero .game-field {
    --top: calc(var(--header-h) + 12px);
    --vx: 50%; --vy: calc(var(--top) + var(--strip) / 2); --card-w: clamp(96px, 20vw, 160px);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--top) + var(--strip) - 56px), transparent calc(var(--top) + var(--strip)));
    mask-image: linear-gradient(180deg, #000 calc(var(--top) + var(--strip) - 56px), transparent calc(var(--top) + var(--strip)));
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}

/* ---------- Filter bar --------------------------------------------------
   Buttons are plain, client-side-only toggles (see site.js block 6). The
   active one carries aria-pressed="true", matching the chip/pill vocabulary
   already used for the active state elsewhere on the site. */
.game-filterbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.game-filter {
  font: var(--text-button); padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-default); background: var(--surface-raised);
  color: var(--text-secondary); cursor: pointer;
  transition: var(--transition-control);
}
.game-filter[aria-pressed="true"] { border-color: var(--red-500); color: var(--text-brand); background: var(--red-50); }

/* ---------- Game grid: a real card per title, not a logo wall ---------- */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--grid-gap); margin-top: var(--sp-9); }

/* ---------- .game-card ---------------------------------------------------
   Byte-stable classes (contract.md): .game-card, .game-card__art,
   .game-card__head, .game-card__theme, .game-card__go. Reused unchanged by
   /games/[format]/, /games/bundles/[slug]/ and /games/[slug]/ pages. */
.game-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--sp-3); padding: var(--card-pad);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
  color: var(--text-primary); text-decoration: none;
  transition: var(--transition-lift), border-color var(--dur-2) var(--ease-out);
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-default); text-decoration: none; }
.game-card[hidden] { display: none; }

.game-card__art {
  display: block; aspect-ratio: 9 / 16; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-subtle);
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
}
.game-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The branded placeholder tile for the 14 titles with no art yet: a
   gradient fill, the title and a small "art coming soon" label - never a
   broken <img>. */
.game-card__ph {
  display: grid; align-content: center; justify-items: center; gap: var(--sp-2);
  width: 100%; height: 100%; padding: var(--sp-5);
  background: var(--gradient-mark); color: var(--text-on-brand); text-align: center;
}
.game-card__ph b { font: var(--text-h4); text-wrap: balance; }
.game-card__ph span { font: var(--text-caption); opacity: .85; }

.game-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.game-card__head b { font: var(--text-h4); }
/* The format chip floats over the art's top-left corner (the "New" badge
   holds the top-right), so the title gets the whole row on narrow cards. */
.game-card__head .chip {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); z-index: 1;
  white-space: nowrap; box-shadow: var(--shadow-sm);
}

.game-card__theme { font: var(--text-body-sm); color: var(--text-secondary); }

.game-card__go { display: inline-flex; align-items: center; gap: 8px; font: var(--text-button); color: var(--text-brand); }
.game-card:hover .game-card__go { gap: 12px; }

/* "New arrivals" get a small corner badge, driven by the same data-new
   attribute the filter bar reads. */
.game-card[data-new]::after {
  content: "New"; position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 1;
  font: var(--text-overline); letter-spacing: var(--ls-overline); text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill); background: var(--gradient-mark); color: var(--text-on-brand);
}

@media (max-width: 760px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}