/* Click-to-play video cover */
.saturn-video-cover { position: relative; margin: 0; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.saturn-video-cover__button { all: unset; position: absolute; inset: 0; display: block; cursor: pointer; }
.saturn-video-cover__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.saturn-video-cover__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(64px, 12vw, 100px);
	height: auto;
	transform: translate(-50%, -50%);
	color: #fff;
	opacity: 0.8;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.saturn-video-cover__button:hover .saturn-video-cover__icon,
.saturn-video-cover__button:focus-visible .saturn-video-cover__icon { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
.saturn-video-cover__button:hover .saturn-video-cover__image { transform: scale(1.02); }
.saturn-video-cover__button:focus-visible { outline: 3px solid var(--wp--preset--color--primary, #fab702); outline-offset: -3px; }
.saturn-video-cover__iframe, .saturn-video-cover__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Project photo slider */
.saturn-slider { position: relative; height: 100%; min-height: 320px; background: #111; }
.saturn-slider__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.saturn-slider__track::-webkit-scrollbar { display: none; }
.saturn-slider__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.saturn-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saturn-slider__prev, .saturn-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(238, 238, 238, 0.61);
	color: rgba(255, 105, 0, 0.9);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.saturn-slider__prev { left: 12px; }
.saturn-slider__next { right: 12px; }
.saturn-slider__prev:hover, .saturn-slider__next:hover { background: #fff; }
