/* ==========================================================================
   Matati — blog: listado y categorías (template-parts/blog/listado.php) y
   entrada (single.php), con la estructura del blog de thewoobles.com.
   Tarjetas: entrada.css. Texto de la entrada: editor.css.
   ========================================================================== */

/* -------------------------------------------------------------------------
 * Listado
 * ---------------------------------------------------------------------- */
.blog-listado { padding-block: 72px var(--espacio-seccion); }

.blog-listado__cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.blog-listado__antetitulo {
	font-size: var(--txt-antetitulo);
	font-style: normal;
	color: var(--turquesa);
}

.blog-listado__titulo {
	font-size: var(--txt-h2);
	line-height: .95;
}

.blog-listado__intro {
	max-width: 620px;
	font-size: var(--txt-grande);
}

/* Categorías */
.blog-listado__categorias { margin-block: 32px 56px; }

.blog-listado__categorias-lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-listado__categoria {
	display: inline-block;
	padding: 8px 20px;
	font-weight: 700;
	text-decoration: none;
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--pastilla);
	transition: background var(--rapido);
}

.blog-listado__categoria:hover,
.blog-listado__categoria.is-activa {
	color: var(--tinta);
	background: var(--rosa);
}

/* Tarjetas: 3 por fila */
.blog-listado__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-listado__vacio { text-align: center; }

/* Paginación */
.blog-listado__paginacion { margin-top: 72px; }

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

.blog-listado__paginacion .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding-inline: 16px;
	font-weight: 700;
	text-decoration: none;
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--pastilla);
	transition: background var(--rapido);
}

.blog-listado__paginacion a.page-numbers:hover,
.blog-listado__paginacion .page-numbers.current { background: var(--rosa); }

.blog-listado__paginacion .page-numbers.dots {
	background: none;
	border-color: transparent;
}

/* -------------------------------------------------------------------------
 * Entrada
 * ---------------------------------------------------------------------- */
.articulo { padding-block: 48px var(--espacio-seccion); }

.articulo__foto {
	margin: 0;
	overflow: hidden;
	background: var(--blanco);
	border-radius: 32px;
}

.articulo__foto img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Cabecera y texto en una columna angosta */
.articulo__cabecera,
.articulo__cuerpo { max-width: calc(760px + var(--gutter) * 2); }

.articulo__cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-top: 48px;
	text-align: center;
}

.articulo__categoria {
	font-size: var(--txt-antetitulo);
	font-style: normal;
	color: var(--turquesa);
	text-decoration: none;
}

.articulo__categoria:hover { text-decoration: underline; }

.articulo__titulo {
	font-size: clamp(38px, 4.6vw, 56px);
	line-height: 1;
}

.articulo__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.articulo__fecha {
	padding: 6px 18px;
	font-size: 15px;
	font-weight: 700;
	background: var(--blanco);
	border-radius: var(--pastilla);
}

.articulo__contenido {
	padding-top: 48px;
	font-size: var(--txt-base);
}

.articulo__volver {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 56px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--rosa);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.articulo__volver::before { content: "←"; }

/* -------------------------------------------------------------------------
 * Carrusel de productos al final (inc/blog.php): seguido del contenido, sin
 * fondo propio y con un título discreto. En la entrada, al ancho del texto.
 * ---------------------------------------------------------------------- */
.blog-listado:has(+ .carrusel--blog),
.articulo:has(+ .carrusel--blog) { padding-bottom: 0; }

.carrusel--blog { padding-block: 64px var(--espacio-seccion); }

/* Separador punteado entre el contenido y el carrusel (al ancho del contenido) */
.carrusel--blog .carrusel__cabecera {
	padding-top: 48px;
	border-top: var(--borde-punteado);
}

.carrusel--blog .carrusel__antetitulo { font-size: 18px; }

.carrusel--blog .carrusel__titulo { font-size: 23px; }

.carrusel--blog .carrusel__flecha {
	width: 44px;
	height: 44px;
	background-size: 18px;
}

.carrusel--angosto .wrapper { max-width: calc(760px + var(--gutter) * 2); }

@media (min-width: 1024px) {
	.carrusel--angosto .carrusel__pista { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.blog-listado__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.blog-listado { padding-block: 48px 72px; }

	.blog-listado__categorias { margin-block: 24px 40px; }

	.blog-listado__lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.articulo { padding-block: 24px 72px; }

	.articulo__foto { border-radius: 24px; }

	.articulo__foto img { aspect-ratio: 4 / 3; }

	.articulo__cabecera { padding-top: 32px; }

	.articulo__contenido { padding-top: 32px; }

	.carrusel--blog { padding-block: 40px 72px; }

	.carrusel--blog .carrusel__cabecera { padding-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.blog-listado__categoria,
	.blog-listado__paginacion .page-numbers { transition: none; }
}