/* ==========================================================================
   Hero block
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-dark);
  background-image: linear-gradient(180deg, rgba(23, 5, 29, 0.55) 0%, rgba(23, 5, 29, 0.92) 100%), var(--hero-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  min-height: clamp(20rem, 55vw, 30rem);
  padding-block: 2.5rem clamp(2.5rem, 4vw, 4rem);
  /* Clips the blurred backdrop layer's scale(1.15) bleed at ≥768px so it
     never pokes past the section edge or causes horizontal scroll. */
  overflow: hidden;
}

/* Below 768px: unchanged single background-image (dark gradient + the
   banner itself), unaffected by the layered treatment below. */
.hero__media {
  display: none;
}

/* From tablet width up, replace the plain single-layer background with a
   two-layer treatment: a full-bleed blurred/darkened backdrop, plus the
   same artwork shown sharp and anchored to the bottom at a fixed aspect
   ratio. Real banners measure 2.25:1–2.54:1 natively (checked via PIL
   against every /img/*-banner.webp file) — 2.8:1 is wider than all of
   them, so object-fit: cover on the sharp layer only ever trims
   top/bottom, never the sides where a character or logo sits. If a future
   banner is wider than ~2.8:1, this ratio must come down to match it (or
   that banner needs its own --hero-fg-ratio override) or cover will start
   cutting the sides. */
@media (min-width: 768px) {
  .hero {
    /* The layered treatment below takes over; this background is now
       just an inert fallback behind it.
       +15% taller than the original clamp(22rem, 32vw, 28rem) — the
       sharp foreground layer is bottom-anchored, so a shorter hero box
       clips more of the image's top off (where a character's head
       usually is) before the layer's own aspect-ratio crop even comes
       into play. Taller box = more headroom = less of the top lost. */
    min-height: clamp(25.3rem, 36.8vw, 32.2rem);
  }

  .hero__media {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* Preserves the same text-legibility darkening the mobile gradient
     gives, now sitting above both image layers and below the text. */
  .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(23, 5, 29, 0.5) 0%, rgba(23, 5, 29, 0.85) 100%);
  }

  /* Layer 1 — blurred, darkened, slightly scaled-up copy filling the
     whole box edge to edge. Scaled up so blur's edge softening never
     reveals an unblurred seam at the box boundary. */
  .hero__media-bg {
    position: absolute;
    inset: 0;
    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(48px) brightness(0.45) saturate(1.1);
    transform: scale(1.15);
  }

  /* Layer 2 — same artwork, sharp, anchored to the bottom of the box at
     a fixed aspect ratio, fading into the backdrop layer below it.
     Default ratio is 2.8/1.15 ≈ 2.43 — 15% taller than the original
     2.8, so 15% less of the image's top gets trimmed by this layer's own
     cover-fit before the hero-height crop above even applies. Kept above
     every real banner's native ratio (2.25:1 for 8 of the 9 banners) so
     cover still only ever trims top/bottom, never the sides. The one
     wider banner (bonus, 2.54:1) gets its own --hero-fg-ratio override
     below — 2.43 would sit *under* its native ratio and start cutting
     its sides, so it keeps a ratio at least as wide as the image itself. */
  .hero__media-fg {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    aspect-ratio: var(--hero-fg-ratio, 2.43);
    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
  }

  .hero__inner {
    position: relative;
    z-index: 1;
  }
}

.hero--home { --hero-image: url('/img/main-banner.webp'); }
.hero--bonus { --hero-image: url('/img/bonuses-banner.webp'); --hero-fg-ratio: 2.54; }
.hero--app { --hero-image: url('/img/app-banner.webp'); }
.hero--slots { --hero-image: url('/img/slots-banner.webp'); }
.hero--live { --hero-image: url('/img/live-banner.webp'); }
.hero--login { --hero-image: url('/img/login-banner.webp'); }
.hero--support { --hero-image: url('/img/support-banner.webp'); }
.hero--privacy { --hero-image: url('/img/privacy-policy-banner.webp'); }
.hero--responsible-gaming { --hero-image: url('/img/responsible-gaming-banner.webp'); }

.hero__inner {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
}

.hero__breadcrumb {
  margin-bottom: 0.5rem;
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent-light);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
  width: fit-content;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-accent-light);
  border-radius: var(--radius-pill);
}

.hero__title {
  margin-top: 0.25rem;
}

.hero__subtitle {
  color: var(--color-text-body);
  font-size: var(--font-size-body);
  max-width: 60ch;
  margin-bottom: 0;
}

.hero__cta {
  margin-top: 0.5rem;
  width: fit-content;
}