/**
 * Catálogo de Mobiliario — hub `/mobiliario-exterior/` y los dos ejes de archivo
 * (`taxonomy-categoria-producto.php` / `taxonomy-coleccion.php`).
 *
 * Misma banda negra a sangre que `/sedes/` (css/sedes.css, `.pt-sedes-dir__hero`): el header
 * del theme es transparente con logo y menú blancos, y al apagar `page_title` (trampa 17/29)
 * hay que devolverles un fondo oscuro donde leerse. Namespace propio `pt-cat-*` / `pt-mobiliario`
 * para las piezas nuevas: la tarjeta de producto/término (`pt-cat-tarjeta`) es distinta de las
 * tarjetas de familia de `familias.css` (esas tienen degradado + hover; estas son más planas,
 * catálogo denso de hasta 67 piezas, no una rejilla de 2-7 familias).
 */

:root {
	--pt-negro: #000000;
	--pt-tinta: #1a1a1a;
	--pt-texto: #5a5a5a;
	--pt-linea: #b3b3b3;
	--pt-rojo: #bc090e;
	--pt-gris: #f4f4f4;
}

/* `producto` no está en `mink-core`, así que WP añade `tax-categoria-producto` / `tax-coleccion`
 * al body automáticamente (a diferencia de la página `/sedes/`, que necesitó un filtro
 * `body_class` propio porque el slug de una `page` no sale solo).
 */
body.tax-categoria-producto #main,
body.tax-coleccion #main,
body.pt-page-mobiliario #main {
	padding-top: 0;
}

/* ── Banda de hero, compartida por el hub y los dos archivos de término ─────── */

.pt-cat-archivo__hero,
.pt-mobiliario__hero {
	background: var(--pt-negro);
	color: #ffffff;
	margin: 0 calc(50% - 50vw) 56px;
	padding: 190px calc(50vw - 50%) 64px;
}

.pt-cat-archivo__ruta,
.pt-mobiliario__ruta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 20px;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pt-cat-archivo__ruta a,
.pt-mobiliario__ruta a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.pt-cat-archivo__ruta a:hover,
.pt-cat-archivo__ruta a:last-of-type,
.pt-mobiliario__ruta a:hover {
	color: #ffffff;
}

.pt-sep {
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 1px;
	background-color: var(--pt-rojo);
}

.pt-cat-archivo__rejilla-titulo {
	margin: 0 0 18px;
	color: var(--pt-texto, #5a5a5a);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pt-cat-archivo__eje {
	margin: 0 0 10px;
	color: var(--pt-rojo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pt-cat-archivo__hero h1,
.pt-mobiliario__hero h1 {
	color: #ffffff;
	margin: 0 0 20px;
	max-width: 18em;
}

/* Escala de prosa canónica del child theme — ver el bloque de `producto.css` (`.pt-prosa p`).
 * Intro sobre banda oscura: 1rem, el mismo que el lead del hero de las landings de línea. */
.pt-cat-archivo__intro,
.pt-mobiliario__intro {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	color: #d8d8d8;
	max-width: 660px;
	margin: 0;
}

.pt-mobiliario__intro strong {
	color: #ffffff;
	font-weight: 500;
}

/* ── Rejilla de tarjetas — productos (en los archivos) o términos (en el hub) ── */

.pt-cat-archivo__rejilla,
.pt-mobiliario__rejilla {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 0 0 20px;
}

.pt-cat-archivo__vacio {
	color: var(--pt-texto);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	max-width: 620px;
}

.pt-cat-archivo__vacio a {
	color: var(--pt-rojo);
	border-bottom: 1px solid var(--pt-rojo);
}

/* `flex-grow: 0` a propósito — trampa 54/96. Con `1 1` la última fila reparte el hueco entre
 * las tarjetas que sobran y una sola (Morros, 1 pieza; o Bar, que deja 2 huérfanas) se pintaba a
 * TODO el ancho de la rejilla, con la foto ampliada a 1170px. Los tres anchos base ya suman
 * exactamente el 100 % con su `gap`: 3 × (33,333 % − 20px) + 2 × 30px = 100 %.
 */
.pt-cat-tarjeta {
	flex: 0 1 calc(33.333% - 20px);
	min-width: 230px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.pt-cat-tarjeta__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--pt-gris);
	overflow: hidden;
	margin-bottom: 16px;
}

.pt-cat-tarjeta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.pt-cat-tarjeta:hover .pt-cat-tarjeta__media img {
	transform: scale(1.03);
}

.pt-cat-tarjeta__sin-foto {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		135deg,
		var(--pt-gris) 0 12px,
		#ececec 12px 24px
	);
}

.pt-cat-tarjeta__titulo {
	color: var(--pt-tinta);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.22s ease;
}

.pt-cat-tarjeta:hover .pt-cat-tarjeta__titulo {
	border-color: var(--pt-rojo);
}

.pt-cat-tarjeta__subtitulo {
	color: var(--pt-texto);
	font-size: 0.86rem;
	letter-spacing: 0.03em;
}

/* Tarjeta de eje (hub): un poco más grande de texto, y el conteo de piezas hace de subtítulo. */
.pt-mobiliario__rejilla .pt-cat-tarjeta__titulo {
	font-size: 1.15rem;
}

/* Rejilla de PIEZAS del hub («Últimas piezas del catálogo»): 4 por fila y con el texto de la
 * tarjeta de catálogo, no el de eje. Son productos, no términos: compiten con las 20 tarjetas de
 * los archivos de término, y a 3 por fila la sección pesaba más que los dos ejes que la preceden.
 */
.pt-mobiliario__rejilla--piezas .pt-cat-tarjeta {
	flex: 0 1 calc(25% - 22.5px);
	min-width: 200px;
}

.pt-mobiliario__rejilla--piezas .pt-cat-tarjeta__titulo {
	font-size: 1.02rem;
}

/* ── Página hub ───────────────────────────────────────────────────────────── */

.pt-mobiliario__eje-titulo {
	margin: 0 0 8px;
	font-size: 26px;
	letter-spacing: -0.01em;
}

.pt-mobiliario__eje-nota {
	margin: 0 0 26px;
	color: var(--pt-texto);
	font-size: 15px;
	max-width: 620px;
}

.pt-mobiliario__seccion {
	border-top: 1px solid #dddddd;
	padding: 40px 0 6px;
	margin-bottom: 10px;
}

.pt-mobiliario__cierre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 30px;
	margin: 50px 0 60px;
	padding: 40px;
	background: var(--pt-negro);
}

