/* =========================================================================
   Game collection - the shared template for /games/[format]/ and
   /games/bundles/[slug]/ (page-inventory.md §2: 4 format + 5 bundle pages).
   Loaded after games.css (which supplies the reused .game-card/.game-grid)
   by every page that uses this template - mirrors how a kiosk model page
   also links kiosk-model.css after kiosks.css.

   The format pages use the text-only hero; the bundle pages add
   .collection-hero--bundle, which puts the bundle's background and wordart
   in the hero (rules at the end of this file).
   ========================================================================= */

/* ---------- Hero (text-only, mirrors .games-hero) ----------------------- */
.collection-hero { padding-block: var(--sp-10) var(--section-y-tight); }
.collection-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); justify-items: start; max-width: 760px; }
.collection-hero h1 { font: var(--text-display-lg); letter-spacing: var(--ls-display); text-wrap: balance; }
.collection-hero .lead { max-width: 62ch; }
.collection-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.collection-hero__ctas .btn { white-space: normal; text-align: center; }

/* ---------- Intro (the copy under the hero) ----------------------------- */
.collection-intro { display: grid; gap: var(--sp-5); max-width: 760px; }
.collection-intro p { max-width: 68ch; }

/* ---------- Bundles-carrying-these-titles list --------------------------
   A plain keyword-anchored link list, not the full .bundle art card  - 
   those stay on the games hub/bundle pages themselves. */
.collection-bundlelist { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); list-style: none; padding: 0; }
.collection-bundlelist a {
  display: inline-flex; align-items: center; 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-brand); text-decoration: none;
  transition: var(--transition-control);
}
.collection-bundlelist a:hover { border-color: var(--red-500); background: var(--red-50); }

/* ---------- Cross-link row to the other format pages -------------------- */
.collection-crosslinks { margin-top: var(--sp-5); }

/* ---------- Bundle hero (.collection-hero--bundle) ----------------------
   The bundle pages open on the bundle's own artwork, the same slider
   background and wordart as the home page's bundle card: the background
   fills the whole section, up under the floating header, with the copy on
   the left and the wordart on the right. The art is dark space, so the copy
   is light, and a dark veil behind the copy column keeps it readable over
   the brightest nebula. */
.collection-hero--bundle {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block-start: calc((var(--header-h) + 12px) * -1);
  padding-block: calc(var(--header-h) + 12px + var(--sp-9)) var(--sp-10);
  background: var(--n-900); color: var(--text-on-dark);
}
.collection-hero__bg {
  position: absolute; z-index: -2; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
}
.collection-hero--bundle::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, rgb(8 4 12 / .78) 0%, rgb(8 4 12 / .6) 42%, rgb(8 4 12 / .12) 70%, transparent 100%);
}
/* The light heroes' gold halftone dust (site.css) has no place on the art. */
.collection-hero--bundle::after { content: none; }
.collection-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 5vw, 72px); align-items: center;
}
.collection-hero--bundle h1 { color: var(--text-on-dark); }
.collection-hero--bundle .lead { color: var(--text-on-dark-dim); }
.collection-hero--bundle .eyebrow { color: var(--amber-300); }
.collection-hero__art { margin: 0; display: grid; place-items: center; }
.collection-hero__word {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .55));
}

@media (max-width: 860px) {
  /* On phones the wordart sits above the copy, so the veil runs top to
     bottom and darkens under the text. */
  .collection-hero--bundle { padding-block: calc(var(--header-h) + 12px + var(--sp-7)) var(--sp-9); }
  .collection-hero--bundle::before {
    background: linear-gradient(180deg, rgb(8 4 12 / .1) 0%, rgb(8 4 12 / .55) 34%, rgb(8 4 12 / .78) 100%);
  }
  .collection-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .collection-hero__art { order: -1; }
  .collection-hero__word { max-height: 150px; }
}