/**
 * GamesHub — homepage v2
 * =============================================================================
 * Scoped to .hp-v2 (added to <body> by inc/home-new.php and to <main> by
 * page-templates/home-new.php), so this file is inert on every other page,
 * the live homepage included.
 *
 * Rules:
 *   - Values come from tokens.css. No raw hex, no literal px type sizes.
 *   - No !important. The .hp-v2 scope already outranks the legacy selectors it
 *     needs to beat, and style.css has 225 of them already.
 *   - Breakpoints: 575 / 767 / 991 / 1199 only. Mobile is designed at 390.
 *     The ranking row states two of them as min-width (768 / 992) because it
 *     is built mobile-first; same boundaries, opposite direction.
 *
 * Built from frame 2a of "GamesHub Homepage.html". Section order matches.
 */

/* ==========================================================================
   BASE
   ========================================================================== */

.hp-v2 {
  font-family: var(--gh-font-body);
  font-size: var(--gh-body-size);
  line-height: var(--gh-body-leading);
  font-weight: var(--gh-body-weight-light);
  color: var(--gh-text-body);
  background: var(--gh-surface);
}

.hp-v2 h1, .hp-v2 h2, .hp-v2 h3, .hp-v2 h4 { margin-block: 0; }

.hp-v2 a { color: inherit; text-decoration: none; transition: color var(--gh-transition); }
.hp-v2 a:hover { color: var(--gh-accent-400); }

/* Neither the comp nor the live theme provides a keyboard focus state. */
.hp-v2 a:focus-visible,
.hp-v2 button:focus-visible {
  outline: var(--gh-focus-ring);
  outline-offset: var(--gh-focus-offset);
  border-radius: var(--gh-radius);
}

.hp-v2 img { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   LAYOUT — container + the four section grounds that alternate down the page
   ========================================================================== */

/* Deliberately identical to the theme's own .container — max-width 1472px with
   16px inline padding — so every section lines up with the header, nav and
   footer. The section supplies vertical rhythm only; all horizontal inset lives
   here, in one place. */
.hp-v2 .hp-container {
  width: 100%;
  max-width: var(--gh-container-max);
  margin-inline: auto;
  padding-inline: var(--gh-gutter);
}

.hp-v2 .hp-section {
  padding-block: var(--gh-section-y-lg);
}

.hp-v2 .hp-section--dark      { background: var(--gh-surface-dark);     color: var(--gh-text-on-dark); }
.hp-v2 .hp-section--dark-alt  { background: var(--gh-surface-dark-alt); color: var(--gh-text-on-dark); }
.hp-v2 .hp-section--subtle    { background: var(--gh-surface-subtle); }
.hp-v2 .hp-section--promo     { background: var(--gh-surface-promo);    color: var(--gh-text-on-promo); }

/* Measured per-section rhythm */
.hp-v2 .hp-section--news      { padding-block: var(--gh-section-y-xs) var(--gh-section-y-sm); }
.hp-v2 .hp-section--money     { padding-block: var(--gh-section-y); }
.hp-v2 .hp-section--platforms { padding-block: var(--gh-section-y); }

@media screen and (max-width: 767px) {
  .hp-v2 .hp-section,
  .hp-v2 .hp-section--news,
  .hp-v2 .hp-section--money,
  .hp-v2 .hp-section--platforms {
    padding-block: var(--gh-space-4x);
  }
}

/* ==========================================================================
   SECTION HEAD — Teko uppercase title, optional trailing rule + aside
   ========================================================================== */

.hp-v2 .hp-section-head {
  display: flex;
  align-items: center;
  gap: var(--gh-space-2x);              /* measured 16px */
  margin-block-end: 0;                  /* sections own their gap via flex */
}

.hp-v2 .hp-section-head__title {
  font-family: var(--gh-font-display);
  font-size: var(--gh-section-title-size);
  line-height: var(--gh-section-title-leading);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The hairline that fills the gap between title and aside */
.hp-v2 .hp-section-head__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--gh-hairline-on-dark);
}

.hp-v2 .hp-section:not([class*="--dark"]) .hp-section-head__rule {
  background: var(--gh-hairline-on-light);
}

.hp-v2 .hp-section-head__aside {
  line-height: var(--gh-leading-meta);
  font-size: var(--gh-body-size-sm);
  color: var(--gh-text-on-dark-muted);
  white-space: nowrap;
}

/* Frame 2b drops the rule and the aside, and lets the title wrap. Without this
   the nowrap title plus aside forces ~575px of content into a 390px viewport. */
@media screen and (max-width: 767px) {
  .hp-v2 .hp-section-head { flex-wrap: wrap; gap: var(--gh-space-1x); }
  .hp-v2 .hp-section-head__title { white-space: normal; }
  .hp-v2 .hp-section-head__rule,
  .hp-v2 .hp-section-head__aside { display: none; }
}

.hp-v2 .hp-eyebrow {
  font-family: var(--gh-font-display);
  font-size: var(--gh-eyebrow-size);
  text-transform: uppercase;
  color: var(--gh-eyebrow);
}

/* ==========================================================================
   CHIP — category / lane label. Three variants, all 2px radius, 0 8px pad.
   ========================================================================== */

.hp-v2 .hp-chip {
  line-height: var(--gh-leading-meta);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--gh-space-1x);
  min-height: 22px;
  font-family: var(--gh-font-meta);
  font-size: var(--gh-chip-size);
  font-weight: var(--gh-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-chip);
  border-radius: var(--gh-radius-chip);
  color: var(--gh-text-on-dark);
  background: var(--gh-on-dark-14);      /* default: neutral lane */
}

.hp-v2 .hp-chip--accent { background: var(--gh-action-bg); }   /* Real Money, Top News */
.hp-v2 .hp-chip--navy   { background: var(--gh-navy-900); }
.hp-v2 .hp-chip--lg     { font-size: var(--gh-chip-size-lg); min-height: 23px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.hp-v2 .hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--gh-button-height);
  padding-inline: var(--gh-button-pad-x);
  border: 0;
  border-radius: var(--gh-radius);
  font-family: var(--gh-font-heading);
  font-size: var(--gh-button-size);
  font-weight: var(--gh-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-button);
  gap: var(--gh-space-1_25x);
  cursor: pointer;
  background: var(--gh-action-bg);
  color: var(--gh-action-text);
  transition: background var(--gh-transition);
}

.hp-v2 .hp-btn:hover { background: var(--gh-accent-400); color: var(--gh-action-text); }

