/* Listados del blog de Petsworld: categoría, etiqueta, /articulos/, búsqueda y 404.
   Se carga después de portada.css y reutiliza sus tokens, la tarjeta 16:9 (.pw-tarjeta),
   las tarjetas de mascota (.pw-mascota) y la cabecera de sección (.pw-cab).

   Nota: las reglas de tipografía repiten la clase (.pw.pw) para pesar más que
   "body:not(.woocommerce-page) .site-inner h1/h2/h3" del tema. */

.pw-listado {
	--azul-2: #0A3FA8;
	--ocre: #A8530C;

	/* El tema limita el ancho del contenido: lo sacamos a todo el ancho y lo
	   centramos a 1200 px, como las bandas de la portada. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 max(20px, calc((100vw - 1200px) / 2));

	/* El tema centra el texto de la 404 con "body.error404 .site-inner". Se hereda,
	   así que basta con declararlo aquí para recuperarlo alineado a la izquierda. */
	text-align: left;
}

/* ---------- Cabecera ---------- */
.pw-listado__cabecera { padding-top: 56px; }
.pw-listado__cabecera--con-foto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 80px;
	align-items: end;
}
/* La foto va antes que el texto en el HTML (lo necesita el móvil); aquí se recoloca. */
.pw-listado__cabecera--con-foto .pw-listado__texto { grid-column: 1; grid-row: 1; }
.pw-listado__cabecera--con-foto .pw-listado__foto { grid-column: 2; grid-row: 1; }
.pw-listado__foto { aspect-ratio: 567 / 554; }
.pw-listado__foto img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

.pw-listado__volver {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 14px; font-weight: 600; color: var(--azul);
	transition: color 140ms ease;
}
.pw-listado__volver:hover { color: var(--cian); }
.pw-listado__volver + .pw-listado__antetitulo { margin-top: 28px; }

.pw-listado__antetitulo {
	display: block;
	font-size: 12px; font-weight: 700; line-height: 1.4;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul);
}
.pw-listado__antetitulo--ocre { color: var(--ocre); }

.pw.pw .pw-listado__texto h1 {
	margin: 14px 0 0;
	font-size: 56px; line-height: 1.05; font-weight: 800;
	letter-spacing: -0.025em; color: var(--azul);
	text-transform: none; text-wrap: balance;
}
.pw.pw.pw-listado--titulo-largo .pw-listado__texto h1 { font-size: 46px; line-height: 1.1; letter-spacing: -0.02em; }

.pw.pw .pw-listado__entradilla {
	margin: 18px 0 0; max-width: 640px;
	font-size: 20px; line-height: 1.55; font-weight: 500;
	color: var(--texto-2); text-wrap: pretty;
}

/* ---------- Chips ---------- */
.pw-listado__frecuentes { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pw-listado__frecuentes-rotulo { font-size: 14px; font-weight: 600; color: var(--texto-2); margin-right: 4px; }
.pw-listado__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pw-listado__chips--mascotas { margin-top: 32px; }
.pw-chip {
	display: inline-flex; align-items: center; box-sizing: border-box;
	padding: 8px 14px; border: 1px solid var(--azul); border-radius: 6px;
	font-size: 14px; font-weight: 600; color: var(--azul); white-space: nowrap;
	transition: background-color 140ms ease;
}
.pw-chip:hover { background: var(--hover-2); }
.pw-listado__chips--mascotas .pw-chip,
.pw-chip--boton { height: 44px; padding: 0 18px; font-size: 15px; }
.pw-chip--activo { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }
.pw-chip--activo:hover { background: var(--azul); }

/* ---------- Buscador ---------- */
.pw-buscador { margin-top: 28px; display: flex; gap: 10px; max-width: 640px; }
.pw-buscador__campo { position: relative; flex: 1; display: block; }
.pw-buscador__campo svg { position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; color: var(--texto-2); pointer-events: none; }
.pw.pw .pw-buscador input {
	box-sizing: border-box; width: 100%; height: 52px; margin: 0;
	padding: 0 16px 0 46px; border: 1px solid var(--regla); border-radius: 6px;
	background: #fff; font-family: inherit; font-size: 16px; color: var(--texto);
}
.pw.pw .pw-buscador__boton {
	height: 52px; padding: 0 24px; border: 0; border-radius: 6px;
	background: var(--azul); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
	cursor: pointer; transition: background-color 140ms ease; text-transform: none; letter-spacing: 0;
}
.pw.pw .pw-buscador__boton:hover { background: var(--azul-2); }

/* ---------- Rejilla ---------- */
.pw-listado__regla { margin-top: 48px; height: 2px; background: var(--azul); }
.pw-listado__rejilla { margin-top: 40px; }
/* El recorte a 3 líneas de .pw-tarjeta__extracto--3 lo define portada.css. */

/* ---------- Paginación ---------- */
.pw-paginacion { display: flex; align-items: center; gap: 8px; padding: 48px 0 72px; }
.pw-paginacion__numeros { display: flex; align-items: center; gap: 8px; }
.pw-paginacion .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--regla); border-radius: 6px;
	font-size: 15px; font-weight: 600; color: var(--azul);
	transition: background-color 140ms ease, border-color 140ms ease;
}
.pw-paginacion a.page-numbers:hover { border-color: var(--azul); background: var(--hover-2); }
.pw-paginacion .page-numbers.current { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }
.pw-paginacion .page-numbers.dots { border: 0; min-width: 0; padding: 0 6px; color: var(--texto-3); }
.pw-paginacion__siguiente {
	display: inline-flex; align-items: center; gap: 8px; margin-left: 8px;
	height: 44px; padding: 0 18px; border-radius: 6px;
	background: var(--azul); color: #fff; font-size: 15px; font-weight: 700;
	transition: background-color 140ms ease;
}
.pw-paginacion__siguiente:hover { background: var(--azul-2); color: #fff; }
.pw-paginacion__contador { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--texto-3); }
.pw-paginacion__anterior { display: none; }

