/* [hero_vertical_slider] shortcode styles.
 * Extracted from Fluent Snippets 10-hero-vertical-slider-shortcode.php's
 * inline <style> block (verbatim).
 */
.vs-wrap {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: flex-start;
}
.vs-col {
	--col-h: 540px;
	--img-h: 220px;
	--gap: 16px;
	--speed: 18s;
	--dir: 1;
	--start: 0px;
	width: 100%;
	height: var(--col-h);
	overflow: hidden;
	position: relative;
	border-radius: 12px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}
.vs-col:hover .vs-track {
	animation-play-state: paused;
}
.vs-track {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	will-change: transform;
}
.vs-track img {
	height: var(--img-h);
	width: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.4s ease;
}
/* Scoped under .vs-wrap (not just .vs-track img) so this beats Elementor's
 * global kit CSS (".elementor img { border-radius: 0 }"), which has equal
 * specificity but loads after this stylesheet and otherwise wins. */
.vs-wrap .vs-track img {
	border-radius: 14px;
}
.vs-track img:hover {
	transform: scale(1.03);
	filter: brightness(1.08);
}
@keyframes vs-scroll-up {
	0%   { transform: translateY(0); }
	100% { transform: translateY(var(--scroll-dist)); }
}
@keyframes vs-scroll-down {
	0%   { transform: translateY(var(--scroll-dist)); }
	100% { transform: translateY(0); }
}
@media (max-width: 768px) {
	.vs-wrap { gap: 12px; }
	.vs-col { --col-h: 400px; --img-h: 160px; }
}
@media (max-width: 480px) {
	.vs-wrap {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding-bottom: 8px;
	}
	.vs-col {
		flex: 0 0 72vw;
		--col-h: 380px;
		--img-h: 140px;
		scroll-snap-align: start;
	}
	.vs-track {
		animation-play-state: running !important;
	}
	.vs-wrap::-webkit-scrollbar { display: none; }
	.vs-wrap { scrollbar-width: none; }
}