.hp-v2 .hp-btn--ghost {
  background: transparent;
  border: 1px solid var(--gh-border-on-dark);
  color: var(--gh-text-on-dark);
}

/* Chevron. The comp ships an 8x12 raster; drawn in CSS instead so it inherits
   currentColor and stays crisp at any zoom. */
.hp-v2 .hp-btn__icon {
  flex: none;
  width: 8px;
  height: 12px;
  position: relative;
}

.hp-v2 .hp-btn__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.hp-v2 .hp-btn--ghost:hover { background: var(--gh-on-dark-08); color: var(--gh-text-on-dark); }

/* ==========================================================================
   META — dateline + taxonomy link
   ========================================================================== */

.hp-v2 .hp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gh-space-1_5x);
  font-family: var(--gh-font-meta);
  font-size: var(--gh-meta-size);
  line-height: var(--gh-leading-meta);
  font-weight: var(--gh-body-weight);
}

.hp-v2 .hp-meta__date { color: var(--gh-on-dark-66); }

.hp-v2 .hp-meta__taxonomy {
  color: var(--gh-taxonomy);
  text-transform: uppercase;
  font-weight: var(--gh-body-weight);
}

/* The taxonomy label is a link to the category archive. It keeps its own
   colour (this selector outranks `.hp-v2 a { color: inherit }`) and picks up
   the accent on hover from `.hp-v2 a:hover`, which outranks this one — so no
   per-card hover rule is needed. */
.hp-v2 a.hp-meta__taxonomy { cursor: pointer; }

.hp-v2 .hp-section:not([class*="--dark"]) .hp-meta__date { color: var(--gh-text-muted); }

/* ==========================================================================
   SCORE — the unified ten-point number, both lanes
   ========================================================================== */

.hp-v2 .hp-score {
  display: inline-flex;
  align-items: center;
  gap: var(--gh-space-0_5x);
  font-family: var(--gh-font-heading);
  font-size: var(--gh-score-size);
  font-weight: var(--gh-emphasis-weight);
  color: var(--gh-text-on-dark);
}

/* ==========================================================================
   CARD — shared by the news mosaic, review rail and platform columns
   ========================================================================== */

.hp-v2 .hp-card { display: flex; flex-direction: column; gap: var(--gh-space-1_5x); }

.hp-v2 .hp-card__media { position: relative; overflow: hidden; border-radius: var(--gh-radius); }

.hp-v2 .hp-card__title {
  font-family: var(--gh-font-heading);
  font-size: var(--gh-card-title-size);
  line-height: var(--gh-card-title-leading);
  font-weight: var(--gh-title-weight);
}

.hp-v2 .hp-card__title--sm {
  font-size: var(--gh-card-title-size-sm);
  line-height: var(--gh-card-title-leading-sm);
}

.hp-v2 .hp-card__title--lead {
  font-size: var(--gh-headline-size);
  line-height: var(--gh-headline-leading);
  font-weight: var(--gh-emphasis-weight);
}

/* Overlay cards: chips and title sit on the artwork */
.hp-v2 .hp-card--overlay .hp-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--gh-space-2x);
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-1x);
  color: var(--gh-text-on-dark);
  background: var(--gh-scrim-dark);
}

@media screen and (max-width: 767px) {
  .hp-v2 .hp-card__title--lead {
    font-size: var(--gh-bridge-title-size);
    line-height: var(--gh-bridge-title-leading);
  }
}

/* ==========================================================================
   1. HERO — brand proposition + stats rail
   Frame 2a: 1440x559, pad 72/40/64, navy-900, radial glow bleeding off-right.
   ========================================================================== */

.hp-v2 .hp-hero {
  position: relative;
  overflow: hidden;                     /* clips the glow */
  padding-block: var(--gh-section-y-lg) var(--gh-section-y);
}

/* The glow. A pseudo-element rather than the comp's empty div — same result,
   one less node, and it can't be focused or read by a screen reader. */
.hp-v2 .hp-hero::before {
  content: "";
  position: absolute;
  right: -160px;
  top: -200px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 57, 154, 0.6) 0%, rgba(0, 0, 51, 0) 68%);
  pointer-events: none;
}

.hp-v2 .hp-hero__inner {
  position: relative;                   /* above the glow */
  display: grid;
  grid-template-columns: var(--gh-hero-col) 1fr;
  gap: var(--gh-hero-col-gap);
  align-items: center;
}

.hp-v2 .hp-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--gh-hero-stack-gap);
  align-items: flex-start;
}

.hp-v2 .hp-hero__eyebrow {
  line-height: var(--gh-leading-meta);
  font-family: var(--gh-font-meta);
  font-size: var(--gh-meta-size-lg);
  font-weight: var(--gh-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-eyebrow);
  color: var(--gh-eyebrow);
}

.hp-v2 .hp-hero__title {
  font-family: var(--gh-font-hero);
  font-size: var(--gh-hero-size);
  line-height: var(--gh-hero-leading);
  font-weight: var(--gh-hero-weight);
  text-transform: var(--gh-hero-transform);
  letter-spacing: var(--gh-hero-tracking);
  color: var(--gh-text-on-dark);
}

.hp-v2 .hp-hero__lead {
  max-width: var(--gh-hero-copy-max);
  font-size: var(--gh-body-lead-size);
  line-height: var(--gh-body-lead-leading);
  font-weight: var(--gh-body-weight-light);
  color: var(--gh-on-dark-85);
}

.hp-v2 .hp-hero__actions { display: flex; gap: var(--gh-space-1_5x); }

/* Stats rail */
.hp-v2 .hp-stats {
  display: flex;
  flex-direction: column;
  gap: var(--gh-stat-gap);
}

.hp-v2 .hp-stat {
  display: flex;
  align-items: center;
  gap: var(--gh-stat-gap);
  padding: 6px 0 6px var(--gh-space-2_5x, 20px);
  border-left: var(--gh-stat-rule) solid var(--gh-accent-500);
}

.hp-v2 .hp-stat__figure {
  flex: 0 0 132px;
  font-family: var(--gh-font-display);
  font-size: var(--gh-stat-size);
  line-height: var(--gh-stat-leading);
  font-weight: 400;
  color: var(--gh-text-on-dark);
}

.hp-v2 .hp-stat__label {
  font-size: var(--gh-body-size);
  line-height: var(--gh-stat-label-leading);
  font-weight: var(--gh-body-weight);
  color: var(--gh-text-on-dark-soft);
}

