/* La colección Testimonios. ESTA HOJA ES NUESTRA.

   El prototipo no tiene una página para esto: en la home hay un carrusel de
   tapas, y nada más. Acá hacen falta las ocho con su texto, así que la forma se
   arma con lo que ya usa el resto del sitio —las mismas medidas, los mismos
   colores y el mismo separador entre filas que `.report-list` y `.directory`—
   para que no parezca una página de otro sitio.

   Cada libro es una fila: la tapa a la izquierda y el texto a la derecha. */

.coleccion-list { list-style: none; padding: 0 !important; margin: 26px 0 0 !important; }

.coleccion-list > li {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 32px;
	padding: 32px 0 !important;
	border-bottom: 1px solid var(--line);
	align-items: start;
}

.coleccion-tapa img {
	display: block;
	width: 180px;
	height: auto;
	border-radius: 4px;
	/* La misma sombra suave que la tapa del Archivo. */
	box-shadow: 2px 4px 8px #193e7017;
}

.coleccion-list h3 { font-size: 23px; line-height: 1.35; margin: 0; }
.coleccion-subtitulo { font-size: 17px; line-height: 1.45; margin: 4px 0 0 !important; }

/* El autor, como dato y no como texto: el mismo tratamiento que `.delegate-role`
   en el consejo directivo y que el horario en fechas de pago. */
.coleccion-autor { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 10px 0 0 !important; }

/* El renglón no se estira todo lo que da la columna. A 945 px son unos 150
   caracteres por línea y el ojo se pierde al volver. 66ch es la misma medida
   que usa el prototipo para la prosa de las páginas interiores. */
.coleccion-texto { margin-top: 14px; max-width: 66ch; }
.coleccion-texto p { margin: 0 0 12px; }
.coleccion-texto p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
	.coleccion-list > li { grid-template-columns: 1fr; gap: 20px; }
	/* En el teléfono la tapa se achica: a 180px se come media pantalla y
	   empuja el texto demasiado abajo. */
	.coleccion-tapa img { width: 132px; }
	.coleccion-list h3 { font-size: 21px; }
	.coleccion-subtitulo { font-size: 16px; }
}