/**
 * Estilos del listado de "más leídos" en el sitio público.
 *
 * Deliberadamente mínimos y sin colores propios: heredan la tipografía y el
 * color del tema. El listado tiene que verse igual de bien bajo JNews hoy que
 * bajo Hello Elementor mañana, y cualquier color fijo acá obligaría a
 * retocarlo justo durante la migración.
 */

.vca-most-read__title {
	margin: 0 0 .75em;
}

.vca-most-read__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: vca-rank;
}

.vca-most-read__item {
	display: flex;
	align-items: flex-start;
	gap: .75em;
	padding: .75em 0;
	border-bottom: 1px solid currentColor;
	border-bottom-color: rgba(128, 128, 128, .25);
}

.vca-most-read__item:last-child {
	border-bottom: 0;
}

.vca-most-read__rank {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
	opacity: .35;
	min-width: 1.2em;
	text-align: center;
	flex-shrink: 0;
}

.vca-most-read__thumb {
	flex-shrink: 0;
	display: block;
	width: 72px;
}

.vca-most-read__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.vca-most-read__body {
	flex: 1;
	min-width: 0;
}

.vca-most-read__link {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.vca-most-read__views {
	display: block;
	margin-top: .25em;
	font-size: .8em;
	opacity: .65;
}

/* Metadatos y variantes del listado. */
.vca-most-read__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	align-items: baseline;
	margin-top: .25em;
	font-size: .8em;
	opacity: .65;
}

.vca-most-read__excerpt {
	margin: .35em 0 0;
	font-size: .85em;
	line-height: 1.4;
	opacity: .8;
}

.vca-most-read__growth {
	font-weight: 700;
	opacity: 1;
	color: #007017;
}

.vca-most-read__growth.is-down {
	color: #b32d2e;
}

.vca-most-read__empty {
	font-style: italic;
	opacity: .7;
}

/* Contador de lecturas suelto. */
.vca-view-count {
	display: inline-flex;
	align-items: center;
	gap: .4em;
}

.vca-view-count__icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	background: currentColor;
	/* Ojo dibujado con máscara: hereda el color del texto sin cargar un SVG
	   aparte ni depender de una fuente de íconos del tema. */
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
	mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
 * Variante sobria: cada entrada en una sola línea corrida.
 *
 * Título, autor y lecturas fluyen como texto, no como bloques apilados: en la
 * columna angosta de la portada, apilar tres renglones por artículo empujaba
 * el sexto fuera de la pantalla. Se usan elementos en línea y no flex para que
 * el conjunto se corte donde el idioma lo permita, en vez de dejar al autor
 * colgando solo en su propia línea.
 * ------------------------------------------------------------------ */

.vca-most-read--plain .vca-most-read__item {
	display: block;
	padding: .5em 0;
	line-height: 1.45;
}

.vca-most-read--plain .vca-most-read__body {
	display: inline;
}

.vca-most-read--plain .vca-most-read__link {
	display: inline;
	font-weight: 600;
}

.vca-most-read--plain .vca-most-read__meta {
	display: inline;
	font-size: .88em;
	opacity: .75;
}

.vca-most-read--plain .vca-most-read__author,
.vca-most-read--plain .vca-most-read__views {
	display: inline;
	white-space: nowrap;
}

/* Los guiones se generan en CSS: son puntuación visual, y en el HTML
   obligarían a un lector de pantalla a anunciarlos entre cada dato. */
.vca-most-read--plain .vca-most-read__link::after,
.vca-most-read--plain .vca-most-read__author::after {
	content: " \2013 ";
	opacity: .55;
	font-weight: 400;
}

.vca-most-read--plain .vca-most-read__author {
	font-style: italic;
}

/* Ojo dibujado con máscara: hereda el color del texto que lo rodea, así que
   no hay que mantener una segunda paleta para el ícono. */
.vca-most-read__views-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .25em;
	vertical-align: -.13em;
	background: currentColor;
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
	mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
}

.vca-most-read__views-n {
	font-variant-numeric: tabular-nums;
}

/* Texto sólo para lectores de pantalla, sin depender de que el tema lo defina. */
.vca-most-read .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Categoría sobre el título, como en el módulo de barra lateral que reemplaza. */
.vca-most-read__category {
	display: block;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: .15em;
	opacity: .85;
}

/* En la variante en línea la categoría no puede ser un bloque: rompería la
   línea corrida que define ese formato. */
.vca-most-read--plain .vca-most-read__category {
	display: inline;
	margin-right: .4em;
}