/**
 * Marquesina de logos sin JavaScript.
 *
 * Sustituye al Pro Slider de BricksExtras con `autoScroll`, que costaba
 * 1.868 ms de bloqueo de hilo principal en móvil sumando splide.min.js,
 * proslider.js y splide-autoscroll.min.js. Aquí la animación es un
 * `transform`: la ejecuta el compositor y no toca el hilo principal.
 *
 * ESTRUCTURA
 * ----------
 * DOS grupos hermanos, cada uno con la lista completa de logos, y cada uno
 * desplazándose un -100 % DE SÍ MISMO. Cuando el primero acaba de salir por
 * la izquierda, el segundo ocupa exactamente su sitio y el bucle no salta.
 *
 * ⚠️ Un primer intento usó UNA pista con las dos copias dentro, desplazada
 * un -50 %. Sobre el papel es lo mismo, pero depende de cómo resuelva el
 * navegador ese porcentaje contra el ancho del contenido, y en producción se
 * vaciaba al cabo de un par de ciclos. Con dos grupos no hay porcentaje que
 * interpretar: cada uno recorre su propio ancho. No volver al -50 %.
 *
 * VARIABLES
 * ---------
 * Las pone el shortcode en línea, en la variante por dispositivo, para que
 * las media queries de aquí abajo puedan seguir mandando. Si se pusiera
 * `--kt-mq-gap` en línea directamente, ganaría siempre a la media query y
 * la marquesina dejaría de ser responsive.
 *
 * @package KtFuncionsMagicfront
 * @since   1.45
 */

.kt-mq {
	/* Valor efectivo en cada punto de ruptura, resuelto desde las variantes
	   que escribe el shortcode. Los segundos de reserva son los del carrusel
	   original, por si el shortcode no pasa nada. */
	--kt-mq-alcada: var(--kt-mq-alcada-escriptori, 40px);
	--kt-mq-gap: var(--kt-mq-gap-escriptori, 90px);
	--kt-mq-seg-logo: var(--kt-mq-segons, 1.4s);

	/* Sin tintar por defecto: los iconos de pasarelas de pago y de plug-ins
	   se ven en sus colores originales. El tintado en blanco es SOLO para
	   los logos de cliente, y se pide con la clase de abajo. */
	--kt-mq-filtre: none;

	display: flex;
	overflow: hidden;
	width: 100%;
}

/* ── Los dos grupos ──────────────────────────────────────────────────────
   `flex: 0 0 auto` es imprescindible: sin eso flexbox los encogería para
   que cupieran los dos en el contenedor, y el -100 % dejaría de valer un
   grupo exacto. */
.kt-mq__grup {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--kt-mq-gap);
	margin: 0;
	/* La separación también ENTRE grupos, para que el empalme no quede
	   más apretado que el resto de la fila. */
	padding: 0 0 0 var(--kt-mq-gap);
	list-style: none;
	animation: kt-mq-desplaca
		calc(var(--kt-mq-logos, 20) * var(--kt-mq-seg-logo))
		linear infinite;
}

@keyframes kt-mq-desplaca {
	to {
		transform: translateX(-100%);
	}
}

/* ── Cada logo ───────────────────────────────────────────────────────────
   Manda el alto y el ancho lo pone la proporción de la imagen. Es más
   robusto que repartir el ancho del contenedor entre N: así los logos se
   ven igual venga el contenedor como venga, y no hace falta que todas las
   imágenes tengan la misma proporción. */
.kt-mq__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kt-mq__item img {
	display: block;
	width: auto;
	height: var(--kt-mq-alcada);
	max-width: none;
	filter: var(--kt-mq-filtre);
}

/* ── Tintado en blanco, opcional ─────────────────────────────────────────
   Con `tint="blanc"` en el shortcode. Réplica exacta de las dos reglas que
   ya existen para los logos de cliente:
     .wrap-carousel-logos .x-slider_slide-image img { brightness(0) invert(1) }
     html.mf-light body.home .wrap-carousel-logos img { brightness(0) }
   ⚠️ No ponerlo en los iconos de pasarelas ni de plug-ins: los dejaría como
   siluetas blancas y ahí se ven a todo color. */
.kt-mq--blanc {
	--kt-mq-filtre: brightness(0) invert(1);
}

html.mf-light .kt-mq--blanc {
	--kt-mq-filtre: brightness(0);
}

/* ── Puntos de ruptura ───────────────────────────────────────────────────
   Los mismos que tenía configurados el Pro Slider. */
@media (max-width: 1020px) {
	.kt-mq {
		--kt-mq-gap: var(--kt-mq-gap-tauleta, 70px);
	}
}

@media (max-width: 668px) {
	.kt-mq {
		--kt-mq-gap: var(--kt-mq-gap-mobil, 65px);
		--kt-mq-alcada: var(--kt-mq-alcada-mobil, 30px);
	}
}

/* ── Accesibilidad ───────────────────────────────────────────────────────
   Quien haya pedido menos movimiento en su sistema ve los logos quietos. */
@media (prefers-reduced-motion: reduce) {
	.kt-mq__grup {
		animation: none;
	}
}