/* ==========================================================================
   Vendavo Logo Carousel Widget
   Horizontal marquee — baseline auto-scroll + scroll-coupled velocity.
   ==========================================================================
   Custom properties (set per-breakpoint by Elementor selectors):
     --lc-gap       gap between logo items
     --lc-offset    horizontal start offset
     --lc-slides    number of logos to show at once (empty = natural size)
   ========================================================================== */

   .vendavo-logo-carousel {
	--lc-gap: 80px;
	--lc-offset: 0px;

	position: relative;
	width: 100%;
	padding: 20px 0;
	/* keep transforms contained so edge-fade mask works */
}

/* Viewport = the window the track scrolls through. Overflow is clipped here
   so the track (which is 2x content wide) can translate freely. */
.vendavo-logo-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Prevent horizontal touch panning inside the carousel area */
	touch-action: pan-y;
}

/* Soft fade-out mask at the left and right edges */
.vendavo-logo-carousel.has-edge-fade .vendavo-logo-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 48px,
		#000 calc( 100% - 48px ),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 48px,
		#000 calc( 100% - 48px ),
		transparent 100%
	);
}

/* The track holds all logos and is translated horizontally by the JS loop.
   `margin-left: --lc-offset` shifts the start position and accepts negative
   values (unlike viewport padding). */
.vendavo-logo-track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: max-content;
	gap: var( --lc-gap, 80px );
	margin-left: var( --lc-offset, 0 );
	will-change: transform;
	transform: translate3d( 0, 0, 0 );
}

.vendavo-logo-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
	text-decoration: none;
	color: inherit;
}

/* Slides-to-show: JS reads the computed `--lc-slides` variable and writes
   explicit widths to each item.  Keep flex basis fixed so items don't grow. */
.vendavo-logo-item[data-lc-sized="1"] {
	flex: 0 0 auto;
}

/* ── Image sizing modes ── */

/* Fixed: uniform height, width auto (varies by logo). */
.vendavo-logo-carousel.is-fixed .vendavo-logo-item img {
	height: 32px;
	width: auto;
	max-width: 100%;
	display: block;
	user-select: none;
	pointer-events: none;
}

/* Natural: both height and width auto — render the image at its intrinsic
   size.  Clamped to the item box so slides-to-show still works. */
.vendavo-logo-carousel.is-auto .vendavo-logo-item img {
	height: auto;
	width: auto;
	max-width: 100%;
	display: block;
	user-select: none;
	pointer-events: none;
}

/* Responsive fallback (only used when no explicit logo_height control) */
@media ( max-width: 1024px ) {
	.vendavo-logo-carousel.is-fixed .vendavo-logo-item img { height: 28px; }
}
@media ( max-width: 767px ) {
	.vendavo-logo-carousel.is-fixed .vendavo-logo-item img { height: 24px; }
}