/* El listado de la sección de noticias (ver home.php).

   Toma prestado el lenguaje de la nota -banda gris #d5dce2 con el disco de la
   marca asomando a la derecha y el rótulo en Rubik Black- y las tarjetas del
   home, que llegan en blog-home.css. Aquí solo va lo propio del listado: la
   cabecera, el ancho de la rejilla y la paginación. */

.abrasivomx-listado {
	--abrasivomx-listado-gris: #d5dce2;
	--abrasivomx-listado-tinta: #5a6066;
}

/* -- La cabecera ---------------------------------------------------------- */

/* De orilla a orilla, con el ancho de la ventana sin la barra de scroll: la
   publica js/slider.js, porque 100vw sí cuenta la barra y correría la banda. */
.abrasivomx-listado__cabecera {
	--abrasivomx-banda: var(--abrasivomx-vw, 100vw);
	width: var(--abrasivomx-banda);
	margin-left: calc(50% - var(--abrasivomx-banda) / 2);
	background-color: var(--abrasivomx-listado-gris);
	background-image: url(../images/blog-disco.png);
	background-repeat: no-repeat;
	background-position: right 6.1% center;
	background-size: auto 84.6%;
}

.abrasivomx-listado__cabecera-interior {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 15px 52px;
}

.abrasivomx-listado__titulo {
	margin: 0 !important;
	color: var(--abrasivomx-listado-tinta) !important;
	font-family: 'Rubik', sans-serif;
	font-size: clamp(30px, 4.6vw, 55px) !important;
	font-weight: 900 !important;
	line-height: 1.08 !important;
	text-align: left !important;
	text-transform: uppercase !important;
}

/* -- Las tarjetas --------------------------------------------------------- */

.abrasivomx-listado__interior {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 15px 90px;
}

/* La rejilla y la tarjeta vienen de blog-home.css. Lo único que cambia es que
   aquí no hay banda gris detrás: las tarjetas van sobre el fondo del sitio. */

.abrasivomx-listado__vacio {
	margin: 0;
	color: var(--abrasivomx-listado-tinta);
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	text-align: center;
}

/* -- La paginación -------------------------------------------------------- */

.abrasivomx-listado .navigation.pagination {
	margin-top: 54px;
}

.abrasivomx-listado .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.abrasivomx-listado .page-numbers {
	display: inline-block;
	padding: 9px 17px;
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	background: #ffffff;
	color: #000000;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.abrasivomx-listado .page-numbers:hover,
.abrasivomx-listado .page-numbers:focus,
.abrasivomx-listado .page-numbers.current {
	border-color: #000000;
	background: #000000;
	color: #ffffff;
}

@media (max-width: 860px) {
	/* El disco es marca de agua: en una columna angosta le quita lugar al
	   título sin aportar. */
	.abrasivomx-listado__cabecera { background-image: none; }

	.abrasivomx-listado__cabecera-interior { padding: 34px 15px 32px; }

	.abrasivomx-listado__titulo { text-align: center !important; }

	.abrasivomx-listado__interior { padding: 36px 15px 56px; }
}