/**
 * Logo Showcase Lite
 *
 * Estructura (DOM mínimo):
 *   div.lsl  >  ul.lsl__track  >  li  >  [a]  >  img.lsl__img
 *
 * Modificadores:
 *   .lsl--auto   Marquee infinito (requiere que el JS añada .is-ready).
 *   .lsl--pause  Pausa al hover / foco.
 *   .lsl--rev    Movimiento hacia la derecha.
 *   .lsl--gray   Escala de grises con color al hover.
 *
 * Variables (se inyectan inline desde el shortcode):
 *   --lsl-speed  Tiempo que tarda cada logo en desplazarse su propio espacio.
 *   --lsl-count  Número de logos del set (velocidad constante sin importar cuántos haya).
 *   --lsl-w      Ancho de la caja fija de cada logo.
 *   --lsl-h      Alto de la caja fija de cada logo.
 *   --lsl-gap    Separación entre logos.
 *   --lsl-reps   Repeticiones del set (la calcula el JS para pantallas anchas).
 */

/* Contenedor / viewport ----------------------------------------------- */
.lsl {
	--lsl-speed: 3000ms;
	--lsl-count: 1;
	--lsl-w: 160px;
	--lsl-h: 60px;
	--lsl-gap: 48px;
	--lsl-reps: 1;

	/* El marquee se calcula en LTR; así funciona igual en sitios RTL. */
	direction: ltr;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	/* Aísla layout y pintado: los cambios internos no afectan al resto de la página. */
	contain: layout paint;
}

/* Pista ----------------------------------------------------------------- */
.lsl__track {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0 auto; /* Centra la fila si hay pocos logos (modo estático). */
	padding: 0;
	list-style: none;
}

/*
 * Se usa padding simétrico en lugar de `gap` para que el ancho total de la pista
 * sea exactamente el doble del set: así translate(-50%) hace un bucle perfecto.
 */
.lsl__track > li {
	flex: none;
	margin: 0;
	padding: 0 calc(var(--lsl-gap) / 2);
	line-height: 0;
}

.lsl__track a {
	display: block;
}

/* Logo: caja fija e idéntica para todos -------------------------------- */

/*
 * Temas y page builders (p. ej. Elementor: `.elementor img {height:auto; max-width:100%}`)
 * imponen reglas globales a todas las imágenes que dejarían el logo a su tamaño
 * original. Se blindan SOLO las dimensiones con mayor especificidad + !important;
 * es una excepción deliberada y acotada a este componente.
 * `object-fit: contain` encaja cualquier proporción (horizontal, cuadrada…) dentro
 * de la caja sin deformarla.
 */
.lsl .lsl__track .lsl__img {
	display: block;
	box-sizing: content-box;
	width: var(--lsl-w) !important;
	height: var(--lsl-h) !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
	object-position: center;
}

/* Escala de grises + color al hover / foco ------------------------------ */
.lsl--gray .lsl__track .lsl__img {
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.lsl--gray .lsl__track > li:hover .lsl__img,
.lsl--gray .lsl__track > li a:focus-visible .lsl__img {
	filter: grayscale(0);
}

/* Modo estático (autoplay="false"): scroll horizontal nativo con snap --- */
.lsl:not(.lsl--auto) {
	scroll-snap-type: x proximity;
}

.lsl:not(.lsl--auto) .lsl__track > li {
	scroll-snap-align: start;
}

/* Modo marquee (autoplay="true") ---------------------------------------- */

/* Antes de que cargue el JS se comporta como scroller (sin barra visible). */
.lsl--auto {
	scrollbar-width: none;
}

.lsl--auto::-webkit-scrollbar {
	display: none;
}

/* Alineado a la izquierda desde el inicio: al activarse el marquee no hay saltos (CLS). */
.lsl--auto .lsl__track {
	margin: 0;
}

.lsl--auto.is-ready {
	overflow: hidden;
	/* Difuminado de los bordes: puramente compositor, sin nodos extra. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.lsl--auto.is-ready .lsl__track {
	/* Solo se anima `transform`: va por la GPU y no provoca reflow. */
	/* Duración = tiempo por logo × logos del set × repeticiones → velocidad constante. */
	animation: lsl-marquee calc(var(--lsl-speed) * var(--lsl-count) * var(--lsl-reps)) linear infinite;
	will-change: transform;
}

.lsl--rev.is-ready .lsl__track {
	animation-direction: reverse;
}

/* Pausa: hover/foco (accesibilidad WCAG 2.2.2) o fuera del viewport (JS). */
.lsl--pause:hover .lsl__track,
.lsl--pause:focus-within .lsl__track,
.lsl.is-offscreen .lsl__track {
	animation-play-state: paused;
}

@keyframes lsl-marquee {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Respeto a "reducir movimiento" del sistema operativo ------------------- */
@media (prefers-reduced-motion: reduce) {
	.lsl--auto.is-ready {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.lsl--auto.is-ready .lsl__track {
		animation: none;
	}

	.lsl__track > [aria-hidden="true"] {
		display: none;
	}

	.lsl--gray .lsl__track .lsl__img {
		transition: none;
	}
}