/* ==========================================================================
   JuvioX Marquee — Elementor widget frontend engine.
   Item width/gap/radius/logo-height/speed are set via CSS custom properties
   written by Elementor's own control "selectors" (see widget PHP) — this
   file only consumes them, it never hardcodes the current Meta Ads design.
   ========================================================================== */

.juviox-marquee {
	overflow: hidden;
	width: 100%;
}

.juviox-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --juviox-marquee-gap, 20px );
	width: max-content;
	will-change: transform;
	animation: juviox-marquee-scroll var( --juviox-marquee-duration, 35s ) linear infinite;
}

.juviox-marquee--right .juviox-marquee__track {
	animation-direction: reverse;
}

.juviox-marquee__item,
.juviox-marquee__clone > * {
	flex: 0 0 auto;
}

/* display:contents makes the clone wrapper's own box disappear, so its
   children lay out as direct children of the track — the exact loop
   distance is still measured geometrically by JS regardless (see
   juviox-marquee.js); this only keeps visual spacing consistent at the seam. */
.juviox-marquee__clone {
	display: contents;
}

@keyframes juviox-marquee-scroll {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( var( --juviox-marquee-distance, -50% ) ); }
}

/* ---- Cards mode ---------------------------------------------------- */
.juviox-marquee--cards .juviox-marquee__item {
	width: 320px; /* overridden per-instance by the widget's Item Width control */
}

.juviox-marquee--cards .juviox-marquee__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4; /* overridden per-instance by the widget's Aspect Ratio control */
	object-fit: cover;
	border-radius: 16px; /* overridden per-instance by the widget's Border Radius control */
}

/* ---- Logos mode ------------------------------------------------------ */
.juviox-marquee--logos .juviox-marquee__item {
	height: 48px; /* overridden per-instance by the widget's Logo Height control */
	width: auto;
}

.juviox-marquee--logos .juviox-marquee__image {
	display: block;
	height: 100%;
	width: auto;
	object-fit: contain;
}

@media ( prefers-reduced-motion: reduce ) {
	.juviox-marquee__track {
		animation: none;
		transform: none;
	}

	.juviox-marquee__clone {
		display: none;
	}
}