/**
 * ITners Logo Marquee — Front-end Stylesheet
 * Plugin URI: https://itners.ca
 * Version:    1.0.0
 */

/* ==========================================================================
   Wrapper
   ========================================================================== */

.itners-marquee-wrapper {
	overflow: hidden;
	width: 100%;
	padding: 20px 0;
	position: relative;
	box-sizing: border-box;
}

/* ==========================================================================
   Fade-edge overlay
   ========================================================================== */

.itners-marquee-wrapper.itners-fade-edges::before,
.itners-marquee-wrapper.itners-fade-edges::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--itners-fade-size, 80px);
	z-index: 2;
	pointer-events: none;
}

.itners-marquee-wrapper.itners-fade-edges::before {
	left: 0;
	background: linear-gradient(
		to right,
		var(--itners-fade-color, #fff) 0%,
		transparent 100%
	);
}

.itners-marquee-wrapper.itners-fade-edges::after {
	right: 0;
	background: linear-gradient(
		to left,
		var(--itners-fade-color, #fff) 0%,
		transparent 100%
	);
}

/* ==========================================================================
   Marquee track
   ========================================================================== */

.itners-marquee-track {
	display: flex;
	align-items: center;
	will-change: transform;
	width: max-content; /* Expands to fit all items naturally */
}

/* Static mode shown inside the Elementor editor (no animation) */
.itners-marquee-track.itners-editor-static {
	will-change: auto;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	gap: 20px;
}

/* ==========================================================================
   Logo items & images
   ========================================================================== */

.itners-logo-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 35px; /* Default gap — overridden by Elementor slider control */
}

.itners-logo-item a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

.itners-logo-img {
	height: 80px;       /* Default — overridden by Elementor slider control */
	width: auto;
	min-width: 40px;
	max-width: 200px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
	opacity: 1;
	filter: grayscale(0%);
	transition: opacity 0.3s ease, filter 0.3s ease;
	-webkit-user-drag: none;
	user-select: none;
}

/* ==========================================================================
   Elementor editor: tidy static grid
   ========================================================================== */

.itners-editor-static .itners-logo-item {
	padding: 10px 20px;
}

.itners-editor-static .itners-logo-img {
	height: 60px;
}