/**
 * CE Research: raíl de portadas de informes. Se desliza a mano, sin JavaScript.
 *
 * Depende de assets/css/base.css.
 */

.radiowp-research__inner {
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding: var(--radiowp-section-space) var(--radiowp-gutter);
}

/*
 * El raíl es scroll horizontal con anclaje. El desbordamiento vertical se deja visible para
 * que la sombra de las portadas no se recorte; solo el horizontal recorta.
 */
.radiowp-research__rail {
	display: flex;
	gap: clamp(1rem, 3vw, 1.75rem);
	margin: 0;
	padding: 0.5rem 0 1rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Avance automático (common.js): bordes que se desvanecen y, mientras se mueve solo, sin
   snap (cada paso de un píxel volvería al informe anterior). */
.radiowp-research__viewport[data-radiowp-autoplay] .radiowp-research__rail {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	scrollbar-width: none;
}

.radiowp-research__viewport[data-radiowp-autoplay] .radiowp-research__rail::-webkit-scrollbar {
	display: none;
}

.radiowp-research__viewport[data-playing="true"] .radiowp-research__rail {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

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

.radiowp-research__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	/* Ancho de la portada. En móvil se ve algo más de una y media, que invita a deslizar. */
	inline-size: clamp(11.5rem, 56vw, 15rem);
}

.radiowp-research__figure {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--radiowp-color-fg);
}

/* Solo el color en los estados: el tema pone `a:visited` y `a:hover` oscuros. Va aparte
   porque una regla con estado pesa más que las de escritorio y les pisaría el tamaño. */
.radiowp-research__figure:visited,
.radiowp-research__figure:hover,
.radiowp-research__figure:focus,
.radiowp-research__figure:active {
	color: var(--radiowp-color-fg);
}

/*
 * `12 / 11` es la proporción de las portadas recortadas que publica el sitio (360×331).
 * Reservar el hueco evita el salto de maquetación cuando la imagen carga. Los topes de
 * tamaño los da el ancho del <li>.
 */
.radiowp-research .radiowp-research__cover {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 12 / 11;
	object-fit: cover;
	border: var(--radiowp-border);
	border-radius: var(--radiowp-radius);
	background-color: var(--radiowp-color-surface-sunken);
	box-shadow: var(--radiowp-shadow);
	transition: transform var(--radiowp-transition);
}

.radiowp-research__figure:hover .radiowp-research__cover,
.radiowp-research__figure:focus-visible .radiowp-research__cover {
	transform: translateY(-3px);
}

.radiowp-research__figure:focus-visible {
	outline: 2px solid var(--radiowp-color-accent);
	outline-offset: 3px;
	border-radius: var(--radiowp-radius);
}

.radiowp-research__name {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}