@media screen and (max-width: 991px) {
  .hp-v2 .hp-hero__inner { grid-template-columns: 1fr; gap: var(--gh-space-5x); }
  /* Teko is condensed, so it can take an aggressive clamp without crowding.
     Applied across the whole single-column range, not just phones. */
  .hp-v2 .hp-hero__title {
    font-size: clamp(40px, 8vw, var(--gh-hero-size));
    line-height: 1.04;
  }
}

@media screen and (max-width: 767px) {
  .hp-v2 .hp-hero__lead { font-size: var(--gh-body-size); line-height: var(--gh-body-leading); }
  .hp-v2 .hp-hero__actions { width: 100%; flex-direction: column; }
  .hp-v2 .hp-hero__actions .hp-btn { width: 100%; }

  /* Frame 2b keeps only the primary CTA. Both are kept here instead: hiding a
     nav affordance costs a link and a tap target, and stacked full-width
     buttons are a standard mobile pattern. Delete this comment and add
     `.hp-v2 .hp-hero__actions .hp-btn--ghost { display: none; }` to match the
     comp exactly. */

  /* Figures must not wrap — "20 years" and "Published" break onto two lines at
     the desktop size. Frame 2b sets them smaller, on one line, sized to
     content rather than to a fixed column. */
  .hp-v2 .hp-stat {
    gap: var(--gh-space-2x);
    padding-left: var(--gh-space-1_5x);
  }
  .hp-v2 .hp-stat__figure {
    flex: 0 0 auto;
    min-width: 76px;
    font-size: var(--gh-stat-size-sm);
    line-height: var(--gh-stat-leading-sm);
    white-space: nowrap;
  }
  .hp-v2 .hp-stat__label { font-size: var(--gh-body-size-sm); }
}

/* ==========================================================================
   2. NEWS MOSAIC — 2 + 1 lead + 2, both lanes interleaved
   Frame 2a: 1440x756, pad 44/40/56, navy-850, 322 | 1fr | 322 at 24 gap.
   ========================================================================== */

.hp-v2 .hp-mosaic {
  display: flex;
  flex-direction: column;
  gap: var(--gh-grid-gap);
}

.hp-v2 .hp-mosaic__grid {
  display: grid;
  grid-template-columns: var(--gh-mosaic-side) 1fr var(--gh-mosaic-side);
  gap: var(--gh-grid-gap);
}

.hp-v2 .hp-mosaic__col {
  display: grid;
  grid-template-rows: repeat(2, var(--gh-mosaic-card-h));
  gap: var(--gh-grid-gap);
}

.hp-v2 .hp-mosaic__lead { min-height: var(--gh-mosaic-lead-h); }

/* Every mosaic tile is an overlay card on a navy ground */
.hp-v2 .hp-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--gh-radius);
  background: var(--gh-navy-900);
  color: var(--gh-text-on-dark);
}

.hp-v2 .hp-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-v2 .hp-tile__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-1x);
  align-items: flex-start;
  padding: var(--gh-space-6x) var(--gh-space-2x) var(--gh-space-2x);
  background: var(--gh-scrim-dark);
}

.hp-v2 .hp-tile--lead .hp-tile__body {
  gap: var(--gh-space-2x);
  padding: var(--gh-space-10x) var(--gh-space-5x) var(--gh-space-5x);
}

/* --------------------------------------------------------------------------
   The card is a <div>, not one big <a> — a nested <a> for the category label
   is invalid HTML and gets unnested by the parser, which is why that label
   never linked. Three pieces make the card behave as before:

     1. .hp-tile__overlay  a mouse-only, aria-hidden copy of the title link,
                           stretched over the card so the image still clicks
                           through. It sits on z-index 1, above the scrim.
     2. the category link  raised to z-index 2 so it wins the hit test. It can
                           do that from inside .hp-tile__body because that
                           element has z-index auto and therefore creates no
                           stacking context of its own.
     3. the :hover rule    the wrapping anchor used to give the title the
                           accent colour on hover; a div does not, so the
                           card restates it.
   -------------------------------------------------------------------------- */

.hp-v2 .hp-tile__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hp-v2 .hp-tile .hp-meta__taxonomy {
  position: relative;
  z-index: 2;
}

.hp-v2 .hp-tile:hover .hp-tile__title,
.hp-v2 .hp-tile__title:focus-visible { color: var(--gh-accent-400); }

.hp-v2 .hp-tile__chips { display: flex; flex-wrap: wrap; gap: var(--gh-space-1x); }

.hp-v2 .hp-tile__title {
  font-family: var(--gh-font-heading);
  font-size: var(--gh-card-title-size);
  line-height: var(--gh-card-title-leading);
  font-weight: var(--gh-title-weight);
}

.hp-v2 .hp-tile--lead .hp-tile__title {
  font-size: var(--gh-headline-size);
  line-height: var(--gh-headline-leading);
  font-weight: var(--gh-emphasis-weight);
}

/* Tablet: lead spans the full width, side tiles become a 2-up row below it */
@media screen and (max-width: 991px) {
  .hp-v2 .hp-mosaic__grid { grid-template-columns: 1fr 1fr; }
  .hp-v2 .hp-mosaic__lead { grid-column: 1 / -1; min-height: 420px; order: -1; }
  .hp-v2 .hp-mosaic__col { grid-template-rows: repeat(2, 240px); }
  .hp-v2 .hp-tile--lead .hp-tile__title {
    font-size: var(--gh-bridge-title-size);
    line-height: var(--gh-bridge-title-leading);
  }
  .hp-v2 .hp-tile--lead .hp-tile__body { padding: 0 var(--gh-space-3x) var(--gh-space-3x); }
}

/* Frame 2b: single column — lead card, then compact list rows */
@media screen and (max-width: 767px) {
  .hp-v2 .hp-mosaic__grid { grid-template-columns: 1fr; }
  .hp-v2 .hp-mosaic__col { grid-template-rows: none; }
  .hp-v2 .hp-mosaic__lead { min-height: 300px; }

  .hp-v2 .hp-mosaic__col .hp-tile {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--gh-space-1_5x);
    min-height: 0;
    background: none;
    border-radius: 0;
  }
  .hp-v2 .hp-mosaic__col .hp-tile__img {
    position: static;
    height: 64px;
    border-radius: var(--gh-radius);
  }
  .hp-v2 .hp-mosaic__col .hp-tile__body {
    position: static;
    padding: 0;
    background: none;
    gap: var(--gh-space-0_5x);
  }
  .hp-v2 .hp-mosaic__col .hp-tile__title {
    font-size: var(--gh-card-title-size-sm);
    line-height: var(--gh-card-title-leading-sm);
  }
}


