/**
 * Carrusel de marcas. Una cinta continua, no diapositivas.
 *
 * Los logotipos son blancos sobre transparente: la banda tiene que ser oscura. Comparte
 * la tinta del pie, y un filo la separa de él.
 *
 * Depende de assets/css/base.css.
 */

.radiowp-brands {
	--radiowp-brand-height: 5.5rem;
	--radiowp-brand-width: 10.625rem;
	--radiowp-brand-gap: clamp(1.75rem, 5vw, 3.5rem);
	--radiowp-brands-duration: 40s;
	/* Tantas como pinte Logo_Carousel::COPIES. La animación desplaza justo una. */
	--radiowp-brands-copies: 3;
	--radiowp-brands-fade: clamp(1.5rem, 6vw, 4rem);

	background-color: var(--radiowp-color-ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--radiowp-color-on-ink);
	overflow: hidden;
}

.radiowp-brands__inner {
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding-block: var(--radiowp-section-space-tight);
}

.radiowp-brands__eyebrow {
	color: var(--radiowp-color-on-ink-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1;
	margin: 0 0 var(--radiowp-space-sm);
	padding-inline: var(--radiowp-gutter);
	text-transform: uppercase;
}

/*
 * El desvanecido de los bordes dice «esto sigue», que es justo lo que una cinta necesita
 * comunicar sin una flecha. Es una máscara, no un degradado encima: así no hay que saber
 * de qué color es el fondo.
 */
.radiowp-brands__viewport {
	overflow: hidden;
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 var(--radiowp-brands-fade),
		#000 calc(100% - var(--radiowp-brands-fade)),
		transparent
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		#000 var(--radiowp-brands-fade),
		#000 calc(100% - var(--radiowp-brands-fade)),
		transparent
	);
}

.radiowp-brands__marquee {
	display: flex;
	width: max-content;
}

/*
 * El hueco entre cintas lo pone el `padding-inline-end` de cada una, no un `gap` en el
 * contenedor. Así una cinta mide exactamente lo que hay que desplazar, y el salto entre
 * la última copia y la primera es invisible.
 */
.radiowp-brands__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--radiowp-brand-gap);
	padding-inline: 0 var(--radiowp-brand-gap);
	margin: 0;
	list-style: none;
}

.radiowp-brands__item {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	inline-size: var(--radiowp-brand-width);
	block-size: var(--radiowp-brand-height);
}

.radiowp-brands__link {
	display: grid;
	place-items: center;
	border-radius: var(--radiowp-radius);
}

/*
 * Los topes son longitudes, no porcentajes.
 *
 * Un `height: 100%` aquí colgaría de una cadena —imagen dentro de enlace dentro de celda—
 * en la que basta que un eslabón tenga altura automática para que el porcentaje no resuelva
 * y la imagen salga a tamaño natural. Con `max-width`/`max-height` la imagen se encoge
 * sola hasta caber, conserva su proporción, y no hace falta `object-fit`.
 *
 * Y dos clases, no una: Elementor declara `.elementor img { height: auto }` con
 * especificidad (0,1,1), y un `.radiowp-brands__logo` a secas pierde. Ver README, «La
 * regla de Elementor que gana a las nuestras».
 */
.radiowp-brands .radiowp-brands__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--radiowp-brand-width);
	max-height: var(--radiowp-brand-height);
	opacity: 0.78;
	transition: opacity var(--radiowp-transition);
}

.radiowp-brands__link:hover .radiowp-brands__logo,
.radiowp-brands__link:focus-visible .radiowp-brands__logo {
	opacity: 1;
}

.radiowp-brands__link:focus-visible {
	outline: 2px solid var(--radiowp-color-accent);
	outline-offset: 4px;
}

/* --- La cinta en movimiento ----------------------------------------------- */

@keyframes radiowp-brands-scroll {
	to {
		/* Exactamente una cinta: el ancho total dividido entre el número de copias. */
		transform: translateX(calc(-100% / var(--radiowp-brands-copies)));
	}
}

/*
 * El margen va en la ventana, no en la cinta: así la primera marca arranca alineada con el
 * antetítulo, y la cinta sigue midiendo justo lo que hay que desplazar. `overflow: hidden`
 * recorta en la caja de relleno, de modo que lo que se desliza hacia la izquierda cruza
 * ese margen a la vista y se lo come el desvanecido.
 */
.radiowp-brands--animated .radiowp-brands__viewport {
	padding-inline-start: var(--radiowp-gutter);
}

.radiowp-brands--animated .radiowp-brands__marquee {
	animation: radiowp-brands-scroll var(--radiowp-brands-duration) linear infinite;
}

/* Se para para que puedas leerla, y para que puedas pulsar el logo que ibas a pulsar. */
/* «Hacia la derecha»: la misma cinta, recorrida al revés. */
.radiowp-brands--reverse .radiowp-brands__marquee {
	animation-direction: reverse;
}

.radiowp-brands--animated:hover .radiowp-brands__marquee,
.radiowp-brands--animated:focus-within .radiowp-brands__marquee {
	animation-play-state: paused;
}

/* --- Quieta: un raíl que se desliza a mano -------------------------------- */

.radiowp-brands:not(.radiowp-brands--animated) .radiowp-brands__viewport {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.radiowp-brands:not(.radiowp-brands--animated) .radiowp-brands__marquee {
	/* `safe`: si cabe, se centra; si no cabe, no recorta el principio. */
	justify-content: safe center;
	min-width: 100%;
}

/* Quieta no hay bucle que cuadrar, así que la cinta puede respetar el margen de la página. */
.radiowp-brands:not(.radiowp-brands--animated) .radiowp-brands__track {
	padding-inline: var(--radiowp-gutter);
}

.radiowp-brands:not(.radiowp-brands--animated) .radiowp-brands__item {
	scroll-snap-align: center;
}

/*
 * Quien pide menos movimiento no pide movimiento más lento. La cinta se detiene y se
 * convierte en el mismo raíl de arriba; las copias sobran y se van.
 */
@media (prefers-reduced-motion: reduce) {
	.radiowp-brands--animated .radiowp-brands__marquee {
		animation: none;
		justify-content: safe center;
		min-width: 100%;
	}

	.radiowp-brands--animated .radiowp-brands__viewport {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		/* El margen lo pone ahora la cinta. Sin esto, doble margen a la izquierda. */
		padding-inline-start: 0;
	}

	.radiowp-brands--animated .radiowp-brands__track[aria-hidden="true"] {
		display: none;
	}

	.radiowp-brands--animated .radiowp-brands__track {
		padding-inline: var(--radiowp-gutter);
	}

	.radiowp-brands--animated .radiowp-brands__item {
		scroll-snap-align: center;
	}
}

@media (max-width: 47.9375rem) {
	.radiowp-brands {
		--radiowp-brand-height: 4rem;
		--radiowp-brand-width: 8rem;
	}
}