/* ============================================================
   AIS GAMES — games page sections
   Page head with category chips, featured card, category duos
   (two tall cards) and square game tiles with store buttons.
   Requires: tokens.css, main.css — every value here is a token.
   ============================================================ */

/* Page head comes from main.css (.page-head / .page-title / .page-lead) */

/* Category bar sits inside the fixed header (games.html) so the whole
   top panel shares one background and one backdrop blur — no seam.
   js/site.js measures the header, so --header-h includes this row. */
.site-header .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  width: var(--w-cards);
  margin-inline: auto;
  padding-bottom: var(--sp-3);
}
.chip {
  display: inline-block;
  padding: var(--tag-pad-y) var(--tag-pad-x);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) var(--tag-mix), var(--bg));
  color: var(--ink);
  font-weight: var(--w-ui);
  font-size: var(--text-chip);
  letter-spacing: var(--tracking-ui);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chip:hover {
  background: color-mix(in srgb, var(--ink) var(--tag-mix-hover), var(--bg));
  transform: translateY(var(--lift-sm));
}

/* ---------- Sections ---------- */
.games-section {
  width: var(--w-cards);
  margin-inline: auto;
  padding-block: var(--section-pad);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4)); /* full header (incl. chips) on chip jumps */
}
/* The page ends on the same space before the footer as every other page */
.games-section:last-of-type { padding-bottom: var(--pad-section); }

.games-section h2 {
  font-size: var(--text-h2);
  font-weight: var(--w-heading);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--sp-5);
}

/* Store buttons and square game tiles are shared with the web player
   page and live in main.css */

/* ---------- Featured + tall duo cards ---------- */
/* Games-page cards are plain containers: the store buttons inside
   are the links, so cards are not wrapped in <a> here. */
.card-featured { min-height: var(--h-card-featured); }

.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cards);
  margin-bottom: var(--gap-cards);
}
.duo-grid .card { min-height: var(--h-card-duo); }
/* A genre with a single big card: it takes the whole row instead of half. */
.duo-grid > .card:only-child { grid-column: 1 / -1; }

/* Left-aligned content like the reference big cards */
.card-content-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  text-align: left;
  padding: var(--pad-card);
}
.card-content-left .card-title { margin-bottom: var(--sp-2); }

/* An announcement reads as on the home page: centred, its button at the foot
   of the card, clear of the artwork's middle. */
.card-soon {
  display: flex;
  flex-direction: column;
}
.card-soon .card-content {
  flex: 1;
  padding-bottom: var(--pad-card-top);
}
.card-soon .card-content .btn { margin-top: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .games-section,
  .site-header .chips { width: calc(100% - var(--gutter) * 2); }
  .duo-grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
}