/* ==========================================================================
   SHARED — section intro (title + lead + optional controls)
   Used by sections 3 and 5. Section 2's head is the inline title|rule|aside
   variant above; this one stacks a lead paragraph under the title.
   ========================================================================== */

.hp-v2 .hp-intro {
  display: flex;
  align-items: flex-end;
  gap: var(--gh-space-5x);
  justify-content: space-between;
}

.hp-v2 .hp-intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-1_25x);
  max-width: var(--gh-head-lead-max);
}

.hp-v2 .hp-intro__title {
  display: flex;
  align-items: center;
  gap: var(--gh-space-1x);
  font-family: var(--gh-font-display);
  font-size: var(--gh-section-title-size);
  line-height: var(--gh-section-title-leading);
  font-weight: 400;
  text-transform: uppercase;
}

.hp-v2 .hp-intro__lead {
  font-size: var(--gh-head-lead-size);
  line-height: var(--gh-head-lead-leading);
  font-weight: var(--gh-body-weight-light);
  color: var(--gh-text-body);
}

.hp-v2 .hp-section--dark .hp-intro__lead,
.hp-v2 .hp-section--dark-alt .hp-intro__lead { color: var(--gh-text-on-dark-soft); }

/* Chevron after a section title — CSS rather than the comp's raster */
.hp-v2 .hp-chev {
  flex: none;
  width: 11px;
  height: 22px;
  position: relative;
}

.hp-v2 .hp-chev::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Carousel arrows */
.hp-v2 .hp-arrows { display: flex; gap: var(--gh-space-1x); flex: none; }

.hp-v2 .hp-arrow {
  width: var(--gh-arrow-size);
  height: var(--gh-arrow-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--gh-radius);
  background: var(--gh-arrow-bg);
  color: var(--gh-navy-900);
  cursor: pointer;
}

.hp-v2 .hp-arrow:hover { background: var(--gh-blue-100); }
.hp-v2 .hp-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.hp-v2 .hp-arrow--next .hp-chev::before { transform: rotate(45deg); }
.hp-v2 .hp-arrow .hp-chev { width: 8px; height: 14px; }
.hp-v2 .hp-arrow--prev .hp-chev::before { transform: rotate(-135deg); }

/* ==========================================================================
   3. One score      DONE
   ========================================================================== */

.hp-v2 .hp-reviews { display: flex; flex-direction: column; gap: var(--gh-section-gap); }

/* A scroll-snap rail, not a plain grid — the section head has prev/next arrows
   in the design, and there are hundreds of reviews to move through. Built so
   it works with no JS: native horizontal scroll, snap points, and keyboard
   scrolling via tabindex. assets/js/home-v2.js only adds the arrows.

   grid-auto-flow: column with a computed track width keeps exactly
   --gh-review-cols cards visible, so the same token drives the rail and the
   responsive breakpoints below. */
.hp-v2 .hp-reviews__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--gh-review-cols) - 1) * var(--gh-grid-gap)) / var(--gh-review-cols)
  );
  gap: var(--gh-grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* the arrows are the affordance */
  padding-block-end: var(--gh-space-0_5x);
}

.hp-v2 .hp-reviews__rail::-webkit-scrollbar { display: none; }

.hp-v2 .hp-reviews__rail > * { scroll-snap-align: start; }

.hp-v2 .hp-reviews__rail:focus-visible {
  outline: var(--gh-focus-ring);
  outline-offset: var(--gh-focus-offset);
}

.hp-v2 .hp-review { display: flex; flex-direction: column; gap: var(--gh-space-1_5x); }

.hp-v2 .hp-review__media {
  position: relative;
  aspect-ratio: var(--gh-review-media-ratio);
  overflow: hidden;
  border-radius: var(--gh-radius);
  background: var(--gh-media-placeholder);
}

.hp-v2 .hp-review__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Score sits top-left on the artwork, lane chip top-right */
.hp-v2 .hp-review__score {
  position: absolute;
  top: var(--gh-space-1x);
  left: var(--gh-space-1x);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding-inline: var(--gh-space-1x);
  border-radius: var(--gh-radius-chip);
  background: var(--gh-navy-900);
  font-family: var(--gh-font-heading);
  font-size: var(--gh-score-size);
  line-height: var(--gh-leading-meta);
  font-weight: var(--gh-emphasis-weight);
  color: var(--gh-text-on-dark);
}

.hp-v2 .hp-review__score::after {
  content: "+";
  color: var(--gh-accent-500);
  font-weight: var(--gh-title-weight);
}

.hp-v2 .hp-review__lane {
  position: absolute;
  top: var(--gh-space-1x);
  right: var(--gh-space-1x);
}

.hp-v2 .hp-review__title {
  font-family: var(--gh-font-heading);
  font-size: var(--gh-card-title-size);
  line-height: var(--gh-card-title-leading);
  font-weight: var(--gh-title-weight);
  color: var(--gh-text);
}

.hp-v2 .hp-review__byline {
  font-size: var(--gh-body-size-sm);
  line-height: var(--gh-leading-meta);
  font-weight: var(--gh-body-weight);
  color: var(--gh-text-muted);
}

/* Only the name links, so it needs to read as a link without shouting: the
   muted byline colour is inherited, underlined to mark it, and the accent
   arrives on hover from `.hp-v2 a:hover`. */
.hp-v2 .hp-review__author {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gh-hairline-on-light);
  text-underline-offset: 2px;
}

@media screen and (max-width: 1199px) { .hp-v2 { --gh-review-cols: 3; } }
@media screen and (max-width: 991px)  { .hp-v2 { --gh-review-cols: 2; } }
@media screen and (max-width: 575px)  { .hp-v2 { --gh-review-cols: 1; } }

/* ==========================================================================
   4. Real money     DONE
   ========================================================================== */

.hp-v2 .hp-money {
  position: relative;
  overflow: hidden;                     /* clips the glow — without this the
                                           circle at right:-80px widens the
                                           whole document by 80px */
  display: flex;
  flex-direction: column;
  gap: var(--gh-section-gap-lg);
}

.hp-v2 .hp-money::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 57, 154, 0.45) 0%, rgba(4, 4, 71, 0) 70%);
  pointer-events: none;
}

.hp-v2 .hp-money > * { position: relative; }

/* Compliance badges: outlined, uppercase, deliberately not styled as chips so
   they never read as a category label. */
