/* Home-page Games teaser (index.html only). Tokens from css/style.css so
   both themes theme for free; see :root ~lines 12-72 and the dark remap
   ~line 1356. Also carries a narrow-desktop fallback for the 8-link primary
   nav once "Games" joins it (About, Certs, Work, Store, Grants, Games,
   Upgrade, Contact), so it still fits at 1024px without wrapping or
   crowding the theme toggle. */

.gteaser__card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(180px, 40%) 1fr;
  align-items: stretch; gap: 0;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.gteaser__card:hover, .gteaser__card:focus-within {
  border-color: rgba(124, 58, 237, .26);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.gteaser__art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 2vw, 28px);
  background: linear-gradient(140deg, rgba(46, 212, 127, .14), rgba(255, 201, 51, .12) 55%, rgba(167, 139, 250, .14));
}
/* This panel is taller than it is wide (a card side rail, not a banner
   strip), so the 2:1 css/cover-art.css gives every .cover--card by default
   would leave it short with empty space above and below. Filling the
   whole row height instead and letting the svg's own preserveAspectRatio
   (meet, centered) letterbox the drawing reads better here than forcing
   the shared ratio. */
.gteaser__art.cover--card { aspect-ratio: auto; height: 100%; }

.gteaser__body {
  position: relative;
  padding: clamp(24px, 2.8vw, 36px);
  display: flex; flex-direction: column; justify-content: center;
}

.gteaser__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 12px;
}

.gteaser__title {
  font-size: clamp(21px, 2.4vw, 30px); font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 10px; color: var(--ink);
}

.gteaser__pitch { color: var(--ink-2); font-size: 15.2px; max-width: 46ch; }

.gteaser__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 20px;
}

.gteaser__more {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--green-deep); border-bottom: 2px solid rgba(12, 122, 70, .3);
  padding-bottom: 3px; transition: color .25s, border-color .25s;
}
.gteaser__more:hover { color: var(--violet); border-color: var(--violet); }

@media (max-width: 640px) {
  .gteaser__card { grid-template-columns: 1fr; }
  .gteaser__art.cover--card { aspect-ratio: 16 / 9; height: auto; }
}

/* ── Narrow-desktop nav fit (index.html's 8-link primary nav) ────────── */
@media (min-width: 861px) and (max-width: 1100px) {
  .nav__links { gap: 0; }
  .nav__links a { padding: 9px 10px; font-size: 11.5px; }
  .nav__links a.nav__cta { margin-left: 4px; }
}

/* Selected Work: the Games card gives its cover art a wider column than the
   wide card's default 240px, so the book tiles read at a glance. At 1000px and
   below, style.css stacks the card and hides .proj__viz; this must not
   bring the second column back. */
@media (min-width: 1001px) {
  .proj--games { grid-template-columns: 1fr minmax(0, 340px); }
}