/*
 * R5 · Piezas en columnas (componentes.md): N piezas iguales con medio
 * opcional, título y cuerpo. El número va en --n (atributo style) y en la
 * clase --N, porque la composición de cada tramo depende de él.
 *
 *   --butacas     las tres butacas de la cortina 2, con la central resaltada
 *   --panel       los dos paneles de la cortina 4: cajas con su fondo
 *
 * Mobile first: apiladas; desde 600 px, en fila.
 */

.loha-piezas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loha-pieza {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: clamp(0.5rem, 0.2rem + 0.6vw, 1rem);
	text-align: center;
}

.loha-pieza__medio {
	display: grid;
	flex: none;
	place-items: center;
}

.loha-pieza__titulo {
	margin-top: 1.1rem;
	color: var(--c-texto);
	font-family: var(--sans);
	font-size: var(--fs-lectura);
	font-weight: 500;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

.loha-pieza__cuerpo {
	margin-top: 0.6rem;
	color: var(--c-texto);
	font-size: var(--fs-lectura);
	line-height: 1.45;
	text-wrap: balance;
}

@media (min-width: 600px) {
	.loha-piezas {
		grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
	}
}

/* ── Tres butacas (cortina 2) ─────────────────────────────── */

/* La columna central va resaltada de forma estática (--destacada, por
   posición): caja beige y butaca en beige. Es un acento compositivo, no
   un estado: sin hover ni foco. Todas llevan el mismo relleno, para que
   las tres queden a la misma altura con o sin caja. */
.loha-piezas--butacas {
	row-gap: 0.5rem;
}

.loha-piezas--butacas > .loha-pieza {
	padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem) clamp(1rem, 0.6rem + 1.2vw, 2rem);
}

.loha-pieza__butaca {
	display: block;
	width: clamp(4.5rem, 3rem + 5vw, 8.5rem);
	height: auto;
	color: var(--azul);
}

.loha-pieza--destacada .loha-pieza__butaca {
	color: var(--beige-600);
}

.loha-piezas--butacas .loha-pieza__titulo {
	margin-top: clamp(1rem, 0.7rem + 0.8vw, 1.6rem);
	font-weight: 600;
}

.loha-pieza__lista {
	margin-top: clamp(0.6rem, 0.4rem + 0.6vw, 1.1rem);
}

/* ── Paneles (cortina 4) ──────────────────────────────────── */

/* Dos cajas equilibradas: pública en azul y privada en beige, alineadas a
   la izquierda. El encabezado es la etiqueta; la frase en DM Serif va en
   un <p>. En TV y M, apiladas en ese orden. */
.loha-piezas--panel {
	display: grid;
	gap: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
}

.loha-piezas--panel > .loha-pieza {
	align-items: stretch;
	text-align: left;
}

.loha-pieza__etiqueta {
	color: var(--c-texto);
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: var(--lh-interfaz);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.loha-pieza__titular {
	margin-top: clamp(1rem, 0.7rem + 0.8vw, 1.6rem);
	color: var(--c-texto);
	font-family: var(--serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	text-wrap: balance;
}

.loha-pieza__titular .loha-linea {
	display: block;
}

.loha-piezas--panel .loha-lista {
	margin-top: clamp(1.25rem, 0.9rem + 1vw, 2rem);
}

@media (max-width: 599px) {
	.loha-pieza__titular .loha-linea {
		display: inline;
	}
}

@media (min-width: 600px) {
	.loha-piezas--panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1024px) {
	.loha-piezas--panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}