/* El listado de noticias. Sacado de `informaadi.css` del prototipo: son las
   reglas de su sección «Noticias», en la variante que las pone en lista —una
   debajo de la otra, con la foto a la izquierda— y no en tres columnas.

   Esa hoja son 13 KB y el resto es de una página que acá no existe: prensa,
   comparaciones, vista previa. Acá están sólo las que usa esta lista. */

.news-list { list-style: none; padding: 0 !important; margin: 0 !important; }

.news-item {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 28px;
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
}
.news-item:first-child { padding-top: 0; }

.news-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1.2;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 12px;
}

.news-copy { padding: 0; }

.news-item .kicker {
	font-size: 12px !important;
	letter-spacing: .065em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--gold) !important;
	margin: 0 !important;
}

.news-copy time { display: block; font-size: 12px; color: var(--muted); margin: 5px 0; }

.news-item h3 { font-size: 26px; line-height: 1.24; letter-spacing: -.025em; margin: 10px 0 13px; }
.news-item h3 a { text-decoration: none; }
.news-item h3 a:hover { text-decoration: underline; }

.news-item p { font-size: 16px; line-height: 1.75; }

.read-link { display: inline-block; font-size: 14px; font-weight: 700; margin-top: 10px; text-decoration: underline; }

/* El filtro por categoría. No viene del prototipo —allá no hay filtro— así que
   se le da la misma forma que al buscador del Archivo, para que las dos
   páginas de listado se parezcan. */
.news-filter {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) auto;
	gap: 18px;
	align-items: end;
	background: var(--soft);
	padding: 24px;
	border-radius: 20px;
	margin-bottom: 30px;
}
.news-filter label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.news-filter select {
	font: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--text);
	border: 1px solid #9aafc9;
	border-radius: 6px;
	padding: 12px;
	width: 100%;
	height: 49px;
}
.news-filter .btn { border: 0; cursor: pointer; height: 49px; }
.news-filter :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 600px) {
	.news-item { grid-template-columns: 100px 1fr; gap: 18px; }
	.news-item img { aspect-ratio: 1; }
	.news-item h3 { font-size: 21px; }
	.news-item p { font-size: 15px; }
	.news-filter { grid-template-columns: 1fr; padding: 20px; }
	.news-filter .btn { justify-self: stretch; }
}

/* Una noticia sin foto: el texto ocupa el ancho entero. Sin esto queda una
   columna de 180 px vacía a la izquierda, que se lee como una imagen que no
   cargó. Hoy es una sola de las 275, pero pasa. */
.news-item-sin-foto { grid-template-columns: 1fr; }

/* ===== UNA NOTICIA ===== */

/* LA PORTADA NO PASA DEL ANCHO DEL TEXTO, y no por gusto: las imágenes de
   las noticias son de 912 px de ancho, y a lo ancho de la columna entera
   -1157 px- el navegador las AGRANDA, que es lo que las ponía borrosas y
   del alto de la pantalla. A 66ch son 684 px: entran holgadas.

   Tampoco se recorta a 16/9. Las del CMS son de 912x700, y forzar ese
   recorte les comía la parte de arriba y la de abajo: en una foto de
   alguien, la cabeza. Va su proporción, la que sea. */
.noticia-portada { margin: 8px 0 0; }
.noticia-portada img {
	display: block;
	width: 100%;
	max-width: 66ch;
	height: auto;
	border-radius: 12px;
}

/* El álbum. En la vista vieja era una galería con fancybox; acá cada foto
   abre la imagen entera en otra solapa, que no necesita ningún guión. */
.noticia-album {
	list-style: none;
	padding: 0 !important;
	margin: 20px 0 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}
.noticia-album img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
}
.noticia-album a { display: block; border-radius: 8px; }
.noticia-album a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* El encabezado de la nota: la categoría arriba y la fecha como bajada. */
.opening .kicker {
	font-size: 12px !important;
	letter-spacing: .065em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--gold) !important;
	margin: 0 0 6px !important;
}

/* El cuerpo de la nota no se estira todo lo que da la columna. El tope de 66ch
   viene de cuando la página era ancha -1157 px eran unos 180 caracteres por
   línea y el ojo se perdía al volver-. Hoy la columna de la nota da unos 580 px
   y el tope ya no llega a actuar, pero se deja: si algún día la página vuelve a
   ensancharse, el renglón no se descontrola solo. */
#nota .contenido-cms { max-width: 66ch; }

/* ===== LA NOTA Y LAS OTRAS NOVEDADES AL COSTADO =====================
   La distribución de la vista vieja -`col-md-8` y `col-md-4`- con el diseño
   nuevo, pedida por malvarez73 el 30/09.

   El costado es FIJO y la nota se queda con lo que sobra, al revés de lo que
   uno escribiría primero. Con las dos en `fr` la tarjeta del costado se estira
   en una pantalla grande y se aplasta en una chica, y es siempre la misma
   tarjeta: 260 px es lo que necesita para que entren la tapa, la volanta, la
   fecha y dos renglones de título. Lo que sobra -unos 580 px en la columna
   centrada de 880- es justo la medida cómoda para leer.

   `align-items: start` para que el costado no se estire hasta el largo de la
   nota: sin eso, el fondo suave bajaba tres pantallas con dos tarjetas arriba
   y todo lo demás vacío. */
.nota-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 44px;
	align-items: start;
}

.nota-lateral {
	background: var(--soft);
	border-radius: 20px;
	padding: 24px;
}
.nota-lateral h2 {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 0 0 4px;
}

.otras-list { list-style: none; padding: 0 !important; margin: 0 !important; }
.otras-list li { border-top: 1px solid var(--line); }

.otras-list a {
	display: block;
	padding: 18px 0;
	text-decoration: none;
	color: inherit;
}
.otras-list a:hover .titulo { text-decoration: underline; }
.otras-list a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.otras-list img {
	width: 100%;
	height: auto;
	aspect-ratio: 1.4;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 10px;
	margin-bottom: 12px;
}

.otras-list .kicker {
	display: block;
	font-size: 11px;
	letter-spacing: .065em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--gold);
}
.otras-list time { display: block; font-size: 12px; color: var(--muted); margin: 4px 0 6px; }
.otras-list .titulo {
	display: block;
	color: var(--navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.015em;
}

.nota-lateral .read-link { margin-top: 16px; }

/* Abajo de 900 px la nota se quedaría con menos de 400 px de ancho, que ya no
   se lee. Se apila: primero la nota entera, después las otras novedades, que es
   lo que hacía la vista vieja en el teléfono -`hidden-xs hidden-sm` las
   escondía del todo; acá no se esconden, se corren abajo-. */
@media (max-width: 900px) {
	.nota-layout { grid-template-columns: 1fr; gap: 40px; }
	.nota-lateral { max-width: 520px; }
}