/*
 * Keep text above the image tint when the Hero Banner uses per-slide text.
 * Loaded in both the front end and block editor.
 */
.hero--multiple > .hero__tint {
	display: none;
}

.hero--multiple .hero__text {
	z-index: 2;
}

/*
 * Allow each Hero block to control its height without page-level HTML or CSS.
 */
.hero[style*="--hero-height"],
.hero[style*="--hero-height"] .hero__carousel,
.hero[style*="--hero-height"] .slick-list,
.hero[style*="--hero-height"] .slick-track,
.hero[style*="--hero-height"] .hero__banner {
	height: var(--hero-height) !important;
	min-height: 0 !important;
}

/* Preserve the mobile override regardless of editor asset enqueue order. */
@media (max-width: 767px) {
	.hero[style*="--hero-height-mobile"],
	.hero[style*="--hero-height-mobile"] .hero__carousel,
	.hero[style*="--hero-height-mobile"] .slick-list,
	.hero[style*="--hero-height-mobile"] .slick-track,
	.hero[style*="--hero-height-mobile"] .hero__banner {
		height: var(--hero-height-mobile) !important;
	}
}

/* Mobile static heroes place their copy below the image in this theme. */
@media (max-width: 766px) {
	section.hero.hero--static[style*="--hero-height"] {
		height: auto !important;
	}
}