/* =========================================================================
   Game detail - /games/[slug]/ (e.g. /games/bison-fury/)
   Everything reusable already lives in site.css (.product-hero*, .chip,
   .icon-tile, .section, .rail-wide, .reveal, .faq, #quote-form) and
   games.css (.game-grid/.game-card, linked alongside this file). This sheet
   only holds the gap: the format-chip row and bundle line that the kiosk
   model and games-hub templates didn't already need.
   ========================================================================= */

/* ---------- Hero -------------------------------------------------------
   The tagline under the H1 (.product-hero__line) is styled in site.css. */

/* site.css balances the hero H1 (`text-wrap: balance`), which can keep a long
   game title's first line intact past the narrow mobile grid track (e.g.
   "Caribbean Bandits" at the --fs-display-lg mobile floor). Let it wrap
   normally below the site's mobile breakpoint so long titles break between
   words instead of overflowing. */
@media (max-width: 860px) {
  .product-hero h1 { text-wrap: wrap; }

  /* The hero's primary CTA repeats the game title ("Talk to Sales about
     [Game]"); site.css's .btn sets white-space: nowrap so short titles stay
     on one line, but a long title (e.g. "Caribbean Bandits") pushes the
     button past the mobile grid track. Let this button wrap onto two lines
     at narrow widths instead of overflowing. */
  .product-hero__ctas .btn--primary {
    white-space: normal; height: auto; min-height: var(--control-h-lg); text-align: center;
  }
}

/* ---------- Hero background --------------------------------------------
   The figure is the Solaris cabinet with the title's own screen on it (a
   transparent 4:5 render; site.css sizes it). Behind the whole section, up
   under the floating header, sits the title's key art (or its screen until
   it has key art), lightly blurred so its subject still reads as the title's
   world. A white veil covers only the copy column and clears before the
   cabinet, a warm glow behind the machine keeps its black body from sinking
   into dark art, and the art fades into the page at the bottom. */
.product-hero--game {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block-start: calc((var(--header-h) + 12px) * -1);
  padding-block-start: calc(var(--header-h) + 12px + var(--sp-7));
}
.product-hero__bg {
  position: absolute; z-index: -2; inset: -80px;
  width: calc(100% + 160px); height: calc(100% + 160px); max-width: none;
  object-fit: cover; object-position: 70% 35%;
  filter: blur(14px) saturate(1.3) brightness(1.02);
}
.product-hero--game::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    linear-gradient(180deg, transparent 78%, var(--surface-page) 100%),
    linear-gradient(90deg, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .8) 40%, rgb(255 255 255 / .25) 60%, transparent 74%),
    radial-gradient(closest-side at 73% 52%, rgb(255 244 230 / .55), transparent);
}

/* Close-up cabinet: the render is scaled up from near its top so the screen
   fills the column, and its base runs off the bottom of the section (which
   clips it at ~78% of the render's height), fading out just before the cut
   so it never ends on a hard line. sync_games.py's `sizes` matches the scale. */
.product-hero--game .product-hero__art img {
  transform: scale(1.5); transform-origin: 50% 12%;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 76%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 76%);
}
@media (max-width: 860px) {
  /* On phones the cabinet sits above the copy, so the veil runs top to bottom
     instead, and the base is cropped inside the figure (the square clips the
     render at 60% of its height). */
  .product-hero--game::before {
    background: linear-gradient(180deg, transparent 0%, rgb(255 255 255 / .1) 30%, rgb(255 255 255 / .82) 52%, var(--surface-page) 100%);
  }
  .product-hero--game .product-hero__art { overflow: hidden; aspect-ratio: 1 / 1; margin-block-end: 0; }
  .product-hero--game .product-hero__art img {
    transform: scale(1.4); transform-origin: 50% 10%;
    -webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 59%);
            mask-image: linear-gradient(180deg, #000 46%, transparent 59%);
  }
}

.format-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.bundle-line { margin-top: var(--sp-5); }

/* ---------- 3x3 / 5x3 switch --------------------------------------------
   Titles that also play 5x3 carry two cabinet renders and a pill pair to
   swap them (format-switch.js; the pills are the games hub's .game-filter).
   site.css's `.product-hero__art img { display: block }` beats the UA's
   [hidden] rule, so it's restated here. The pills sit at the foot of the
   figure, over the faded-out cabinet base. */
.format-switch { position: relative; }
.format-switch img[hidden], .format-switch__bar[hidden] { display: none; }
.format-switch__bar {
  position: absolute; z-index: 1; left: 50%; bottom: var(--sp-6); transform: translateX(-50%);
  display: flex; gap: var(--sp-2); padding: 4px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .82); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.format-switch__bar .game-filter { padding: 6px 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .format-switch__bar { bottom: 0; }
}