/* ==========================================================================
   Hero block — full-width, uncropped banner image with overlaid content.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-dark);
  display: flex;
  align-items: center;
  /* Guarantees room for the centered overlay content even when the wide
     hero image's natural (uncropped) height would otherwise be too short,
     e.g. on narrow mobile viewports. The image itself is never cropped —
     it just centers within a taller box, with the dark background filling
     any extra space above/below it. */
  min-height: clamp(24rem, 88vw, 34rem);
}

.hero__media {
  position: relative;
  width: 100%;
  line-height: 0;
}

.hero__image {
  display: block;
  width: 100%;
  height: auto; /* natural ratio preserved — never cropped */
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 30, 33, 0.6) 0%, rgba(13, 30, 33, 0.5) 45%, rgba(13, 30, 33, 0.72) 100%);
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.9rem;
  padding-block: clamp(1.25rem, 4vw, 3rem);
}

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

.hero__breadcrumb a {
  text-decoration: none;
}

.hero__rating {
  align-self: center;
  background: rgba(20, 41, 43, 0.7);
  backdrop-filter: blur(4px);
}

.hero__title {
  max-width: 42rem;
  margin-inline: auto;
  line-height: var(--line-height-hero);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.hero__subtitle {
  max-width: 36rem;
  margin-top: 0;
  margin-inline: auto;
  color: var(--color-white);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hero__cta {
  align-self: center;
  margin-top: 0.4rem;
}

@media (max-width: 30em) {
  .hero__content {
    padding-block: 1.25rem 1.5rem;
    gap: 0.65rem;
  }
}

/* ---- Mobile: the image is purely a background — crop it to fill the box,
   whatever that means for the artwork. Desktop keeps the full, uncropped
   image (see .hero__image above); this override only applies below 768px. ---- */
@media (max-width: 47.9375em) {
  .hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}