.apcs-hero {
	position: relative;
}

.apcs-hero .wp-block-cover__image-background {
	transition: opacity 400ms ease;
}

.apcs-hero.apcs-hero--has-media-fader .wp-block-cover__image-background {
	opacity: 0;
}

.apcs-hero-media-fader {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: auto;
	width: 100vw;
	max-width: none !important;
	transform: translateX(-50%);
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	--apcs-hero-fade-duration: 900ms;
}

.apcs-hero-media-fader::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(142deg, rgb(5 28 38 / 72%) 0%, rgb(10 38 34 / 60%) 48%, rgb(11 30 56 / 74%) 100%);
}

.apcs-hero .wp-block-cover__inner-container > :not(.wp-block-apcs-platform-hero-media-fader) {
	position: relative;
	z-index: 2;
}

.apcs-hero-media-fader__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity var(--apcs-hero-fade-duration) ease;
}

.apcs-hero-media-fader__slide.is-active {
	opacity: 1;
}

.apcs-hero-media-fader__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 56%;
}

.apcs-hero-media-fader--empty {
	display: grid;
	place-items: end start;
	padding: 24px;
}

.apcs-hero-media-fader__empty {
	margin: 0;
	padding: 10px 12px;
	font-size: 12px;
	line-height: 1.4;
	color: #dbe7f8;
	background: rgb(5 10 20 / 62%);
	border: 1px dashed rgb(179 197 222 / 55%);
	border-radius: 8px;
}

.apcs-hero-media-fader-editor__list {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.apcs-hero-media-fader-editor__item {
	padding: 8px;
	border: 1px solid #d0d7de;
	border-radius: 8px;
	background: #fff;
}

.apcs-hero-media-fader-editor__label {
	margin: 0;
	font-weight: 600;
	font-size: 12px;
}

.apcs-hero-media-fader-editor__url {
	margin: 6px 0;
	font-size: 11px;
	color: #445064;
	word-break: break-all;
}

.apcs-hero-media-fader-editor__actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.apcs-hero-media-fader-editor-shell {
	position: relative;
	min-height: 220px;
	padding: 12px;
	outline: 1px dashed rgb(148 163 184 / 0.8);
	outline-offset: -1px;
	background: rgb(15 23 42 / 0.18);
	border-radius: 8px;
	cursor: pointer;
	isolation: isolate;
}

.apcs-hero .wp-block-cover__inner-container > .wp-block-apcs-platform-hero-media-fader.apcs-hero-media-fader-editor-shell {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0;
	outline: 0;
	border-radius: 0;
	background: transparent;
	cursor: default;
	z-index: 0;
}

.apcs-hero-media-fader-editor-shell .apcs-hero-media-fader {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 8px;
}

.apcs-hero .wp-block-cover__inner-container > .wp-block-apcs-platform-hero-media-fader.apcs-hero-media-fader-editor-shell .apcs-hero-media-fader {
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
	border-radius: 0;
}

.apcs-hero-media-fader-editor__hint {
	position: relative;
	z-index: 2;
	margin: 0 0 8px;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 1.4;
	color: #e2e8f0;
	background: rgb(15 23 42 / 0.72);
	border: 1px solid rgb(148 163 184 / 0.45);
	border-radius: 6px;
}

@media (max-width: 767px) {
	.apcs-hero-media-fader__media {
		object-position: center 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apcs-hero-media-fader__slide {
		transition: none;
	}
}