.hero {
  position: relative;
  overflow: hidden;
  /* Mobile (<768px): pure decorative background. The image fills this
     whole block — including wherever the CTA button ends up — rather
     than stopping at a fixed height independent of the content. */
  min-height: clamp(300px, 68vw, 400px);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* object-fit + explicit width/height (not "auto") on both axes, so the
   legacy width/height HTML attributes on the <img> tag never fight with
   these rules (that mismatch is what causes squished/letterboxed images). */
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Darkest near the top, where the text block now sits. */
  background: linear-gradient(
    180deg,
    rgba(7, 11, 29, 0.88) 0%,
    rgba(7, 11, 29, 0.55) 45%,
    rgba(7, 11, 29, 0.22) 100%
  );
}

.hero__content {
  grid-area: 1 / 1;
  align-self: start;
  justify-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-block: clamp(1.5rem, 5vw, 2.5rem) 1rem;
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
}

.hero__breadcrumb {
  margin-bottom: 0.25rem;
  justify-content: center;
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 194, 31, 0.14);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-heading-gold);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.hero__rating-stars {
  color: var(--color-accent-bg);
  letter-spacing: 0.05em;
}

.hero__title {
  color: var(--color-heading-gold);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.hero__subtitle {
  color: var(--color-white);
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
  max-width: 60ch;
}

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

@media (min-width: 768px) {
  /* Desktop/tablet: restored original behaviour — the whole banner image
     is shown uncropped at its natural aspect ratio (height follows the
     image, full page width), text block bottom-left aligned. Mobile
     (<768px) keeps the fixed-height decorative-cover treatment above. */
  .hero {
    display: grid;
    overflow: visible;
    min-height: 0;
  }

  .hero__media {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    height: auto;
    overflow: visible;
  }

  .hero__image {
    height: auto;
    object-fit: initial;
    object-position: initial;
  }

  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(7, 11, 29, 0.35) 0%,
      rgba(7, 11, 29, 0.55) 55%,
      rgba(7, 11, 29, 0.92) 100%
    );
  }

  .hero__content {
    grid-area: 1 / 1;
    align-self: end;
    justify-items: start;
    text-align: left;
    padding-block: 2rem clamp(2rem, 5vw, 4rem);
  }

  .hero__breadcrumb {
    justify-content: flex-start;
  }
}