/* Theme-aware hero backdrop overlays
   - Dark mode: dark overlay
   - Light mode: light (white) overlay
   Applied only when the hero has a backdrop: .hero--has-backdrop
*/
.hero.hero--has-backdrop { position: relative; overflow: hidden; }
.hero.hero--has-backdrop .hero__gradient {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.40) 100%);
}

/* Small overlay variant used on front-page */
.hero.hero--has-backdrop .hero__small-overlay {
	position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: normal;
	background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 100%);
}

/* Light theme: use white translucent overlays to keep text readable */
html[data-theme="light"] .hero.hero--has-backdrop .hero__gradient {
	background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.28) 100%);
}
html[data-theme="light"] .hero.hero--has-backdrop .hero__small-overlay {
	background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.16) 100%);
}

/* Ensure hero content sits above overlays */
.hero.hero--has-backdrop .hero__content { position: relative; z-index: 3; }

/* Safety for poster/images inside hero to remain above overlays */
.hero.hero--has-backdrop .hero__poster,
.hero.hero--has-backdrop .hero__info { position: relative; z-index: 4; }