.hp-v2 .hp-badge {
  line-height: var(--gh-leading-meta);
  display: inline-flex;
  align-items: center;
  padding: var(--gh-badge-pad-y) var(--gh-space-1x);
  border: 1px solid var(--gh-badge-border);
  border-radius: var(--gh-radius-chip);
  font-family: var(--gh-font-meta);
  font-size: var(--gh-micro-size);
  font-weight: var(--gh-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-chip);
  color: var(--gh-on-dark-85);
  white-space: nowrap;
}

.hp-v2 .hp-badge--age {
  border-radius: var(--gh-radius-pill);
  padding-inline: 9px;
  text-transform: none;
}

.hp-v2 .hp-money .hp-section-head__rule { background: var(--gh-hairline-on-dark-alt); }

.hp-v2 .hp-money__geo {
  line-height: var(--gh-leading-meta);
  font-size: var(--gh-body-size-sm);
  color: var(--gh-on-dark-66);
  white-space: nowrap;
}

.hp-v2 .hp-money__block { display: flex; flex-direction: column; gap: var(--gh-bridge-gap); }

.hp-v2 .hp-money__subhead {
  font-family: var(--gh-font-heading);
  font-size: var(--gh-subhead-size);
  font-weight: var(--gh-title-weight);
  color: var(--gh-text-on-dark);
}

/* Slot cards */
.hp-v2 .hp-slots {
  display: grid;
  grid-template-columns: repeat(var(--gh-review-cols), 1fr);
  gap: var(--gh-grid-gap);
}

.hp-v2 .hp-slot {
  display: flex;
  flex-direction: column;
  border-radius: var(--gh-radius);
  background: var(--gh-navy-900);
  overflow: hidden;
}

.hp-v2 .hp-slot__media {
  position: relative;
  flex: none;
  aspect-ratio: var(--gh-slot-media-ratio);
  overflow: hidden;
  background: var(--gh-media-placeholder);
}
.hp-v2 .hp-slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-v2 .hp-slot__score { position: absolute; top: var(--gh-space-1x); left: var(--gh-space-1x); }

.hp-v2 .hp-slot__body {
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-1_5x);
  padding: var(--gh-slot-pad);
}

.hp-v2 .hp-slot__name {
  font-family: var(--gh-font-heading);
  font-size: var(--gh-card-title-size);
  font-weight: var(--gh-title-weight);
  color: var(--gh-text-on-dark);
}

/* RTP / volatility. New data — no equivalent exists in the theme today. */
.hp-v2 .hp-slot__facts { display: flex; gap: var(--gh-slot-facts-gap); }
.hp-v2 .hp-fact { display: flex; flex-direction: column; }

.hp-v2 .hp-fact__label {
  line-height: var(--gh-leading-meta);
  font-family: var(--gh-font-meta);
  font-size: var(--gh-micro-size);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-chip);
  color: var(--gh-on-dark-55);
}

.hp-v2 .hp-fact__value {
  line-height: var(--gh-leading-meta);
  font-family: var(--gh-font-heading);
  font-size: var(--gh-value-size);
  font-weight: var(--gh-title-weight);
  color: var(--gh-text-on-dark);
}

.hp-v2 .hp-slot__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gh-space-1x); }
.hp-v2 .hp-slot__actions .hp-btn { height: 40px; padding-inline: var(--gh-space-1_5x); font-size: var(--gh-chip-size-lg); }

/* Casino rankings table */
.hp-v2 .hp-ranks { display: flex; flex-direction: column; gap: var(--gh-rank-row-gap); }

/* The row is a grid at every width, but the TRACKS and the placement of every
   child live in the three breakpoint blocks at the end of this section, never
   here. That is deliberate, and it is the fix for a real bug: the six fixed
   desktop tracks used to be declared here with unconditional `grid-column`
   on each child, which outranked the narrow-viewport rule and forced ~400px
   of fixed track into a 326px row on a 390px phone. Tracks that only make
   sense at one width belong inside that width's media query. */
.hp-v2 .hp-rank {
  display: grid;
  border-radius: var(--gh-radius);
  background: var(--gh-navy-900);
}

.hp-v2 .hp-rank__num {
  font-family: var(--gh-font-display);
  font-size: var(--gh-rank-size);
  color: var(--gh-on-dark-40);
}

.hp-v2 .hp-rank__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  /* Tighter block padding than the inline padding: with two lines of text the
     plate was 54px, 2px taller than the CTA, which made that one row 78px
     against 76px. min-height keeps single-line plates the right size. */
  padding: var(--gh-space-0_5x) var(--gh-space-2x);
  border-radius: var(--gh-radius);
  background: var(--gh-navy-850);
  font-family: var(--gh-font-heading);
  font-size: var(--gh-body-size);
  /* Tight leading, not the 26px body default: "Crown Coins Casino" wraps to
     two lines in a 160px plate, and at 26px that made the plate 68px and the
     whole row 92px against 76px for every other row. */
  line-height: var(--gh-leading-meta);
  font-weight: var(--gh-emphasis-weight);
  text-transform: none;                  /* real brand names, not wordmarks */
  text-align: center;
  color: var(--gh-text-on-dark);
}

.hp-v2 .hp-rank__offer { color: var(--gh-on-dark-85); }

.hp-v2 .hp-rank__licence {
  line-height: var(--gh-leading-meta);
  font-size: var(--gh-meta-size-lg);
  color: var(--gh-on-dark-55);
  white-space: nowrap;
}

/* The row CTA is smaller than the hero's: the default 26px inline padding
   left only 96px of content in a 148px track, so "Claim Offer" wrapped to two
   lines. Shorter padding, tighter type and nowrap keep it on one line. */
.hp-v2 .hp-rank .hp-btn {
  height: 40px;
  padding-inline: var(--gh-space-1_5x);
  font-size: var(--gh-chip-size-lg);
  white-space: nowrap;
}

.hp-v2 .hp-rank__score {
  display: inline-flex;
  align-items: center;
  gap: var(--gh-space-0_5x);
  min-height: 26px;
  padding-inline: var(--gh-space-1x);
  border-radius: var(--gh-radius-chip);
  background: var(--gh-navy-850);
  font-family: var(--gh-font-heading);
  font-size: var(--gh-value-size);
  line-height: var(--gh-leading-meta);   /* was inheriting the 26px body leading,
                                            which made the chip 34px and pushed
                                            any row with a review link to 92px */
  font-weight: var(--gh-emphasis-weight);
  color: var(--gh-text-on-dark);
}

