/*
 * Mentora — le sezioni della home.
 *
 * I materiali e i componenti stanno in materials.css e components.css:
 * qui c'è solo come si compongono nelle sei sezioni della home.
 */

/* ------------------------------------------------------------------ *
 * I blocchi di WordPress dentro i nostri contenitori flex.
 *
 * Il layout «flow» del core aggiunge un margine fra un blocco e il
 * successivo. Dentro un contenitore flex con gap, i due si sommano e le
 * spaziature raddoppiano. Il gap vince.
 * ------------------------------------------------------------------ */
.m-card__corpo > *,
.m-teca > *,
.m-hero__testo > *,
.m-targa__testo > *,
.m-newsletter__testo > * {
	margin-block: 0;
}

/* ================================================================== *
 * 1 — HERO
 * ================================================================== */

.m-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 48px;
	align-items: center;
}

.m-hero__testo {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

/* L'etichetta mono in un riquadro leggero, come nel riferimento. */
.m-etichetta-riquadro {
	padding: 6px 12px;
	border: 1px solid rgba(90, 80, 65, .25);
	border-radius: 999px;
	background: rgba(255, 255, 255, .4);
}

.m-hero__titolo {
	margin: 0;
	max-width: 14ch;
}

.m-hero__sommario {
	max-width: 52ch;
	font-size: 1.0625rem;
	color: var(--m-ink-2);
}

/* --- La console --- */
.m-console {
	position: relative;
	padding: 26px;
	border-radius: var(--m-r-xl);
}

.m-console > :not(.m-viti) {
	position: relative;
	z-index: 1;
}

.m-console__display {
	font-size: 0.9375rem;
	line-height: 1.9;
}

/*
 * Una riga vuota occupa comunque la sua riga.
 *
 * Il display si riscrive carattere per carattere, e le righe nascono
 * vuote: senza questa altezza minima la console si allungherebbe sotto
 * le dita mentre scrive, e la pagina salterebbe.
 */
.m-console__display .m-lcd__riga {
	min-height: 1.9em;
}

/* Il link dell'ultima riga: sta sull'LCD, quindi e' di quel verde. */
.m-lcd__link {
	color: var(--m-lcd-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.m-lcd__link:hover,
.m-lcd__link:focus-visible {
	color: #D7FCE0;
}

.m-lcd__link:focus-visible {
	outline: 2px solid var(--m-lcd-text);
	outline-offset: 2px;
}

.m-lcd__riga--titolo {
	color: #D7FCE0;
}

/*
 * Quante ne entrano lo decide il numero dei prodotti, non una riga di
 * CSS: `auto-fit` invece di `repeat(4, …)`. A 375px la fila e' larga
 * 305 — misurata — e con cinque colonne e 8px di gap ne restano 54,6 a
 * testa, sopra i 44 del bersaglio minimo.
 */
.m-console__levette {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
	gap: 12px;
	margin-top: 24px;
}

/* --- Levette: comandi veri, con sopra la decorazione --- */
.m-levetta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;

	/* Il `button` non deve portarsi dietro niente del browser. */
	min-height: 44px;
	padding: 4px 0;
	border: 0;
	border-radius: var(--m-r-sm);
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Finche' il JavaScript non le accende restano quello che erano: un
 * disegno. Niente mano, niente stato premuto, nessuna promessa.
 */
.m-levetta:disabled {
	cursor: default;
}

.m-levetta:focus-visible {
	outline: 3px solid var(--m-accent);
	outline-offset: 2px;
}

/* La banda si accende appena, come le voci del menu laterale. */
.m-levetta:not(:disabled):hover {
	background-color: rgba(60, 50, 40, .07);
}

.m-levetta__binario {
	position: relative;
	width: 34px;
	height: 60px;
	border-radius: 17px;
	background: linear-gradient(180deg, #4A4741, #2C2A26);
	box-shadow:
		inset 0 3px 6px rgba(0, 0, 0, .6),
		0 1px 0 rgba(255, 255, 255, .8);
}

.m-levetta__pomello {
	position: absolute;
	left: 3px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #FFFFFF, #CFCDC8 60%, #9B9992);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .5);

	/* 60 di binario meno 28 di pomello meno i 3 di sotto. */
	top: 3px;
	transition: top var(--m-dur-base) var(--m-ease-spring);
}

/*
 * Su e giu'.
 *
 * Lo stato lo dice `aria-pressed`, che e' gia' li' per chi non vede: il
 * CSS legge quello invece di farsi cambiare una classe dal
 * JavaScript. Una verita' sola, e il giorno che l'attributo si scorda
 * si vede subito perche' la levetta non scende.
 */

.m-levetta[aria-pressed="true"] .m-levetta__pomello {
	top: 29px;
}

.m-levetta__etichetta {
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: #3A362F;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* ================================================================== *
 * 2 — PLUGIN
 * ================================================================== */

.m-griglia-plugin .m-card {
	/* Le card della stessa riga arrivano in fondo insieme. */
	height: 100%;
}

/* ================================================================== *
 * 3 — LABS
 * ================================================================== */

.m-labs {
	position: relative;
	padding: 40px 32px;
}

.m-labs > :not(.m-cucitura) {
	position: relative;
	z-index: 1;
}

/* Sulla pelle il testo dell'intestazione va chiaro. */
.m-intestazione--scuro .m-intestazione__titolo {
	color: var(--m-leather-text);
}

.m-intestazione--scuro .m-intestazione__nota {
	color: var(--m-leather-text-2);
}

.m-intestazione--scuro .m-label {
	color: var(--m-brass);
}

.m-teca {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	transition:
		transform var(--m-dur-fast) var(--m-ease-soft),
		box-shadow var(--m-dur-fast) var(--m-ease-soft),
		border-color var(--m-dur-fast) var(--m-ease-soft),
		background var(--m-dur-fast) var(--m-ease-soft);
}

/*
 * Il rollover: la teca si alza di poco e il vetro si schiarisce, come
 * un pezzo che viene avanti nella vetrina. Quattro pixel, non dieci:
 * sono quattro in fila, e se saltano su si muove tutto il mobile.
 *
 * `:focus-within` accanto a `:hover` perche' chi gira col tasto TAB
 * deve vedere accendersi la card su cui e' arrivato, non guardare la
 * fila scorrere sotto una scheda spenta.
 *
 * Si muovono solo `transform`, ombre e colori. Con «movimento
 * ridotto» `--m-lift` vale 0: il sollevamento sparisce e resta il
 * cambio di luce, che e' l'informazione.
 */
.m-teca:hover,
.m-teca:focus-within {
	transform: translateY(calc(var(--m-lift) * -.4));
	border-color: rgba(255, 255, 255, .40);
	background: linear-gradient(180deg, rgba(255, 255, 255, .21), rgba(255, 255, 255, .09));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .50),
		0 18px 34px rgba(0, 0, 0, .45);
}

/*
 * Titolo sopra, fascetta di stato sotto, sempre.
 *
 * Era una riga sola con `flex-wrap`, e la fascetta andava a capo solo
 * quando il titolo era lungo: «Mentora Signage» la mandava sotto,
 * «Map Quest» la teneva accanto. Tre card affiancate con la fascetta
 * a tre quote diverse — e la quota dipendeva dalla lunghezza del
 * nome, che non e' un'informazione.
 */
.m-teca__testata {
	display: flex;
	align-items: center;
	gap: 14px;
}

/*
 * Nome sopra, fascetta di stato sotto, sempre.
 *
 * Era una riga sola con `flex-wrap`, e la fascetta andava a capo solo
 * quando il nome era lungo: «Mentora Signage» la mandava sotto, «Map
 * Quest» la teneva accanto. Tre card affiancate con la fascetta a tre
 * quote diverse, e la quota dipendeva dalla lunghezza del nome — che
 * non e' un'informazione.
 */
.m-teca__nome {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * IL TONDO DEL MARCHIO, IN ATTESA DI QUELLO VERO
 *
 * Tratteggiato perche' e' un segnaposto e lo deve dire. Dentro ci sta
 * il segno del progetto, quello che il Lab ha gia': meglio del nulla
 * e meglio di una scritta «logo» che non guarda nessuno.
 *
 * Quando arriva il marchio vero, qui dentro va l'immagine e il
 * tratteggio sparisce.
 * ------------------------------------------------------------------ */
.m-marchio-attesa {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 2px dashed rgba(255, 255, 255, .28);
	border-radius: 50%;
	color: var(--m-leather-text);
}

/*
 * Col marchio vero il tondo smette di essere un'attesa: il tratteggio
 * diventa un filo continuo, perche' il tratteggio dice «qui ci va
 * qualcosa» e adesso quel qualcosa c'e'.
 */
.m-marchio-attesa--vero {
	border-style: solid;
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .06);
}

/* ------------------------------------------------------------------ *
 * LA BARRA DELLA SCHEDA LAB
 *
 * Accanto al pulsante, non sotto: la riga delle azioni diventa una
 * riga con due cose, il comando e il dato. Su schermo stretto vanno a
 * capo come tutto il resto.
 *
 * I colori sono quelli della pelle, non quelli della carta: qui la
 * scheda sta su vetro sopra pelle, e il binario della barra deve
 * scavare nel buio invece che nel chiaro.
 * ------------------------------------------------------------------ */

.m-teca__avanzamento {
	flex: 1 1 140px;
	min-width: 120px;
}

.m-teca__avanzamento .m-barra {
	background: rgba(0, 0, 0, .45);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .08);
}

.m-teca__avanzamento .m-card__etichetta-avanzamento,
.m-teca__avanzamento .m-card__percento,
.m-teca__avanzamento .m-card__segno {
	color: var(--m-leather-text);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}

/*
 * Il marchio di casa riempie il tondo mentre quello del prodotto non
 * c'e'. Il bordo resta tratteggiato — l'attesa non e' finita — e il
 * segno sta un po' piu' piccolo: e' un ospite, non il padrone di casa.
 */
.m-marchio-attesa--casa img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	opacity: .85;
}

.m-marchio-attesa--vero img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.m-marchio-attesa svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

/* ------------------------------------------------------------------ *
 * IL NOME COMPOSTO — «M.» piu' «DOOH»
 *
 * Due caratteri diversi che devono avere la stessa altezza di
 * maiuscola. Non ce l'hanno: misurate su canvas a 100px, la «M.» di
 * Fraunces sale 69,29 e la «D» di Inter 73,73. Il rapporto e' 0,9398,
 * e da li' viene lo `0.94em`.
 *
 * Senza questo conto la coda sembrerebbe piu' alta della sigla, che e'
 * esattamente la cosa che si nota senza saperla spiegare.
 * ------------------------------------------------------------------ */
.m-marchio__nome {
	font-family: var(--m-font-body);
	font-size: 0.94em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.m-teca__titolo {
	margin: 0;
	font-size: 1.1875rem;
	color: var(--m-leather-text);
}

.m-teca__testo {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.9375rem;
	color: var(--m-leather-text-2);
}

/* La fascetta di stato: un'etichetta incisa, non un pulsante. */
.m-fascetta-stato {
	/*
	 * Flex perche' da quando lo stato arriva dal CPT porta con se' un
	 * LED, e il LED dev'essere in asse col testo che lo accompagna —
	 * mai da solo: il colore non basta a dire uno stato.
	 */
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	/* Maiuscolo dal CSS: nel CPT le etichette restano scritte normali. */
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid rgba(233, 214, 180, .3);
	border-radius: var(--m-r-sm);
	background: rgba(0, 0, 0, .25);
	font-family: var(--m-font-mono);
	font-size: 0.6875rem;
	letter-spacing: .1em;
	color: var(--m-brass-1);
}

/* ================================================================== *
 * 4 — DOCUMENTAZIONE E SUPPORTO
 * ================================================================== */

.m-quaderno__titolo,
.m-biglietto__titolo {
	font-size: 1.625rem;
}

.m-biglietto__titolo {
	margin: 4px 0 14px;
}

/*
 * Sul foglio a righe anche l'intestazione sta sul passo di 32:
 * l'etichetta un rigo, il titolo un rigo, un rigo vuoto. Con le
 * misure del biglietto — 4 e 14 — l'elenco sotto restava 6px sopra
 * le righe per tutta la sua lunghezza.
 */
.m-quaderno .m-label {
	margin: 0;
	line-height: 32px;
}

.m-quaderno__titolo {
	margin: 0 0 32px;
	line-height: 32px;
}

/* L'elenco dei documenti non ha pallini: sono righe di quaderno. */
.m-elenco-nudo {
	list-style: none;
	margin: 0;
	padding: 0;
}

.m-elenco-nudo li {
	margin: 0;
}

/*
 * 32px è il passo delle righe del quaderno, ma un link alto 32px è un
 * bersaglio sotto i 44px che la skill chiede.
 *
 * La soluzione non è rompere il ritmo: è usarne due. Con 16px di
 * imbottitura sopra e sotto il blocco arriva a 64px — esattamente due
 * righe — quindi il testo resta appoggiato a una riga vera e il
 * bersaglio è abbondante. Sulla carta a righe la scrittura a righe
 * alterne è anche più naturale.
 */
.m-elenco-nudo a {
	display: block;
	line-height: 32px;
	padding-block: 16px;
}

/* ================================================================== *
 * 5 — PROGETTI & RICERCA
 * ================================================================== */

.m-targa {
	position: relative;
	padding: 36px 32px;
	border-radius: var(--m-r-xl);
}

.m-targa > :not(.m-viti) {
	position: relative;
	z-index: 1;
}

.m-targa__dentro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 32px;
	align-items: center;
}

.m-targa__testo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.m-targa__titolo {
	margin: 0;
	max-width: 18ch;
	color: var(--m-brass-ink);
}

/* Sull'ottone l'etichetta mono standard non avrebbe contrasto. */
.m-label--ottone {
	color: #2E2207;
}

/* ================================================================== *
 * 6 — NEWSLETTER
 * ================================================================== */

.m-newsletter {
	position: relative;
	padding: 32px;
	border-radius: var(--m-r-xl);
}

.m-newsletter > :not(.m-viti) {
	position: relative;
	z-index: 1;
}

.m-newsletter__dentro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 28px;
	align-items: center;
}

.m-newsletter__testo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.m-newsletter__titolo {
	margin: 0;
	font-size: 1.625rem;
}

.m-newsletter__sommario {
	margin: 0;
	color: var(--m-ink-2);
}

.m-newsletter__campo {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.m-newsletter__campo .m-campo {
	flex: 1 1 220px;
}

.m-newsletter__nota {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	color: var(--m-ink-2);
}

/* ================================================================== *
 * TELEFONO
 * ================================================================== */

@media (max-width: 600px) {

	.m-hero {
		gap: 32px;
	}

	.m-hero__titolo {
		max-width: none;
	}

	.m-console {
		padding: 18px;
	}

	.m-console__levette {
		gap: 8px;
	}

	/*
	 * Il testo del display si rimpicciolisce, non si tronca.
	 *
	 * A 15px la riga piu' lunga — «> accessibility …. IN DEVELOPMENT»
	 * — chiede 297px e ne ha 259: finiva in puntini di sospensione, e
	 * un display di stato che nasconde lo stato non serve a niente.
	 * A 13px ne chiede 258. Misurato, non stimato.
	 */
	.m-console__display {
		font-size: 0.8125rem;
	}

	.m-labs,
	.m-targa,
	.m-newsletter {
		padding: 24px 18px;
	}

	.m-quaderno {
		--m-quaderno-pad: 20px;
		padding: var(--m-quaderno-pad) 20px var(--m-quaderno-pad) 64px;
	}
}

/* ================================================================== *
 * HERO A TUTTA PAGINA — solo in home
 *
 * Tutta la larghezza dello schermo, tutta l'altezza della finestra,
 * fondo in cuoio scuro. Per ora e' una superficie vuota: il contenuto
 * arriva dopo.
 * ================================================================== */

.m-hero-grande {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/*
	 * `svh` e non `vh`: su telefono `vh` vale la finestra con la barra
	 * degli indirizzi gia' ritirata, e il riquadro verrebbe piu' alto
	 * dello schermo — la stessa trappola del footer. La riga `vh` resta
	 * sopra come riserva per chi non conosce `svh`.
	 */
	min-height: 100vh;
	min-height: 100svh;
	padding-block-end: 28px;
	background-color: var(--m-leather-2);

	/*
	 * La tela non deve sbordare: il fumo arriva fino ai bordi e li'
	 * finisce, senza far comparire una barra di scorrimento laterale.
	 */
	overflow: hidden;
}

/*
 * La tela del fumo sta sotto tutto quello che c'e' nell'hero e non
 * prende i clic: la freccia «scendi» resta cliccabile, e da tastiera
 * non cambia niente.
 *
 * `aria-hidden` ce lo mette il JavaScript che la crea: una superficie
 * che si muove non ha niente da dire a chi non la vede, e il marchio
 * vero arrivera' allo step 2 come immagine con il suo testo
 * alternativo.
 */
.m-hero-grande__fumo {
	position: absolute;
	inset: 0;

	/*
	 * **Sopra il marchio, non sotto.** E' una maschera: il fumo passa
	 * davanti al medaglione e lo vela, e dove passa il marchio si
	 * perde. Sotto sarebbe solo uno sfondo.
	 */
	z-index: 2;

	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*
 * Il medaglione al centro dell'hero.
 *
 * In posizione assoluta perche' l'hero allinea in fondo — ci vive la
 * freccia — e il marchio invece sta nel mezzo. Cosi' i due non si
 * contendono l'allineamento.
 */
.m-hero-grande__marchio {
	position: absolute;
	inset: 0;
	z-index: 1;
	min-height: 0;
	padding: 0;
}

.m-hero-grande__marchio img {
	width: min(420px, 48vmin);
}

/* La freccia sopra tutto: e' l'unica cosa cliccabile qui dentro. */
.m-hero-grande__giu {
	position: relative;
	z-index: 3;
}

/* --- L'invito a scorrere ---
 *
 * Un link a un'ancora vera: funziona da tastiera, funziona senza
 * JavaScript, e aprendolo in una scheda nuova si arriva al punto
 * giusto. Non ondeggia da solo — la skill dice che si muove solo cio'
 * che cambia stato, e una freccia che balla all'infinito non cambia
 * nulla. Si muove quando ci passi sopra.
 */
.m-hero-grande__giu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px: e' un bersaglio. */
	width: 44px;
	height: 44px;
	border: 1px solid rgba(233, 214, 180, .28);
	border-radius: 50%;
	background-color: rgba(233, 214, 180, .07);
	color: var(--m-leather-text);
	text-decoration: none;
	transition:
		transform var(--m-dur-base) var(--m-ease-spring),
		background-color var(--m-dur-base) var(--m-ease-soft);
}

.m-hero-grande__giu svg {
	width: 20px;
	height: 20px;
}

.m-hero-grande__giu:hover,
.m-hero-grande__giu:focus-visible {
	transform: translateY(3px);
	background-color: rgba(233, 214, 180, .14);
}

/* --- La barra galleggia sopra l'hero ---
 *
 * Solo in home. Uscendo dal flusso, `main` diventa il primo elemento
 * della pagina e l'hero parte dal bordo superiore, con la barra
 * appoggiata sopra. L'ordine di impilamento lo porta con se': in
 * base.css l'header sta gia' sopra a contenuto e footer.
 */
body.home .wp-site-blocks > header {
	position: absolute;
	inset: 0 0 auto;
}

/* Senza, resterebbe il distacco che WordPress mette fra i blocchi. */
body.home .wp-site-blocks > main {
	margin-block-start: 0;
}


/* --- Le teche lette dal CPT dei Labs --- */

/*
 * Il titolo e' un link alla scheda della webapp. 44px anche qui: e' un
 * bersaglio come gli altri, e il corpo del titolo da solo ne darebbe 26.
 */
.m-teca__titolo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.m-teca__titolo a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Lo schermo senza video lo dichiara invece di mostrare un pulsante
 * che non fa niente. Quando il link arriva, al suo posto compare un
 * link vero.
 */
.m-schermo__vuoto {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0 16px;
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(233, 214, 180, .55);
}

.m-teca__azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	/*
	 * Due misure diverse, e la ragione sta nella seconda.
	 *
	 * Fra i pulsanti 10px, come sempre. Fra il comando e la barra 28,
	 * perche' non sono due pulsanti in fila: sono un comando e un
	 * dato, e a 10px si leggevano come la stessa riga di controlli.
	 *
	 * **La dichiarazione sta qui e non piu' in alto nel foglio.**
	 * Scritta prima veniva sovrascritta da questo `gap`, che a parita'
	 * di specificita' vince per ordine — la regola di CLAUDE.md sulle
	 * concorrenti, verificata misurando: lo spazio restava 10px.
	 */
	gap: 10px 28px;
	margin-top: auto;
}