/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 0;
  background: var(--bg-dark);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 7, 40, 0.72) 0%, rgba(23, 5, 29, 0.92) 100%);
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}
.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(43, 13, 54, 0.75);
  border: 1px solid rgba(255, 211, 41, 0.4);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}
.hero__stars { color: var(--accent-light); letter-spacing: 2px; }
.hero__rating-value { color: var(--white); font-weight: var(--fw-bold); }
.hero__rating-label { color: var(--text-body); font-size: 0.85rem; }
.hero__title { color: var(--white); }
.hero__subtitle { color: var(--text-body); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 60ch; }
.hero__cta { margin-top: 0.5rem; font-size: 1.05rem; padding: 0.9rem 2rem; }

/* Breadcrumb inside hero — above H1, high contrast over the banner */
.breadcrumb--hero { padding: 0 0 0.25rem; }
.breadcrumb--hero ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.9rem; }
.breadcrumb--hero li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumb--hero li:not(:last-child)::after { content: "›"; color: var(--white); opacity: 0.7; }
.breadcrumb--hero a { color: var(--accent-light); font-weight: var(--fw-medium); }
.breadcrumb--hero a:hover { text-decoration: underline; }
.breadcrumb--hero [aria-current="page"] { color: var(--white); }