/**
 * Cover Block Fading Images — structural rules.
 *
 * The Cover Block's OWN background image is the base layer. Each ACF image is
 * injected from PHP as a `.cbfi-layer` <div> with its own inline
 * background-image. The crossfade timing is generated per-page (it depends on
 * how many images are set) and attached as inline CSS, so it is NOT here — this
 * file only holds the parts that never change, so it stays cacheable.
 */

.cover-block-fading-images {
	position: relative;
}

/*
 * Each injected ACF image. Sits above the Cover Block's native media
 * (z-index:0) thanks to DOM order, and below the overlay/content. Stacking
 * order between layers also follows DOM order (slot 1 lowest, slot 3 highest).
 */
.cover-block-fading-images .cbfi-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	pointer-events: none;
}

/*
 * On mobile, skip the fading images entirely — show only the Cover Block's
 * own background image as a plain static background.
 */
@media (max-width: 781px) {
	.cover-block-fading-images .cbfi-layer {
		display: none;
	}
}

/*
 * Respect users who have asked for reduced motion: show only the base image.
 * !important is needed to override the per-page animation injected inline.
 */
@media (prefers-reduced-motion: reduce) {
	.cover-block-fading-images .cbfi-layer {
		animation: none !important;
		opacity: 0 !important;
	}
}