/**
 * Logo Ticker Widget Styles
 *
 * Infinitely scrolling ticker of partner/client logos.
 * CSS-only animation: the logo set is duplicated in HTML and a flexbox
 * track animates from translateX(0) to translateX(-50%).
 *
 * Figma Comp: 2012:811
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Keyframes
   ========================================================================== */
@keyframes ticker-scroll {
	from {
		transform: translateX(0);
	}
	
	to {
		transform: translateX(-50%);
	}
}

/* ==========================================================================
   2. Container
   Break out of the Elementor container so the ticker spans the full viewport.
   margin-left: calc(50% - 50vw) shifts the element left by the difference
   between half the container width and half the viewport width, placing it
   flush with the left viewport edge regardless of the container's max-width.
   ========================================================================== */
.zededa-logo-ticker {
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ==========================================================================
   3. Track
   Duration is set via JS as --ticker-duration (calculated from track width
   and --ticker-speed). Falls back to 30s if JS hasn't run yet.
   ========================================================================== */
.zededa-logo-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: ticker-scroll var(--ticker-duration, 30s) linear infinite;
	will-change: transform;
	/* Trailing gap lives on the track as padding (not on the last item as margin)
	   so that width: max-content reliably includes it. This guarantees
	   translateX(-50%) lands exactly at the clone set start for a seamless loop. */
	padding-right: var(--ticker-logo-gap, var(--spacing-3xl));
}

/* ==========================================================================
   4. Logo Items
   ========================================================================== */
.zededa-logo-ticker__item {
	flex-shrink: 0;
	width: var(--ticker-item-width, 160px);
	margin-right: var(--ticker-logo-gap, var(--spacing-3xl));
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The last item's trailing gap is handled by the track's padding-right instead,
   so the loop seam gap equals every other gap exactly. */
.zededa-logo-ticker__item:last-child {
	margin-right: 0;
}

/* ==========================================================================
   5. Links — override Elementor kit global link styles
   ========================================================================== */
[class*="elementor-kit-"] .zededa-logo-ticker a {
	text-decoration: none;
	color: inherit;
}

.zededa-logo-ticker__link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: opacity .2s ease;
}

.zededa-logo-ticker__link:hover {
	opacity: .8;
}

/* ==========================================================================
   6. Logo Image
   Natural colors by default (no grayscale — Figma shows color logos).
   ========================================================================== */
.zededa-logo-ticker__logo {
	max-height: 80px;
	/* overridden by Elementor control */
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ==========================================================================
   7. Pause on Hover
   ========================================================================== */
.zededa-logo-ticker[data-pause-on-hover="true"]:hover .zededa-logo-ticker__track {
	animation-play-state: paused;
}

/* ==========================================================================
   8. Dark Container Variant (.zededa-bg-blue)
   ========================================================================== */
.zededa-bg-blue .zededa-logo-ticker__logo {
	filter: grayscale(1) brightness(.5) invert(1);
}

/* ==========================================================================
   9. Accessibility
   ========================================================================== */
.zededa-logo-ticker a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.zededa-logo-ticker__track {
		animation-play-state: paused;
	}
}

/* ==========================================================================
   10. Responsive: Mobile (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
	.zededa-logo-ticker__track {
		padding-right: var(--spacing-xl);
	}
	
	.zededa-logo-ticker__item {
		width: calc(var(--ticker-item-width, 160px) * .7);
		margin-right: var(--spacing-xl);
	}
	
	.zededa-logo-ticker__logo {
		max-height: 48px;
	}
}

/* ==========================================================================
   11. Static Display Mode
   When data-mode="static", logos wrap into a centered grid instead of
   scrolling. Clone items are not rendered server-side in this mode.
   ========================================================================== */
.zededa-logo-ticker[data-mode="static"] .zededa-logo-ticker__track {
	animation: none;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ticker-logo-gap, var(--spacing-3xl));
	padding-right: 0;
}

.zededa-logo-ticker[data-mode="static"] .zededa-logo-ticker__item {
	margin-right: 0;
}

.zededa-logo-ticker[data-mode="static"] .zededa-logo-ticker__item:last-child {
	margin-right: 0;
}