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

.hero {
  position: relative;
  /* contain, not cover: the source banner image (incl. the logo in its
     bottom-right corner) must always show at its full, uncropped size. */
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--color-bg-dark);
  color: var(--color-white);
  /* All banner images share the same ~2000x503 (≈3.976:1) aspect ratio.
     Without this, pages whose hero content is shorter (e.g. no CTA button,
     like Privacy Policy / Responsible Gaming) end up with a section that's
     relatively wider than that ratio, so "contain" fits the image by
     height instead of width — leaving empty gaps on the left/right.
     This min-height guarantees the section is always at least as tall as
     the image needs to span full width, on every page, regardless of how
     much text content is above/around it. 100 / 3.976 ≈ 25.15vw. */
  min-height: clamp(220px, 25.2vw, 760px);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 0, 47, 0.55) 0%, rgba(38, 0, 47, 0.92) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  /* Small top padding so content sits right under the sticky header, with
     no dead space above it; generous bottom padding keeps the section's
     overall height so the (uncropped, contain-fit) banner image still has
     room to show below the text. */
  padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  padding-bottom: clamp(3rem, 2.5rem + 3vw, 6rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 46rem;
}

.hero .breadcrumb {
  margin-bottom: 0.5rem;
}

.hero__rating {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 209, 42, 0.15);
  color: var(--color-heading-gold);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
}

.hero__title {
  margin: 0;
}

.hero__subtitle {
  color: var(--color-white);
  opacity: 0.92;
  max-width: 38rem;
  margin-bottom: 0;
}

.hero__cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Mobile: fill the whole block edge-to-edge, cropping is fine here — the
   "never crop" rule only matters on desktop, where the full banner
   (including the corner logo) is meant to read as one image. */
@media (max-width: 47.9375em) {
  .hero {
    background-size: cover;
  }
}