.pt-mobiliario__cierre h2 {
	color: #ffffff;
	margin: 0 0 8px;
	font-size: 1.4rem;
}

.pt-mobiliario__cierre p {
	color: rgba(255, 255, 255, 0.76);
	margin: 0;
	max-width: 480px;
}

.pt-mobiliario__boton {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 17px 32px;
	background: #ffffff;
	color: var(--pt-tinta);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.pt-mobiliario__boton:hover {
	background: var(--pt-negro);
	color: #ffffff;
	outline: 1px solid #ffffff;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.pt-cat-tarjeta,
	.pt-mobiliario__rejilla--piezas .pt-cat-tarjeta {
		flex: 0 1 calc(50% - 15px);
	}
}

@media (max-width: 767px) {
	.pt-cat-archivo__hero,
	.pt-mobiliario__hero {
		padding-top: 120px;
		padding-bottom: 48px;
		margin-bottom: 40px;
	}

	.pt-cat-archivo__hero h1,
	.pt-mobiliario__hero h1 {
		max-width: none;
	}

	.pt-cat-tarjeta,
	.pt-mobiliario__rejilla--piezas .pt-cat-tarjeta {
		flex: 0 1 100%;
	}

	.pt-mobiliario__cierre {
		flex-direction: column;
		align-items: flex-start;
	}

	.pt-mobiliario__boton {
		width: 100%;
		justify-content: center;
	}
}

/* ── El desborde de 30px que arrastraban la ficha y los 15 archivos ────────────
 *
 * `taxonomy-*.php` y `single-producto.php` envuelven en `.row > .wgl_col-12`, que son del theme
 * padre y vienen con `margin: 0 -15px` y `padding: 0 15px`. Se anulan entre sí para el contenido
 * —por eso el `wgl-container` tuvo que moverse DENTRO del render (ver el docblock de
 * `inc/producto-archivo.php`)—, pero el `.row` sigue siendo 30px MÁS ANCHO que el viewport: a
 * 1440 se pinta de −15 a 1455. `medir.py` lo marcaba 🚨 en las 52 fichas y en los 15 archivos.
 *
 * Se anula el par entero en vez de quitar las clases de las plantillas: la geometría interior no
 * cambia ni un píxel (−15 + 15 = 0, que es justo lo que ya pasaba) y `#main-content` conserva sus
 * clases del padre, de las que cuelgan otras reglas del theme.
 */

.wgl-producto-archivo_wrapper > .single_producto > .row {
	margin-left: 0;
	margin-right: 0;
}

.wgl-producto-archivo_wrapper > .single_producto > .row > .wgl_col-12 {
	padding-left: 0;
	padding-right: 0;
}