/* /games: the games room. One card per game, plus a dark card for the
   Chill with Jack screen (not a game). Thumbnails live in /assets/img/games/
   (Renewal Run and Just the Domain reuse their home-page shots). */

/* The games sit above the fold: a short header (headline only; the intro
   paragraph lives in the "Why" section under the cards) and a tight gap
   before the grid. */
.page-header.gm-hero { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem); }
.gm-hero .crumb { margin-bottom: var(--space-2); }
.gm-hero h1 { margin-bottom: var(--space-1); }
section.gm-games { padding-top: clamp(1.25rem, 3vw, 2.25rem); }
.page-header .gm-hero__sub { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 600; color: var(--color-coral-2); margin: 0; }

.gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 760px) { .gm-grid { grid-template-columns: 1fr; gap: var(--space-5); } }

.gm-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gm-card:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -24px rgba(31, 41, 55, 0.45); }
.gm-card:focus-within { outline: 3px solid var(--color-ink); outline-offset: 3px; }
/* Ring for keyboard focus only, where :has() is supported. */
.gm-card:has(h2 a:focus):not(:has(h2 a:focus-visible)) { outline: none; }
.gm-card__shot { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--color-ink); }
.gm-card__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-card__play {
  position: absolute; right: var(--space-4); bottom: var(--space-4);
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.55em 1.1em; border-radius: 99px;
  background: var(--color-coral); color: var(--color-ink); font-weight: 800; font-size: var(--fs-sm);
  box-shadow: 0 10px 24px -10px rgba(31, 41, 55, 0.6);
}
.gm-card:hover .gm-card__play { background: var(--color-coral-3); color: var(--color-ink); }
.gm-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5) var(--space-6) var(--space-6); }
.gm-card__kind { margin: 0 0 var(--space-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sage-2); }
.gm-card h2 { font-size: var(--fs-xl, 1.5rem); margin: 0 0 var(--space-3); }
.gm-card h2 a { color: var(--color-ink); text-decoration: none; }
/* The title link covers the whole card, so a click anywhere opens the game,
   and keyboard users get one tab stop per card. */
.gm-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gm-card h2 a:focus { outline: none; }
.gm-card__body > p { margin: 0 0 var(--space-3); }
.gm-card__meta { margin-top: auto !important; padding-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); }

/* Chill with Jack: the dark card. */
.gm-card--screen { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-cream); }
.gm-card--screen h2 a,
.gm-card--screen .gm-card__body > p { color: var(--color-cream); }
.gm-card--screen .gm-card__kind { color: var(--color-coral-3); }
.gm-card--screen .gm-card__meta { color: var(--color-tan-3); }
/* Three columns from 1100px, so a laptop screen shows whole cards above the
   fold. The dark card spans whatever the last row has left: alone on the
   row it goes full width, picture left and words right; sharing the row
   (3n+2) it spans two columns as a normal stacked card, because side by
   side there the picture became a tall slice. At two columns it spans both
   when it would otherwise sit alone. */
@media (min-width: 1100px) { .gm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1099px) {
  .gm-grid > .gm-card--screen:nth-child(odd):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The shot keeps its 16:9 as the row's minimum height and stretches when
     the words are taller; the picture is pinned to fill it either way
     (height: 100% alone left a band under it). */
  .gm-grid > .gm-card--screen:nth-child(odd):last-child .gm-card__shot { align-self: stretch; width: 100%; }
  .gm-grid > .gm-card--screen:nth-child(odd):last-child .gm-card__shot img { position: absolute; inset: 0; }
  .gm-grid > .gm-card--screen:nth-child(odd):last-child .gm-card__body { justify-content: center; }
}
@media (min-width: 1100px) {
  .gm-grid > .gm-card--screen:nth-child(3n+2):last-child { grid-column: span 2; }
  .gm-grid > .gm-card--screen:nth-child(3n+1):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-grid > .gm-card--screen:nth-child(3n+1):last-child .gm-card__shot { align-self: stretch; width: 100%; }
  .gm-grid > .gm-card--screen:nth-child(3n+1):last-child .gm-card__shot img { position: absolute; inset: 0; }
  .gm-grid > .gm-card--screen:nth-child(3n+1):last-child .gm-card__body { justify-content: center; }
}

.gm-why { max-width: var(--container-narrow); margin: var(--space-9, 6rem) auto 0; }

@media (prefers-reduced-motion: reduce) { .gm-card, .gm-card:hover { transition: none; transform: none; } }