/* Vertical Image Scroller - frontend styles
 *
 * Each instance authors its desktop sizes as inline "-base" custom
 * properties (--column-width-base, --column-height-base,
 * --image-height-base, --row-gap-base, --vis-column-gap-base). This
 * stylesheet turns those into the "working" properties actually used for
 * layout, and scales them down at narrower breakpoints with calc() below.
 * Responsive sizing therefore needs no extra per-breakpoint settings in
 * wp-admin or Elementor.
 *
 * Columns never wrap onto a second row. Instead flexbox shrinks all of
 * them together (evenly) as the screen narrows, so the full set of columns
 * always stays on one row, just thinner. Only past a very narrow cutoff
 * (where that would make columns uncomfortably thin) does the last column
 * drop off, leaving the rest to share the row.
 *
 * Column height is always clamped to the tallest it can be filled by its
 * own images (min() below), so a column never shows empty space under the
 * last image while waiting to loop.
 */

.vis-wrapper {
	width: 100%;
	--vis-column-gap: var( --vis-column-gap-base, 20px );
	--vis-column-width: var( --column-width-base, 260px );
}

.vis-columns {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: var( --vis-column-gap );
	width: 100%;
}

.vis-col {
	position: relative;
	overflow: hidden;
	flex: 0 1 var( --vis-column-width );
	min-width: 0; /* allow shrinking below the images' intrinsic size */
	--column-height: var( --column-height-base, 500px );
	--image-height: var( --image-height-base, 200px );
	--row-gap: var( --row-gap-base, 10px );
	/* N images, but only (N-1) gaps between them — see the img rule below,
	 * which drops the trailing margin after the last image. Without the
	 * "- var(--row-gap)" here, the scroll distance overshot by one gap's
	 * worth, leaving a sliver of blank space below the last image instead
	 * of landing exactly on it at full scroll. */
	--content-height: calc( ( ( var( --image-height ) + var( --row-gap ) ) * var( --num-images ) ) - var( --row-gap ) );
	height: min( var( --column-height ), var( --content-height ) );
	mask-image: linear-gradient( rgba(0,0,0,0) 0%, #000 20%, #000 80%, rgba(0,0,0,0) 100% );
	-webkit-mask-image: linear-gradient( rgba(0,0,0,0) 0%, #000 20%, #000 80%, rgba(0,0,0,0) 100% );
}

.vis-col.vis-no-mask {
	mask-image: none;
	-webkit-mask-image: none;
}

.vis-scroll-container {
	display: flex;
	flex-direction: column;
}

/*
 * A short delay before the animation starts, combined with
 * animation-fill-mode: backwards, means the column sits still showing its
 * normal starting frame first — so on load you see the images at rest,
 * then it eases into scrolling, instead of already being mid-motion.
 * The two columns are staggered slightly so they don't all start moving
 * in lockstep.
 */
.vis-col.up .vis-scroll-container {
	animation: vis-scroll-up var( --vis-duration, 15s ) linear 0.6s infinite alternate backwards;
}

.vis-col.down .vis-scroll-container {
	animation: vis-scroll-down var( --vis-duration, 15s ) linear 0.9s infinite alternate backwards;
}

.vis-scroll-container img {
	height: var( --image-height );
	width: 100%;
	margin: 0 0 var( --row-gap );
	padding: 0;
	object-fit: cover;
	display: block;
}

.vis-scroll-container img:last-child {
	margin-bottom: 0;
}

@keyframes vis-scroll-up {
	0% {
		transform: translateY( 0px );
	}
	100% {
		transform: translateY( calc( -1 * ( var( --content-height ) - min( var( --column-height ), var( --content-height ) ) ) ) );
	}
}

@keyframes vis-scroll-down {
	0% {
		transform: translateY( calc( -1 * ( var( --content-height ) - min( var( --column-height ), var( --content-height ) ) ) ) );
	}
	100% {
		transform: translateY( 0px );
	}
}

/* Tablets and small laptops */
@media ( max-width: 1024px ) {
	.vis-wrapper {
		--vis-column-gap: calc( var( --vis-column-gap-base, 20px ) * 0.6 );
	}
	.vis-col {
		--column-height: calc( var( --column-height-base, 500px ) * 0.75 );
		--image-height: calc( var( --image-height-base, 200px ) * 0.85 );
		--row-gap: calc( var( --row-gap-base, 10px ) * 0.8 );
	}
}

/* Phones */
@media ( max-width: 600px ) {
	.vis-wrapper {
		--vis-column-gap: calc( var( --vis-column-gap-base, 20px ) * 0.4 );
	}
	.vis-col {
		--column-height: calc( var( --column-height-base, 500px ) * 0.55 );
		--image-height: calc( var( --image-height-base, 200px ) * 0.65 );
		--row-gap: calc( var( --row-gap-base, 10px ) * 0.6 );
	}
}

/* Very narrow phones: shrinking every column further would make them too
 * thin to read, so drop the last column instead and let the rest share
 * the row (still without wrapping). */
@media ( max-width: 360px ) {
	.vis-columns .vis-col:last-child {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.vis-col.up .vis-scroll-container,
	.vis-col.down .vis-scroll-container {
		animation: none;
	}
}