.bfam-category-banner {
	--bfam-banner-accent: #e52f3e;
	position: relative;
	width: 100vw;
	min-height: clamp(380px, 36vw, 560px);
	margin: 0 0 42px calc(50% - 50vw);
	overflow: hidden;
	background: #090909;
	color: #fff;
	isolation: isolate;
}

.bfam-category-banner__media,
.bfam-category-banner__poster,
.bfam-category-banner__video,
.bfam-category-banner__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bfam-category-banner__media {
	z-index: 0;
}

.bfam-category-banner__poster,
.bfam-category-banner__video {
	object-fit: cover;
	object-position: center;
}

.bfam-category-banner__poster {
	z-index: 0;
}

.bfam-category-banner__video {
	z-index: 1;
	opacity: 0;
	transition: opacity 600ms ease;
}

.bfam-category-banner__video.is-ready {
	opacity: 1;
}

.bfam-category-banner__overlay {
	z-index: 2;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.18) 68%, rgba(0, 0, 0, 0.08) 100%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.30), transparent 45%);
}

.bfam-category-banner__inner {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	width: min(1180px, calc(100% - 48px));
	min-height: clamp(380px, 36vw, 560px);
	margin: 0 auto;
	padding: 58px 0;
}

.bfam-category-banner__content {
	width: min(520px, 46%);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.48);
}

.bfam-category-banner__eyebrow {
	margin: 0 0 12px;
	color: var(--bfam-banner-accent);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.bfam-category-banner__title {
	margin: 0;
	color: #fff;
	font-size: clamp(2.65rem, 5.4vw, 5rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.96;
	text-transform: uppercase;
}

.bfam-category-banner__copy {
	max-width: 500px;
	margin: 20px 0 26px;
	color: rgba(255, 255, 255, 0.94);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.5;
}

.bfam-category-banner__button.button {
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

@media (max-width: 767px) {
	.bfam-category-banner {
		min-height: 410px;
		margin-bottom: 28px;
	}

	.bfam-category-banner__poster {
		object-position: 65% center;
	}

	.bfam-category-banner__overlay {
		background:
			linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.68) 54%, rgba(0, 0, 0, 0.20) 100%),
			linear-gradient(90deg, rgba(0, 0, 0, 0.36), transparent 76%);
	}

	.bfam-category-banner__inner {
		align-items: flex-end;
		width: min(100% - 36px, 560px);
		min-height: 410px;
		padding: 48px 0 38px;
	}

	.bfam-category-banner__content {
		width: 100%;
		text-align: center;
	}

	.bfam-category-banner__eyebrow {
		margin-bottom: 9px;
		font-size: 0.75rem;
	}

	.bfam-category-banner__title {
		font-size: clamp(2.35rem, 12vw, 3.4rem);
	}

	.bfam-category-banner__copy {
		margin: 14px auto 22px;
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bfam-category-banner__video {
		display: none;
	}
}