/* ==========================================================================
   Homepage v3 — loaded only on the "Homepage V3" template, scoped to .hp-v3.
   Layered on top of home-new.css: this file adds the new hero and overrides
   the news section's ground. Everything else still comes from v2.

   Ported from "GamesHub Homepage v3 (Figma).dc.html". The comp's literals map
   onto tokens that already exist, so they are used rather than re-declared:
     #000033 -> --gh-navy-900     #FD855D -> --gh-accent-300
     #FFFFFF -> --gh-neutral-0    Teko    -> --gh-font-hero
   Values with no token equivalent (the wave lavender, the plate opacity, the
   vignette) are declared here as --gh-hero3-* so they stay findable.
   ========================================================================== */

.hp-v3 {
  --gh-hero3-plate-op:   .72;
  --gh-hero3-wave-h:     45px;
  --gh-hero3-wave-back:  #9a9acf;   /* lavender band under the white sweep */
  --gh-hero3-lede-max:   592px;
}

/* --------------------------------------------------------------------------
   1. HERO
   Full-bleed. Height is driven by the bottom padding, which is viewport-
   relative so the character strip keeps its proportion as the page widens.
   -------------------------------------------------------------------------- */

.hp-v3 .hp-hero3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Height tracks the art: the strip is 1600x357 drawn at 100% width, so it
     stands ~22.3vw tall. Matching the section to it puts the copy level with
     the characters instead of stacked above them. The comp's literal
     `calc(78px + 22.4vw)` bottom padding did the latter — past ~1600px it
     reserved more empty space than the art needed and pushed the copy up out
     of the artwork. Clamped so ultrawide does not run away. */
  min-height: clamp(400px, 19vw + 95px, 560px);
  padding: 52px 24px calc(36px + var(--gh-hero3-wave-h));
  background: var(--gh-navy-900);
  overflow: hidden;
}

.hp-v3 .hp-hero3__bg { position: absolute; inset: 0; overflow: hidden; }

/* Slot-grid plate, held back so it reads as texture rather than content. */
.hp-v3 .hp-hero3__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: var(--gh-hero3-plate-op);
}

.hp-v3 .hp-hero3__grad {
  position: absolute;
  inset: 0;
  /*
   * Dark at the top (blends into the header), open through the middle so the
   * plate's colour reads, then dark again into the bottom edge.
   *
   * That last part matters: the gradient used to finish fully transparent and
   * the vignette ellipse has faded out by then too, so nothing was holding the
   * plate back at the bottom — it rendered at its full .72 and the slot
   * thumbnails showed as a bright band between the characters and the wave.
   * The characters paint above this layer, so darkening here does not dim them.
   */
  background: linear-gradient(180deg,
    rgba(8, 6, 18, .78) 0%,
    rgba(24, 29, 115, .10) 58%,
    rgba(0, 0, 51, .60) 86%,
    rgba(0, 0, 51, .95) 100%);
}

/* Character strip. The mask fades its top edge into the plate so the cut-outs
   have no hard boundary; without it the 1600x357 crop line is visible. */
.hp-v3 .hp-hero3__chars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--gh-hero3-wave-h);
  width: 100%;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
}

.hp-v3 .hp-hero3__vignette {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Sized off BOTH axes, not `padding-bottom: 120%`. Percentage padding
     resolves against width, so the comp's circle was 1.2x the hero's WIDTH
     tall — fine at the comp's ~715px hero, but once the section got shorter
     the visible slice was the gradient's near-black core and the colour
     underneath disappeared. An ellipse tied to height holds the same shape at
     any section height. */
  width: 132%;
  height: 165%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(2, 2, 2, .52) 0%, rgba(2, 2, 2, .20) 58%, rgba(2, 2, 2, 0) 100%);
}

/* Darkens both ends so the outermost characters fall away instead of being
   sliced by the viewport edge. */
.hp-v3 .hp-hero3__edges {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 51, .30) 0%, rgba(0, 0, 51, 0) 24%, rgba(0, 0, 51, 0) 76%, rgba(0, 0, 51, .30) 100%);
}

.hp-v3 .hp-hero3__content {
  position: relative;                    /* above the art layer */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
}

.hp-v3 .hp-hero3__eyebrow {
  align-self: stretch;
  font-family: var(--gh-font-meta);
  font-weight: 700;
  font-size: 14px;
  line-height: 23px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gh-accent-300);
}

.hp-v3 .hp-hero3__title {
  align-self: stretch;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hp-v3 .hp-hero3__title span {
  align-self: stretch;
  font-family: var(--gh-font-hero);
  font-weight: 500;
  font-size: 65px;
  line-height: 66px;
  text-transform: uppercase;
  text-align: center;
  color: var(--gh-text-on-dark);
  white-space: nowrap;                   /* holds the comp's two-line shape */
}

.hp-v3 .hp-hero3__lede {
  width: 100%;
  max-width: var(--gh-hero3-lede-max);
  margin: 0;
  font-family: var(--gh-font-meta);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  text-wrap: pretty;
  color: var(--gh-on-dark-90, #e6e6f2);
}

/* The two-tone sweep at the bottom edge. Clip-path rather than an SVG: no
   extra request, and it scales without a viewBox to maintain. */
.hp-v3 .hp-hero3__wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--gh-hero3-wave-h);
  overflow: hidden;
}

.hp-v3 .hp-hero3__wave-back,
.hp-v3 .hp-hero3__wave-front { position: absolute; inset: 0; }

.hp-v3 .hp-hero3__wave-back {
  background: var(--gh-hero3-wave-back);
  clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 100%);
}

.hp-v3 .hp-hero3__wave-front {
  background: var(--gh-neutral-0);
  clip-path: polygon(0 82%, 100% 48%, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   2. NEWS SECTION on white
   Only the GROUND changes. The tiles are deliberately untouched: .hp-v2
   .hp-tile carries its own navy background and on-dark colour, and
   .hp-tile__body is absolutely positioned over the artwork — so tile titles,
   chips and meta sit on the image, not on the section. Recolouring them for a
   light ground puts dark text on dark art. Only the chrome outside the tiles
   flips.
   -------------------------------------------------------------------------- */

.hp-v3 .hp-section--news {
  background: var(--gh-neutral-0);
  color: var(--gh-neutral-800);
}

/* The section head is the only part standing on the new white ground. */
.hp-v3 .hp-section--news .hp-section-head__rule { background: var(--gh-hairline-on-light); }
.hp-v3 .hp-section--news .hp-section-head__aside { color: var(--gh-text-muted); }

/* --------------------------------------------------------------------------
   3. RESPONSIVE
   Breakpoint is the theme's 991px, not the comp's 1140px, so the hero turns
   over at the same width as every other section on the page.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .hp-v3 .hp-hero3__title span {
    font-size: 46px;
    line-height: 58px;
    white-space: normal;
  }
  .hp-v3 .hp-hero3__lede { font-size: 16px; line-height: 26px; }
}

@media screen and (max-width: 560px) {
  .hp-v3 .hp-hero3 { min-height: 380px; }
  .hp-v3 .hp-hero3__title span { font-size: 36px; line-height: 42px; }
  /* The strip is 1600x357; at phone width the cut-outs are too small to read,
     so it drops back to a texture behind the copy rather than a subject. */
  .hp-v3 .hp-hero3__chars { max-height: 62%; opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-v3 .hp-hero3 * { transition: none !important; animation: none !important; }
}