/* ==========================================================================
   EL MURO — CYBER BRUTALISTA V2 · la retícula manda
   --------------------------------------------------------------------------
   Antes: afiches pegados a mano, rotados y encimados (`rotate` + `translate`)
   sobre una rejilla invisible.
   Ahora: retícula de 12 columnas, TODO ALINEADO. La jerarquía la da el ANCHO
   de cada material, no el desorden. El brutalismo corta recto.

   Portado de `04-cyberpunk/05-plantilla-portada.html`.
   ========================================================================== */

.pf-muro{
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	gap:1.6rem 1.4rem;
	align-items:start;
	max-width:var(--pf-maxw);
	margin-inline:auto;
	padding:0 var(--pf-gutter) var(--pf-s-8);
}

/* La pieza: alineada a la retícula. Sin rotación, sin desplazamiento. */
.pf-pieza{
	position:relative;
	z-index:1;
	transform:none;
	transition:none;
}
/* El hover ya no despega la pieza: responde el borde de la foto y el titular
   (ver materiales.css). El papel se despegaba; la retícula no. */
.pf-pieza:hover,
.pf-pieza:focus-within{
	transform:none;
	z-index:2;
}

/* --- ANCHOS POR MATERIAL: aquí vive la jerarquía ------------------------ */
.pf-pieza:has(.pf-mat--cartel)     { grid-column:span 7 }   /* nota destacada */
.pf-pieza:has(.pf-mat--serigrafia) { grid-column:span 5 }   /* especial */
.pf-pieza:has(.pf-mat--prensa)     { grid-column:span 3 }   /* nota estándar */
.pf-pieza:has(.pf-mat--polaroid)   { grid-column:span 4 }   /* multimedia */
.pf-pieza:has(.pf-mat--hoja)       { grid-column:span 4 }   /* editorial */
.pf-pieza:has(.pf-mat--sticker)    { grid-column:span 4 }   /* dato */
.pf-pieza:has(.pf-mat--cinta)      { grid-column:span 12 }  /* aviso */

/* Respaldo para navegadores sin :has() — el tema emite --col por pieza. */
@supports not selector(:has(*)){
	.pf-pieza{ grid-column:span var(--col, 4) }
}

/* --- Reglas de aire ----------------------------------------------------- */
/* --- POR QUÉ `minmax(0,1fr)` DE AQUÍ PARA ABAJO -------------------------
   `1fr` equivale a `minmax(auto,1fr)`, y ese `auto` toma el MIN-CONTENT del
   ítem. `.pf-foto` es flex y su `<img>` conserva `min-width:auto`, así que el
   ancho intrínseco del archivo (1024px) inflaba el track: en 375px el muro
   medía 400 y el lector tenía scroll lateral. Con `minmax(0,…)` el track puede
   ceder y la foto se adapta.
   Va SÓLO dentro de las media queries: la retícula de escritorio (la regla
   base de arriba) queda intacta, byte a byte. */
@media (max-width:980px){
	.pf-muro{grid-template-columns:repeat(6,minmax(0,1fr))}
	.pf-pieza{min-width:0}
	.pf-pieza:has(.pf-mat--cartel),
	.pf-pieza:has(.pf-mat--serigrafia),
	.pf-pieza:has(.pf-mat--cinta){grid-column:span 6}
	.pf-pieza:has(.pf-mat--prensa),
	.pf-pieza:has(.pf-mat--polaroid),
	.pf-pieza:has(.pf-mat--hoja),
	.pf-pieza:has(.pf-mat--sticker){grid-column:span 3}
}
@media (max-width:640px){
	.pf-muro{
		grid-template-columns:minmax(0,1fr);
		gap:2rem;
		padding-inline:var(--pf-s-4);
	}
	.pf-pieza{grid-column:span 1 !important;transform:none;min-width:0}
	.pf-pieza:hover,.pf-pieza:focus-within{transform:none}
	/* La foto ya no arrastra su ancho intrínseco dentro del flex. */
	.pf-foto{min-width:0}
}

/* ==========================================================================
   IMÁGENES DEL MURO — enteras, no mutiladas
   El archivo trae infografías verticales, carteles y capturas panorámicas:
   `cover` las cortaba. Con `contain` se ve la pieza completa y el sobrante
   queda como fondo de panel. Decisión de CONTENIDO, se conserva de la v0.3.
   ========================================================================== */
.pf-foto{
	background:var(--pf-prensa);
	display:flex;align-items:center;justify-content:center;
	max-height:460px;
}
.pf-foto img{
	width:100%;height:auto;
	object-fit:contain;object-position:center;
	max-height:460px;
}
.pf-mat--cartel   .pf-foto{max-height:520px}
.pf-mat--polaroid .pf-foto{min-height:240px;max-height:360px}
.pf-mat--prensa   .pf-foto{max-height:300px}
.pf-mat--sticker  .pf-foto{max-height:270px}

/* --- DENSIDAD EN MÓVIL ---------------------------------------------------
   En escritorio las piezas van una al lado de otra y estas alturas están
   bien. En el móvil van en fila india: con las mismas, 12 piezas pedían
   6.236px de scroll y el muro se leía casi vacío.
   Va DESPUÉS de las alturas de arriba a propósito —misma especificidad, gana
   el orden— y dentro de la media query, así que escritorio no se entera. */
@media (max-width:640px){
	.pf-foto{max-height:230px}
	.pf-foto img{max-height:230px}
	.pf-mat--cartel   .pf-foto{max-height:260px}
	.pf-mat--polaroid .pf-foto{min-height:0;max-height:230px}
	.pf-mat--prensa   .pf-foto{max-height:200px}
	.pf-mat--sticker  .pf-foto{max-height:190px}
	/* La ausencia sigue siendo información, pero deja de ocupar media
	   pantalla: el hueco de terminal se vuelve una banda. */
	.pf-foto.pf-sinfoto,
	.pf-mat--cartel   .pf-foto.pf-sinfoto,
	.pf-mat--polaroid .pf-foto.pf-sinfoto,
	.pf-mat--prensa   .pf-foto.pf-sinfoto{min-height:0;max-height:120px;padding:var(--pf-s-3)}
}

/* --- Serigrafía: el volumen lo da el marco, no la sombra ---------------- */
.pf-mat--serigrafia .pf-mat__titulo{
	font-size:clamp(1.2rem,2vw,1.6rem);
	text-shadow:none;
}