/* El Archivo. Sacado de `informaadi.css` del prototipo, SOLO las reglas del
   buscador: esa hoja son 13 KB y el resto es de la página de InformAADI del
   prototipo —variantes de noticias, prensa, comparaciones, vista previa— que
   acá no existe.

   Las medidas y los colores son los de allá, sin tocar. */

.archive-browser [hidden] { display: none !important; }

.archive-feature {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 32px;
	align-items: center;
	margin-bottom: 32px;
}
.archive-feature img { width: 112px; height: auto; box-shadow: 2px 4px 8px #193e7017; }
.archive-feature h3 { font-size: 27px; line-height: 1.3; margin: 10px 0; }
.archive-feature p { font-size: 16px; max-width: 65ch; }

.archive-form {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(180px, .65fr) auto;
	gap: 18px;
	align-items: end;
	background: var(--soft);
	padding: 24px;
	border-radius: 20px;
}
.archive-form label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.archive-form input,
.archive-form select {
	font: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--text);
	border: 1px solid #9aafc9;
	border-radius: 6px;
	padding: 12px;
	width: 100%;
	height: 49px;
}
.archive-form .btn { border: 0; cursor: pointer; height: 49px; }
.archive-form :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.archive-status { font-size: 13px; color: var(--muted); margin: 20px 0 14px; }

.archive-results { list-style: none; padding: 0; margin: 0; }
.archive-results li {
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 20px;
	padding: 14px 0;
	align-items: baseline;
}
.archive-results span { font-size: 12px; color: var(--muted); }
.archive-results a {
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.archive-results a:hover { text-decoration: underline; }

.archive-pagination { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.archive-pagination button {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50%;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	font-size: 13px;
	color: var(--navy);
	cursor: pointer;
}
.archive-pagination button:first-child,
.archive-pagination button:last-child { border-radius: 22px; padding-inline: 16px; }
.archive-pagination button[aria-current] { background: var(--navy); color: #fff; border-color: var(--navy); }
.archive-pagination button:disabled { opacity: .45; cursor: default; }
.archive-pagination span { font-size: 13px; }

@media (max-width: 800px) {
	.archive-form { grid-template-columns: 1fr 1fr; }
	.archive-form .btn { grid-column: 2; justify-self: end; min-width: 125px; }
}

@media (max-width: 600px) {
	.archive-feature { grid-template-columns: 85px 1fr; gap: 20px; }
	.archive-feature h3 { font-size: 23px; }
	.archive-feature p:not(.kicker) { font-size: 14px; }
	.archive-form { grid-template-columns: 1fr; padding: 20px; }
	.archive-form .btn { grid-column: auto; justify-self: stretch; }
	.archive-results li { display: block; padding-block: 15px; }
	.archive-results span { display: block; margin-bottom: 3px; }
	.archive-results a { font-size: 14px; }
	.archive-pagination { gap: 5px; }
	.archive-pagination button { min-width: 36px; height: 38px; }
	.archive-pagination button:first-child,
	.archive-pagination button:last-child { padding-inline: 11px; }
}

/* LA TAPA DE CADA EJEMPLAR, chiquita, a la izquierda del renglón.
   -------------------------------------------------------------------------
   La casilla va siempre, tenga imagen o no: si sólo se dibujara cuando hay,
   los renglones sin tapa se correrían a la izquierda y la lista quedaría en
   zigzag. Los que no tienen muestran el hueco y listo.

   `contain` y no `cover`: son tapas y afiches de todas las proporciones
   —cuadrados, verticales, apaisados— y recortarlos a una medida fija se come
   el número de la edición o el nombre, que suelen ir en los bordes. */
/* `align-items` pasa de `baseline` a `center`. Con la tapa al lado, alinear
   por la base del texto dejaba el nombre de la coleccción y el título pegados
   al pie de la imagen, como colgando. */
.archive-results li { grid-template-columns: 44px 170px 1fr; align-items: center; }

.archive-tapa {
	display: grid;
	place-items: center;
	width: 44px;
	height: 56px;
	border-radius: 3px;
	overflow: hidden;
}
.archive-tapa img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

@media (max-width: 600px) {
	/* En el teléfono: la tapa a la izquierda, y la colección y el título uno
	   debajo del otro a su derecha. Se dicen por nombre en vez de dejarlo al
	   orden de los elementos: son tres hijos en dos columnas, y sin esto el
	   tercero se iria a una fila nueva debajo de la tapa. */
	.archive-results li {
		display: grid;
		grid-template-columns: 44px 1fr;
		grid-template-areas: 'tapa coleccion' 'tapa titulo';
		column-gap: 14px;
		row-gap: 3px;
		align-content: center;
	}
	.archive-tapa { grid-area: tapa; align-self: center; }
	.archive-results li > span:not(.archive-tapa) { grid-area: coleccion; }
	.archive-results li > a { grid-area: titulo; }
}