.hp-v2 .hp-rank__score::after { content: "+"; color: var(--gh-accent-500); }

/* Score + optional review link share ONE grid cell, so the row has the same
   number of items whether or not a brand has a review page. Note that this
   span is the grid item -- .hp-rank__score is its child and cannot be placed
   on the row grid. Placing `score` instead of `meta` is exactly what broke
   the narrow layout before: the areas named a cell no item ever occupied,
   while __meta kept its desktop column and spilled out of the row. */
.hp-v2 .hp-rank__meta {
  display: flex;
  align-items: center;
  gap: var(--gh-space-0_5x);
}

.hp-v2 .hp-rank__review {
  font-family: var(--gh-font-meta);
  font-size: var(--gh-meta-size);
  line-height: var(--gh-leading-meta);
  color: var(--gh-on-dark-72);
  text-decoration: underline;
  white-space: nowrap;
}

.hp-v2 .hp-rank__review:hover { color: var(--gh-text-on-dark); }

/* --------------------------------------------------------------------------
   RANKING ROW -- placement, narrowest first
   --------------------------------------------------------------------------
   The only mobile-first component in this file. Everything else here is
   desktop-first because the theme is, but this row cannot be: a ranking row
   carries six pieces of information and the phone is the width that cannot
   afford them side by side, so the phone layout is the base and the wider
   ones are the additions.

   Placement is EXPLICIT for the three items on the first line and AUTO for
   the full-width ones below it. That mix is on purpose. The licence cell is
   conditionally rendered in PHP, so a named grid row for it would leave an
   empty track (and its row-gap) on every row that has no licence. Auto-placed
   full-width items just close up instead.

   The DOM order is num, brand, offer, [licence], meta, btn -- the first line
   reads left to right as rank, brand, score even though `meta` comes late in
   the source, because those three are pinned to row 1.
   -------------------------------------------------------------------------- */

/* Phone: three stacked lines. Identity and score on one, the offer full
   width beneath it, the CTA full width and thumb-sized last. */
.hp-v2 .hp-rank {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--gh-space-2x);
  row-gap: var(--gh-space-1_5x);
  padding: var(--gh-space-2x);
}

.hp-v2 .hp-rank__num   { grid-column: 1; grid-row: 1; }
.hp-v2 .hp-rank__brand { grid-column: 2; grid-row: 1; }
.hp-v2 .hp-rank__meta  { grid-column: 3; grid-row: 1; }

/* min-width:0 is load-bearing, not defensive. Grid items default to
   min-width:auto, so "Crown Coins Casino" in the 1fr track would push the
   track past the row and shove the score chip off the right edge -- which is
   what was clipping it. */
.hp-v2 .hp-rank__brand {
  min-width: 0;
  justify-self: start;
  text-align: left;
}

.hp-v2 .hp-rank__offer,
.hp-v2 .hp-rank__licence { grid-column: 1 / -1; }

.hp-v2 .hp-rank__licence { white-space: normal; }

.hp-v2 .hp-rank .hp-btn {
  grid-column: 1 / -1;
  width: 100%;
  height: 44px;                  /* thumb target, not the desktop 40px */
}

/* Score and review link sit side by side on the phone line rather than
   stacked: stacked, they made the first line two lines tall and the review
   link had 64px to wrap "Review" into. */
.hp-v2 .hp-rank__meta { flex-direction: row; gap: var(--gh-space-1x); }

/* The review link is the one thing in the row smaller than a comfortable tap
   target. Padding rather than min-height, so it does not stretch the line. */
.hp-v2 .hp-rank__review { padding-block: var(--gh-space-0_5x); }

/* Tablet and up: room for the CTA back on the first line, top right. */
@media screen and (min-width: 768px) {
  .hp-v2 .hp-rank { grid-template-columns: auto minmax(0, 1fr) auto 148px; }

  .hp-v2 .hp-rank .hp-btn {
    grid-column: 4;
    grid-row: 1;
    width: auto;
    height: 40px;
  }
}

/* Desktop: the measured six-track row from the comp. */
@media screen and (min-width: 992px) {
  .hp-v2 .hp-rank {
    /* Fixed tracks, because the Teko leading-zero numerals are not all the
       same width -- an `auto` first track shifted the brand left edge by up
       to 5px from row to row. Track 4 is `auto` so it collapses to nothing
       when a row has no licence and the 1fr offer column absorbs it. */
    grid-template-columns: 28px 160px 1fr auto 64px 148px;
    column-gap: var(--gh-space-3x);
    row-gap: 0;
    min-height: var(--gh-rank-row-h);
    padding: var(--gh-space-1_5x) var(--gh-space-2_5x) var(--gh-space-1_5x) 18px;
  }

  /* grid-row is restated on every child, including the ones that would land
     on row 1 by auto-placement anyway. A single row is the whole point of
     this layout; leaving it implicit is what let a stray item invent a
     second row before. */
  .hp-v2 .hp-rank__num     { grid-column: 1; grid-row: 1; }
  .hp-v2 .hp-rank__brand   { grid-column: 2; grid-row: 1; justify-self: stretch; text-align: center; }
  .hp-v2 .hp-rank__offer   { grid-column: 3; grid-row: 1; }
  .hp-v2 .hp-rank__licence { grid-column: 4; grid-row: 1; white-space: nowrap; }
  .hp-v2 .hp-rank__meta    { grid-column: 5; grid-row: 1; flex-direction: column; gap: var(--gh-space-0_5x); }
  .hp-v2 .hp-rank .hp-btn  { grid-column: 6; grid-row: 1; }

  .hp-v2 .hp-rank__review { padding-block: 0; }
}

/* Small laptops / iPad landscape, 992-1199, and ONLY on the rows that carry a
   licence. Six tracks plus a licence string is more than 960px of container
   can hold: nowrap in the `auto` track took ~300px off the 1fr offer column
   and wrapped the offer to four lines, which made that one row 154px against
   76px for its neighbours. Dropping the licence to a second line under the
   offer costs a line of height instead of a broken row. Rows without a
   licence never get row 2, so they are untouched. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .hp-v2 .hp-rank { row-gap: var(--gh-space-0_5x); }

  .hp-v2 .hp-rank__licence {
    grid-column: 3 / -1;
    grid-row: 2;
    white-space: normal;
  }
}

/* ==========================================================================
   DISCLAIMER on the dark section
   --------------------------------------------------------------------------
   .disclaimer-comman is styled by style.css for a LIGHT ground, so its dark
   text lands on navy and is unreadable. Restyled here for the dark section
   using the design-system alpha ramp rather than a flat white: the label sits
   at full white, the body at 72%, links at 85% and underlined so they are
   still identifiable as links without shouting.

   Scoped inside .hp-v2 only — the same component on every other page of the
   site is untouched.
   ========================================================================== */

