.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-primary);
  overflow: hidden;
}

/* Mobile (default): the image is purely a decorative background — it is
   absolutely positioned behind the content and cropped with object-fit,
   so the section's height is driven by the content instead of the image's
   own aspect ratio. That guarantees the H1, rating, subtitle and button
   always have as much room as they need and are never clipped. */
.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 29, 0.45) 0%,
    rgba(7, 11, 29, 0.65) 55%,
    rgba(7, 11, 29, 0.94) 100%
  );
}

.hero__content {
  position: relative;
}

.hero__content-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-2xl) var(--space-lg);
  max-width: 46rem;
}

.hero__content .breadcrumb {
  margin-bottom: var(--space-2xs);
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  width: fit-content;
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.hero__rating-stars {
  color: var(--color-accent-yellow);
  letter-spacing: 1px;
}

.hero__title {
  color: var(--color-heading-gold);
  margin-top: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero__subtitle {
  color: var(--color-white);
  font-size: var(--font-size-base);
  margin-top: 0;
  max-width: 40rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero__cta {
  margin-top: var(--space-2xs);
  width: fit-content;
}

/* Desktop and up: restore the original "whole, uncropped hero photo with
   text overlaid at the bottom" treatment — untouched from before. */
@media (min-width: 768px) {
  .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    line-height: 0;
  }

  .hero__media img {
    width: 100%;
    height: auto;
    object-fit: initial;
  }

  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(7, 11, 29, 0.15) 0%,
      rgba(7, 11, 29, 0.55) 60%,
      rgba(7, 11, 29, 0.94) 100%
    );
  }

  .hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
  }

  .hero__content-inner {
    padding-block: var(--space-xl) var(--space-2xl);
  }
}