.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  z-index: 0;
}

/* At wide viewports the container is wide enough that matching the source
   image's own ratio (2110x600) also leaves enough height for the overlaid
   text, so we can show the banner uncropped without clipping content. */
@media (min-width: 1440px) {
  .hero {
    aspect-ratio: 2110 / 600;
    min-height: 0;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 5, 29, 0.55) 0%, rgba(23, 5, 29, 0.92) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: 3rem;
  max-width: 720px;
}

.hero__breadcrumb {
  margin-bottom: 1rem;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-accent-light);
  color: var(--color-btn-text-dark);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-card);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  margin-bottom: 1rem;
}

.hero__title {
  margin-bottom: 1rem;
}

.hero__subtitle {
  color: var(--color-white);
  font-size: clamp(1rem, 2vw, 1.125rem);
  margin-bottom: 1.75rem;
  max-width: 620px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero[data-animate] .hero__content {
    animation: hero-fade-in 0.6s ease both;
  }
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}