/* ---------- Otras mascotas y mascotas de la búsqueda ---------- */
.pw-listado__otras { padding-bottom: 72px; }
.pw-listado__mascotas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding: 40px 0 72px; }
.pw-listado__mascotas--otras { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 820px; padding: 0; }

/* ---------- 404 ---------- */
.pw-404__cabecera {
	padding-top: 72px;
	display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; align-items: center;
}
.pw-404__foto { aspect-ratio: 567 / 554; }
.pw-404__foto img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.pw-404__botones { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.pw-404__ultimos { padding: 72px 0 80px; }

/* ---------- Puntos de ruptura ---------- */
@media (max-width: 1100px) {
	.pw.pw .pw-listado__texto h1 { font-size: 44px; }
	.pw.pw.pw-listado--titulo-largo .pw-listado__texto h1 { font-size: 38px; }
	.pw-listado__cabecera--con-foto { grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; }
	.pw-404__cabecera { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
	.pw-listado__mascotas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pw-listado__mascotas--otras { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.pw-listado__cabecera { padding-top: 28px; }
	/* En móvil la foto va arriba a la derecha y el texto la rodea; con dos columnas
	   la entradilla se quedaba en una franja estrecha y partía mal las líneas. */
	.pw-listado__cabecera--con-foto { display: block; }
	.pw-listado__cabecera--con-foto .pw-listado__foto {
		float: right; width: 96px; margin: 0 0 8px 16px;
	}
	.pw-listado__frecuentes { clear: both; }
	.pw.pw .pw-listado__texto h1 { font-size: 32px; line-height: 1.12; }
	.pw.pw.pw-listado--titulo-largo .pw-listado__texto h1 { font-size: 28px; }
	.pw.pw .pw-listado__entradilla { margin-top: 12px; font-size: 16px; }

	/* Los chips se quedan en una fila que se desliza, sin romper la cabecera. */
	.pw-listado__frecuentes { display: block; margin-top: 20px; }
	.pw-listado__frecuentes-rotulo { display: block; margin-bottom: 10px; }
	.pw-listado__chips {
		flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.pw-listado__chips::-webkit-scrollbar { display: none; }
	.pw-chip { min-height: 44px; padding: 0 14px; }

	.pw-buscador { margin-top: 20px; flex-direction: column; gap: 10px; }
	.pw.pw .pw-buscador__boton { width: 100%; height: 48px; }

	.pw-listado__regla { margin-top: 24px; }
	.pw-listado__rejilla { margin-top: 24px; grid-template-columns: 1fr; gap: 20px; }
	.pw-tarjeta__extracto--3 { display: none; }

	.pw-paginacion { padding: 28px 0 40px; gap: 12px; }
	.pw-paginacion__numeros { display: none; }
	.pw-paginacion__anterior {
		display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
		order: 1; height: 48px; padding: 0 18px; border: 1px solid var(--regla); border-radius: 6px;
		font-size: 15px; font-weight: 600; color: var(--azul);
	}
	.pw-paginacion__anterior--inerte { color: var(--texto-3); }
	.pw-paginacion__contador { order: 2; margin: 0 auto; font-size: 14px; }
	.pw-paginacion__siguiente { order: 3; margin-left: 0; height: 48px; }

	.pw-listado__mascotas { gap: 14px; padding: 24px 0 32px; }
	/* «Otras mascotas» y los últimos artículos de la 404 son de relleno: en móvil sobran. */
	.pw-listado__otras, .pw-404__ultimos { display: none; }

	.pw-404__cabecera { padding-top: 28px; grid-template-columns: 1fr; gap: 20px; }
	.pw-404__foto { max-width: 160px; order: -1; }
	.pw-404__botones { margin-top: 16px; }
	.pw-404__botones .pw-chip { flex: 1 1 auto; justify-content: center; }
}