/*
 * NeXeN Memoriale — il minimo perché la fronte della lapide si legga.
 *
 * Poche regole di proposito, come in `nexen-luoghi/assets/luoghi.css`: i
 * colori, i caratteri e le misure sono del tema (`nexen-cimiteri` li tiene nei
 * token del Kit, fondo `#000000`). Qui c'è solo quello che il tema non può
 * sapere: come si dispongono due date sotto un nome.
 *
 * ⛔ Nessun colore dichiarato, nessun bordo, nessun riquadro. Su un fondo nero
 * e in un tono funebre, il modo di dare peso a una data è lo spazio intorno,
 * non una cornice: la fronte di una lapide non è una scheda tecnica. Tutto in
 * `currentColor` e in `opacity`, così lo stesso foglio regge se un giorno il
 * fondo non fosse più nero.
 *
 * Caricato sulla pagina di una memoria, e sulla pagina che ospita il modulo.
 */

/* =========================================================================
   LA FRONTE — ritratto, nome, date.

   ⚠ Poche righe perché la larghezza, i margini e i caratteri li dà già il
   tema: il template chiede `pagina pagina--articolo`, e da lì prende
   l'impaginato che hanno tutte le altre pagine del sito. Qui c'è solo
   l'ordine della pietra — prima il volto, poi il nome, poi l'arco di vita —
   che è l'unica cosa che il tema non può sapere.

   ⛔ Nessun colore, nessun bordo, nessuna cornice attorno al ritratto: una
   fotografia incorniciata sul nero diventa un oggetto d'arredo, e questa è la
   fotografia di una persona morta.
   ========================================================================= */

.pagina--memoria .memoria__testa {
	margin-bottom: 1.8rem;
}

/* Il ritratto sta **basso di proposito**: non è l'eroe della pagina, è il
   modo di riconoscere chi si sta guardando. `max-height` in `vh` perché una
   fotografia verticale — che è la forma normale di un ritratto — altrimenti
   si mangia tutto il primo schermo e il nome finisce sotto la piega.
   `object-fit: contain`: un volto non si ritaglia per far quadrare una
   griglia. */
.pagina--memoria .memoria__ritratto {
	margin: 0 0 1.4rem;
}

.pagina--memoria .memoria__ritratto img {
	display: block;
	margin: 0;
	width: auto;
	max-width: min(100%, 18rem);
	max-height: 45vh;
	height: auto;
	object-fit: contain;
}

.pagina--memoria .memoria__nome {
	margin: 0 0 .8rem;
}

/* =========================================================================
   I GESTI E IL DIARIO — le altre due parti (DISEGNO §2).

   Escono **fuori** da `.pagina__contenuto`, sotto la fronte. Qui c'è solo lo
   stacco: una riga sottilissima in `currentColor`, non un riquadro. Serve a
   dire «finisce ciò che è della persona, comincia ciò che è di chi resta»,
   e per dirlo basta un filo.
   ========================================================================= */

.pagina--memoria .nexen-gesti,
.pagina--memoria .nexen-diario {
	margin-top: 2.4rem;
	padding-top: 1.8rem;
	border-top: 1px solid currentColor;
	border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}

.nexen-identita {
	margin: 0 0 1.6em;
}

/* Due colonne: l'etichetta si stringe sul suo testo, la data prende il resto.
   `minmax(6.5em, auto)` tiene le due etichette incolonnate — «Scomparsa» è la
   più lunga — senza spingerle a metà pagina su uno schermo largo. */
.nexen-identita__date {
	display: grid;
	grid-template-columns: minmax(6.5em, auto) 1fr;
	gap: .25em 1em;
	margin: 0;
	max-width: 32em;
}

.nexen-identita__date dt {
	font-weight: 600;
	opacity: .75;
}

/* `tabular-nums`: gli anni delle due righe stanno in colonna invece di
   ballare, che è l'unica ragione per cui due date messe una sotto l'altra si
   leggono come un arco di vita e non come due voci di elenco. */
.nexen-identita__date dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* La data che non si sa è la voce del sito, non un dato della persona: più
   leggera e in corsivo, così si distingue a colpo d'occhio da ciò che invece
   è un fatto. ⛔ Non si sbiadisce oltre: resterebbe illeggibile sul nero. */
.nexen-identita__ignota {
	font-style: italic;
	opacity: .6;
}

/* =========================================================================
   IL MODULO — le tre caselle di una data.

   ⚠ Il `fieldset` NON è in `display: flex`: `legend` dentro un contenitore
   flex si comporta in modo diverso da un browser all'altro (in alcuni smette
   di essere una didascalia e diventa un elemento in riga). Il riquadro resta
   un blocco normale e sono le etichette a mettersi in fila da sole: stesso
   risultato, e nessun caso strano.
   ========================================================================= */

.nexen-memoria-data {
	border: 0;
	padding: 0;
	margin: 0 0 1.2em;
	min-width: 0;
}

.nexen-memoria-data legend {
	padding: 0;
	margin-bottom: .35em;
}

.nexen-memoria-data label {
	display: inline-flex;
	flex-direction: column;
	gap: .2em;
	margin: 0 .8em .35em 0;
	vertical-align: bottom;
	font-size: .9em;
	opacity: .85;
}

/* Quattro cifre e basta: un campo largo quanto il resto inviterebbe a
   scriverci dentro qualcos'altro. */
.nexen-memoria-data input[type="number"] {
	width: 7.5em;
	max-width: 100%;
}

/* La riga che dice che «non lo so» è una risposta va a capo da sola, sotto le
   caselle: è rivolta a chi si è appena fermato lì. */
.nexen-memoria-data .nexen-memoria-nota {
	display: block;
}

.nexen-memoria-nota {
	font-size: .9em;
	opacity: .7;
}

/* ---------------------------------------------------------------- precedente / successiva (V2 A-013) */
/* In fondo a una memoria: la vicina prima e quella dopo nell'ordine alfabetico dell'elenco, e il ritorno all'elenco. */
.memoria__vicine {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	max-width: 1140px;
	margin: 48px auto 0;
	padding: 20px 0 8px;
	border-top: 1px solid rgba(0, 0, 0, .12);
}
.memoria__vicina { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none !important; color: inherit; }
.memoria__vicina--succ { text-align: right; }
.memoria__vicina-et { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.memoria__vicina-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; }
.memoria__vicina:hover .memoria__vicina-nome,
.memoria__vicina:focus-visible .memoria__vicina-nome { text-decoration: underline; }
.memoria__vicine-elenco { justify-self: center; padding: 10px 20px; border: 1px solid currentColor; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
@media (max-width: 600px) {
	.memoria__vicine { grid-template-columns: 1fr 1fr; }
	.memoria__vicine-elenco { grid-column: 1 / -1; grid-row: 2; }
}