/*
 * Structural defaults only. Everything a control can change comes from the
 * generated uploads/webangon-block-controls/post-{id}.css file.
 */
.wab-block {
	box-sizing: border-box;
}
.wab-block *,
.wab-block *::before,
.wab-block *::after {
	box-sizing: inherit;
}

/* ---- Background video (Group_Controls::BACKGROUND, type "video") --------
 * Printed inside the element the group styles; that element gets
 * position: relative + isolation from the group's video_link selector, so
 * the video sits over the background colour and under the content. */
.wab-bg-video {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
	container-type: size; /* lets the media cover the box with cqw/cqh, no JS */
	direction: ltr;
}
.wab-bg-video__media {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	max-width: none;
}
video.wab-bg-video__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
iframe.wab-bg-video__media {
	/* 16:9 cover */
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
}
@media (max-width: 767px) {
	.wab-bg-video--no-mobile {
		display: none;
	}
}

/* ---- Background slideshow (includes/class-slideshow.php, assets/slideshow.js)
 * Elementor's .elementor-background-slideshow on Splide. Only the Splide rules
 * the slideshow needs are here (scoped), so splide-core.css is not loaded.
 * Before Splide mounts only the starting image shows.
 * The .splide pair outranks splide.min.css (loaded later when a carousel is on
 * the page), whose .splide { position: relative; visibility: hidden } would
 * otherwise collapse the slideshow to 0px high. */
.wab-bg-slideshow,
.wab-bg-slideshow.splide {
	visibility: visible;
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}
.wab-bg-slideshow .splide__track {
	position: relative;
	z-index: 0;
	height: 100%;
	overflow: hidden;
}
.wab-bg-slideshow .splide__list {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	backface-visibility: hidden;
}
.wab-bg-slideshow .splide__track--ttb > .splide__list {
	display: block;
}
.wab-bg-slideshow .splide__slide {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	backface-visibility: hidden;
}
.wab-bg-slideshow:not(.is-initialized) .splide__slide:not(.is-active) {
	display: none;
}
.wab-bg-slideshow .splide__track--fade > .splide__list > .splide__slide {
	opacity: 0;
	z-index: 0;
}
.wab-bg-slideshow .splide__track--fade > .splide__list > .splide__slide.is-active {
	opacity: 1;
	z-index: 1;
}
.wab-bg-slideshow__image {
	width: 100%;
	height: 100%;
	background-position: 50%;
	background-size: cover;
}
.wab-ken-burns {
	transition-property: transform;
	transition-duration: 10s;
	transition-timing-function: linear;
}
.wab-ken-burns--out {
	transform: scale(1.3);
}
.wab-ken-burns--active {
	transition-duration: 20s;
}
.wab-ken-burns--active.wab-ken-burns--out {
	transform: scale(1);
}
.wab-ken-burns--active.wab-ken-burns--in {
	transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
	.wab-ken-burns {
		transition: none;
	}
}