.hp-v2 .hp-money .disclaimer,
.hp-v2 .hp-money .disclaimer-comman {
  display: flex;
  align-items: flex-start;
  gap: var(--gh-space-1_5x);
  padding: var(--gh-space-3x) 0 0;
  border-top: 1px solid var(--gh-hairline-on-dark-alt);
  background: none;
  color: var(--gh-text-on-dark-soft);
  font-family: var(--gh-font-body);
  font-size: var(--gh-meta-size-lg);
  line-height: var(--gh-leading-xs);
}

.hp-v2 .hp-money .disclaimer > strong {
  display: inline-flex;
  align-items: center;
  gap: var(--gh-space-1x);
  flex: none;
  color: var(--gh-text-on-dark);
  font-family: var(--gh-font-meta);
  font-size: var(--gh-micro-size);
  font-weight: var(--gh-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-chip);
  white-space: nowrap;
}

/* The icon is a single-colour SVG authored for light backgrounds; forcing it
   to white is more reliable than shipping a second asset. */
.hp-v2 .hp-money .disclaimer > strong img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.hp-v2 .hp-money .hp-disclaimer__txt,
.hp-v2 .hp-money .hp-disclaimer__txt p,
.hp-v2 .hp-money .hp-disclaimer__txt em,
.hp-v2 .hp-money .hp-disclaimer__txt strong {
  color: var(--gh-text-on-dark-soft);
  font-size: var(--gh-meta-size-lg);
  line-height: var(--gh-leading-xs);
}

.hp-v2 .hp-money .hp-disclaimer__txt p { margin: 0; }
.hp-v2 .hp-money .hp-disclaimer__txt p + p { margin-top: var(--gh-space-1x); }

/* The 18+ lead-in stays the most prominent thing in the block. */
.hp-v2 .hp-money .hp-disclaimer__txt strong,
.hp-v2 .hp-money .hp-disclaimer__txt strong em {
  color: var(--gh-text-on-dark);
  font-weight: var(--gh-title-weight);
}

.hp-v2 .hp-money .hp-disclaimer__txt a {
  color: var(--gh-on-dark-85);
  text-decoration: underline;
}

.hp-v2 .hp-money .hp-disclaimer__txt a:hover { color: var(--gh-accent-400); }

/* style.css has `.disclaimer * { font-family: Helvetica; font-size: 14px }` —
   a universal selector that would override the tokens above. Beaten on
   specificity rather than with !important. */
.hp-v2 .hp-money .disclaimer .hp-disclaimer__txt * {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Defensive: if anything ever re-adds `active`, style.css would clamp this to
   height: 23px. Four classes outranks its two, so no !important needed. */
.hp-v2 .hp-money .disclaimer.disclaimer-comman.active {
  height: auto;
  overflow: visible;
}

@media screen and (max-width: 767px) {
  .hp-v2 .hp-money .disclaimer,
  .hp-v2 .hp-money .disclaimer-comman { flex-direction: column; gap: var(--gh-space-1x); }
}

/* The affiliate / responsible-gambling disclosure. Never hidden, never
   collapsed, and it stays with the offers it qualifies. */
.hp-v2 .hp-money__disclosure {
  font-size: var(--gh-meta-size-lg);
  line-height: var(--gh-leading-xs);
  color: var(--gh-on-dark-55);
}

.hp-v2 .hp-money__disclosure a { color: var(--gh-on-dark-85); text-decoration: underline; }

@media screen and (max-width: 767px) {
  .hp-v2 .hp-money__geo { white-space: normal; }
  .hp-v2 .hp-slot__actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. Same instincts DONE
   ========================================================================== */

.hp-v2 .hp-bridge { display: flex; flex-direction: column; gap: var(--gh-grid-gap-lg); }

.hp-v2 .hp-bridge__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gh-grid-gap);
}

.hp-v2 .hp-bridge__card {
  display: flex;
  flex-direction: column;
  gap: var(--gh-bridge-gap);
  padding: var(--gh-bridge-pad);
  border: 1px solid var(--gh-card-border);
  border-radius: var(--gh-radius);
  background: var(--gh-surface);
}

.hp-v2 .hp-bridge__path {
  line-height: var(--gh-leading-meta);
  display: flex;
  align-items: center;
  gap: var(--gh-space-1_5x);
  font-family: var(--gh-font-heading);
  font-size: var(--gh-body-size-sm);
  font-weight: var(--gh-title-weight);
  color: var(--gh-navy-850);
}

.hp-v2 .hp-bridge__path .hp-chev { width: 8px; height: 14px; }
.hp-v2 .hp-bridge__to { color: var(--gh-accent-400); }

.hp-v2 .hp-bridge__title {
  font-family: var(--gh-font-heading);
  font-size: var(--gh-bridge-title-size);
  line-height: var(--gh-bridge-title-leading);
  font-weight: var(--gh-emphasis-weight);
  color: var(--gh-text);
}

.hp-v2 .hp-bridge__body { color: var(--gh-text-body); }

.hp-v2 .hp-bridge__cta {
  line-height: var(--gh-leading-meta);
  margin-top: auto;
  font-family: var(--gh-font-heading);
  font-size: var(--gh-body-size-sm);
  font-weight: var(--gh-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-chip);
  color: var(--gh-accent-400);
}

@media screen and (max-width: 991px) { .hp-v2 .hp-bridge__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   6. Trust band     DONE
   ========================================================================== */

.hp-v2 .hp-band {
  display: flex;
  overflow: hidden;
  border-radius: var(--gh-radius);
  background: var(--gh-surface-promo);
  color: var(--gh-text-on-promo);
}

/* The comp's left panel is a flat bar graphic. Drawn with a gradient so it
   scales and needs no asset. */
.hp-v2 .hp-band__art {
  flex: 0 0 var(--gh-band-art-w);
  background:
    repeating-linear-gradient(90deg,
      var(--gh-promo-bars) 0 var(--gh-band-bar-w),
      var(--gh-accent-500) var(--gh-band-bar-w) calc(var(--gh-band-bar-w) * 2));
}

.hp-v2 .hp-band__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gh-bridge-gap);
  padding: var(--gh-band-pad-y) var(--gh-band-pad-x);
}

