/* ==========================================================================
   Hero banner
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 60vh, 560px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(33, 7, 40, 0.92) 0%, rgba(33, 7, 40, 0.72) 45%, rgba(23, 5, 29, 0.55) 100%);
}
.hero__inner {
  display: grid;
  gap: 1.1rem;
  max-width: 720px;
  padding-block: var(--space-section);
}
.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  width: fit-content;
  background: rgba(23, 5, 29, 0.6);
  border: 1px solid rgba(255, 211, 41, 0.4);
  border-radius: 999px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}
.hero__stars { color: var(--color-accent-light); letter-spacing: 2px; }
.hero__rating-value { color: var(--color-heading); }
.hero__title { color: var(--color-white); }
.hero__subtitle { color: var(--color-text); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 56ch; }
.hero__actions { margin-top: 0.5rem; }

@media (max-width: 480px) {
  .hero__overlay {
    background: linear-gradient(180deg, rgba(33, 7, 40, 0.75) 0%, rgba(33, 7, 40, 0.9) 100%);
  }
}