.hp-v2 .hp-band__eyebrow {
  line-height: var(--gh-leading-meta);
  font-family: var(--gh-font-meta);
  font-size: var(--gh-meta-size);
  font-weight: var(--gh-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-eyebrow);
  color: var(--gh-text-on-promo);
}

.hp-v2 .hp-band__title {
  font-family: var(--gh-font-display);
  font-size: var(--gh-band-title-size);
  line-height: var(--gh-band-title-leading);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gh-text);
}

.hp-v2 .hp-band__body p {
  max-width: var(--gh-band-copy-max);
  color: var(--gh-neutral-750);
}

.hp-v2 .hp-band__stats { display: flex; flex-wrap: wrap; gap: var(--gh-band-stat-gap); }

.hp-v2 .hp-band__stat { display: flex; flex-direction: column; gap: var(--gh-space-0_5x); }

.hp-v2 .hp-band__figure {
  font-family: var(--gh-font-display);
  font-size: var(--gh-stat-size-sm);
  line-height: var(--gh-stat-leading-sm);
  color: var(--gh-text);
}

.hp-v2 .hp-band__label {
  line-height: var(--gh-leading-meta); font-size: var(--gh-body-size-sm); color: var(--gh-text-on-promo); }

.hp-v2 .hp-band .hp-btn { align-self: flex-start; height: var(--gh-band-cta-h); }

@media screen and (max-width: 991px) {
  .hp-v2 .hp-band { flex-direction: column; }
  .hp-v2 .hp-band__art { flex: 0 0 120px; }
  .hp-v2 .hp-band__body { padding: var(--gh-space-4x) var(--gh-space-3x); }
}

/* ==========================================================================
   7. Platforms      DONE
   ========================================================================== */

.hp-v2 .hp-platforms {
  display: grid;
  grid-template-columns: repeat(var(--gh-platform-cols), 1fr);
  gap: var(--gh-platform-gap);
}

.hp-v2 .hp-platform { display: flex; flex-direction: column; gap: var(--gh-platform-row-gap); }

.hp-v2 .hp-platform__head {
  display: flex;
  align-items: center;
  gap: var(--gh-space-1x);
}

.hp-v2 .hp-platform__title {
  font-family: var(--gh-font-display);
  font-size: var(--gh-column-title-size);
  line-height: var(--gh-column-title-leading);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

.hp-v2 .hp-platform__rule { flex: 1 1 auto; height: 1px; background: var(--gh-hairline-on-light); }

/* Same unwrapping as the mosaic tile, but simpler: nothing inside .hp-item is
   positioned, so the title link's own ::after can stretch over the whole row
   and no separate overlay element is needed. */
.hp-v2 .hp-item { position: relative; display: flex; gap: var(--gh-space-1_5x); }

.hp-v2 .hp-item__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hp-v2 .hp-item .hp-meta__taxonomy {
  position: relative;
  z-index: 2;
}

.hp-v2 .hp-item:hover .hp-item__title { color: var(--gh-accent-400); }

.hp-v2 .hp-item__thumb {
  flex: 0 0 var(--gh-thumb-w);
  width: var(--gh-thumb-w);
  height: var(--gh-thumb-h);
  border-radius: var(--gh-radius-thumb);
  background: var(--gh-media-placeholder);
  object-fit: cover;
}

.hp-v2 .hp-item__body { display: flex; flex-direction: column; gap: 6px; }

.hp-v2 .hp-item__title {
  font-family: var(--gh-font-heading);
  font-size: var(--gh-card-title-size-sm);
  line-height: var(--gh-card-title-leading-sm);
  font-weight: var(--gh-title-weight);
  color: var(--gh-text);
}

@media screen and (max-width: 1199px) { .hp-v2 { --gh-platform-cols: 2; } }
@media screen and (max-width: 575px)  { .hp-v2 { --gh-platform-cols: 1; } }

/* ==========================================================================
   EMPTY STATE — rendered only for logged-in editors, for lanes with no content
   ========================================================================== */

.hp-v2 .hp-empty {
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-1x);
  padding: var(--gh-space-4x);
  border: 1px dashed var(--gh-badge-border);
  border-radius: var(--gh-radius);
  color: var(--gh-on-dark-72);
}

.hp-v2 .hp-section:not([class*="--dark"]) .hp-empty {
  border-color: var(--gh-card-border);
  color: var(--gh-text-muted);
}

.hp-v2 .hp-empty__label {
  font-family: var(--gh-font-meta);
  font-size: var(--gh-micro-size);
  font-weight: var(--gh-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--gh-tracking-chip);
  color: var(--gh-accent-400);
}

/* ==========================================================================
   SECTIONS — remaining structure awaits markup. Order in frame 2a:
   ==========================================================================
   0. Header          80px,  navy-900   — adds Real Money Gaming + 18+
   1. Hero            DONE
   2. News mosaic     DONE
   3. One score      DONE
   4. Real money     DONE
   5. Same instincts DONE
   6. Trust band     DONE
   7. Platforms      DONE
   8. Footer          359px, navy-900
*/

/* ==========================================================================
   LEGACY ISLAND — a theme section rendered inside the v2 scope
   --------------------------------------------------------------------------
   .gaming-portal-section is styled entirely by assets/css/style.css. Five
   properties inherit down from .hp-v2 and would corrupt it — the body face
   (Lato Light 16/26), the text colour, and the link reset. This block restores
   the theme's own base for that subtree and nothing else; every legacy class
   inside it then behaves exactly as it does on the live homepage.

   Deliberately narrow: it does not restyle the section, it stops the v2 base
   from reaching it.
   ========================================================================== */

.hp-v2 .hp-legacy {
  font-family: var(--gh-font-heading);      /* Plus Jakarta Sans — theme base */
  font-size: var(--gh-body-size);
  line-height: var(--gh-legacy-leading);
  font-weight: var(--gh-body-weight);
  color: var(--gh-legacy-text);
}

/* .hp-v2 a sets `color: inherit`, which outranks .orange-btn's own colour
   (0,1,1) vs (0,1,0). Restore it rather than weakening the base rule. */
.hp-v2 .hp-legacy .orange-btn { color: var(--gh-neutral-0); }
.hp-v2 .hp-legacy .orange-btn:hover { color: var(--gh-neutral-0); }

/* The section provides its own vertical rhythm (margin: 80px 0 104px), so the
   wrapper adds none. */
.hp-v2 .hp-legacy { margin-block: 0; }