/*
 * Mentora — componenti.
 *
 * Gli oggetti costruiti con i materiali: pulsanti, LED, card prodotto,
 * campi, display, targhe. Si carica per ultimo.
 *
 * Due regole guidano tutto, dalla skill §1:
 *   - la luce viene dall'alto: highlight sul bordo superiore, ombra sotto;
 *   - rilievo = cliccabile, incavo = contenitore.
 *
 * Il comportamento al clic e le animazioni arrivano allo Step 5.
 */

/* ================================================================== *
 * PULSANTI
 * ================================================================== */

.m-btn,
.wp-block-button.is-style-primario > .wp-block-button__link,
.wp-block-button.is-style-metallo > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 44px: il minimo per un bersaglio tattile (WCAG 2.1 AA). */
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--m-r-sm);
	font-family: var(--m-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--m-dur-fast) var(--m-ease-spring),
		box-shadow var(--m-dur-fast) var(--m-ease-soft),
		filter var(--m-dur-fast);
}

/* --- Primario: rame vetrificato --- */
.m-btn--primario,
.wp-block-button.is-style-primario > .wp-block-button__link {
	color: #fff;
	background-color: var(--m-accent);
	background-image: linear-gradient(180deg,
			rgba(255, 255, 255, .32),
			rgba(255, 255, 255, .08) 50%,
			rgba(0, 0, 0, .08) 51%,
			rgba(0, 0, 0, .16));
	border: 1px solid rgba(0, 0, 0, .35);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .45),
		0 3px 6px rgba(0, 0, 0, .25);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
}

/* --- Secondario: metallo --- */
.m-btn--metallo,
.wp-block-button.is-style-metallo > .wp-block-button__link {
	color: var(--m-ink);
	background-image: linear-gradient(180deg, #FFFFFF, #EDECE8 50%, #DCDAD5 51%, #E8E7E3);
	border: 1px solid var(--m-metal-edge);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 2px 4px rgba(60, 50, 40, .2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* --- Stati --- */
.m-btn:hover,
.wp-block-button.is-style-primario > .wp-block-button__link:hover,
.wp-block-button.is-style-metallo > .wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
}

/* Premuto: il pulsante affonda e l'ombra si rovescia all'interno. */
.m-btn:active,
.wp-block-button.is-style-primario > .wp-block-button__link:active,
.wp-block-button.is-style-metallo > .wp-block-button__link:active {
	transform: translateY(2px);
	transition-duration: calc(60ms * var(--m-speed));
	box-shadow:
		inset 0 2px 5px rgba(0, 0, 0, .28),
		0 1px 1px rgba(0, 0, 0, .15);
}

/* Un pulsante disattivato non finge di essere premibile. */
.m-btn[disabled],
.m-btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	filter: none;
}

/* ================================================================== *
 * LED
 *
 * Il colore non basta mai: accanto a ogni LED c'è sempre il testo
 * dello stato. Il LED è decorazione, il testo è l'informazione.
 * ================================================================== */

.m-led {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #BDBAB2, var(--m-led-off) 60%, #5F5A51);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}

.m-led--on {
	background: radial-gradient(circle at 40% 35%, #A8F5C4, var(--m-led-on) 60%, #15803D);
	box-shadow: 0 0 8px rgba(34, 197, 94, .75);
}

.m-led--wip {
	background: radial-gradient(circle at 40% 35%, #FDE3AC, var(--m-led-wip) 60%, #B45309);
	box-shadow: 0 0 8px rgba(245, 158, 11, .7);
}

/* LED + etichetta: l'unità minima con cui si comunica uno stato. */
.m-stato {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--m-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ================================================================== *
 * CARD PRODOTTO (scatola)
 *
 * Presenta un plugin. Non riproduce la sua interfaccia: quella ha già
 * il suo linguaggio e non si tocca.
 * ================================================================== */

.m-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--m-r-lg);
}

/* Fascetta scura in testa, con nome del prodotto e stato. */
/*
 * La copertina in cima alla card. La scatola ha gia' `overflow:
 * hidden`, quindi i due angoli alti li arrotonda lei.
 *
 * `aspect-ratio` dichiarato uguale all'immagine: lo spazio e' riservato
 * prima che arrivi, e una griglia di schede che si allungano una alla
 * volta mentre si scorre e' il difetto che si nota di piu'.
 */
.m-card__copertina {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1544 / 500;
	object-fit: cover;
}

/* Il marchio vero nel pozzetto, dove c'e'. */
.m-card__pozzetto--marchio img {
	width: 46px;
	height: 46px;
	object-fit: contain;
}

/*
 * Nell'archivio il pozzetto cresce, e con lui il marchio.
 *
 * I quattro marchi ora portano il 10% di aria dentro il proprio
 * riquadro: senza, quello di Accessibility toccava i bordi mentre gli
 * altri tre respiravano, perche' la sua e' una composizione in
 * diagonale e riempie il box da un angolo all'altro. L'aria pero' si
 * mangia dimensione, e a 46px quel marchio diventava una macchia.
 *
 * Qui c'e' spazio — il nome sta di fianco, non sotto — quindi il
 * pozzetto passa a 72 e il marchio a 62: il disegno vero torna a
 * misurare 52px invece di 46.
 */
.m-griglia-plugin--due .m-card__pozzetto {
	width: 72px;
	height: 72px;
}

.m-griglia-plugin--due .m-card__pozzetto--marchio img {
	width: 62px;
	height: 62px;
}

/*
 * La copertina che non c'e' ancora. Stessa proporzione di quella vera,
 * cosi' la scheda e' alta uguale con o senza, e tratteggiata perche'
 * e' un segnaposto e lo deve dire.
 */
/*
 * `<picture>` non deve esistere per l'impaginazione: le regole sono
 * scritte per l'immagine, e con `contents` l'immagine resta figlia
 * diretta della scheda come se il contenitore non ci fosse.
 */
picture {
	display: contents;
}

.m-copertina-attesa {
	display: grid;
	place-items: center;
	margin: 0;
	aspect-ratio: 1544 / 500;
	border-bottom: 2px dashed var(--m-brass-dark);
	background-color: rgba(156, 122, 60, .12);
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	letter-spacing: .08em;
	color: var(--m-ink-2);
}

.m-card__fascetta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/*
	 * Su una card stretta «ACCESSIBILITY» e «IN DEVELOPMENT» non ci
	 * stanno insieme. Lo stato è l'informazione, quindi resta intero e
	 * a cedere è il nome: si accorcia con i puntini.
	 */
	overflow: hidden;
	padding: 10px 16px;
	background-image: linear-gradient(180deg, #3A332D, #26211C);
	color: var(--m-leather-text);
	font-family: var(--m-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.m-card__fascetta > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.m-card__fascetta .m-stato {
	flex: 0 0 auto;
	white-space: nowrap;
}

.m-card__corpo {
	display: flex;
	flex-direction: column;

	/*
	 * Da 14 a 18: con le due righe delle edizioni in piu', la colonna si
	 * era stretta e la barra si appoggiava a quello che aveva sopra.
	 */
	gap: 18px;
	padding: 20px;
	flex: 1 1 auto;
}

/*
 * La barra e il suo numero sono una cosa sola, e respirano piu' del
 * resto: e' il dato che si guarda per primo in una scheda di prodotto
 * non ancora uscito.
 */
/*
 * Lo stacco e' piu' largo del gap della colonna perche' la barra e' il
 * cambio di discorso della scheda: sopra c'e' cosa compri, sotto a che
 * punto siamo. Senza, le due edizioni sembravano la didascalia della
 * barra.
 *
 * **E' `padding` e non `margin`, e non e' un capriccio.** In `home.css`
 * c'e' `.m-card__corpo > * { margin-block: 0 }`, voluta: il layout
 * «flow» di WordPress aggiunge margini fra i blocchi, e dentro un
 * contenitore flex con gap i due si sommano. Quella regola sta in un
 * foglio che si carica **dopo** questo, quindi un `margin-top` qui
 * verrebbe azzerato — e infatti e' successo, computato `0px` con la
 * regola scritta e visibile. Il padding non lo tocca nessuno.
 */
.m-card__avanzamento {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 14px;
	padding-bottom: 4px;
}

/*
 * La percentuale e' un contatore inciso, lo stesso trattamento dei
 * numeri sulla targa: cifra grande in Fraunces, etichetta piccola in
 * mono sotto. Qui pero' la superficie e' chiara, quindi l'incisione
 * usa il bianco all'80% invece del 45% dell'ottone.
 */
.m-card__nota-avanzamento {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 3px;
	margin: 0;
}

/*
 * `order` e non due testi: nel markup l'etichetta viene prima, cosi'
 * letta ad alta voce fa «Progress 60%»; a vedersi sta sotto, perche'
 * il numero e' il dato e l'etichetta lo qualifica.
 */
.m-card__etichetta-avanzamento {
	order: 2;
	width: 100%;
	margin-top: 1px;
	font-family: var(--m-font-mono);
	font-size: 0.6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--m-ink-3);
}

.m-card__percento {
	order: 1;
	/*
	 * Cifre a larghezza fissa: il contatore conta da 0 al valore vero,
	 * e senza questo ogni cifra che cambia sposta quella accanto.
	 */
	font-variant-numeric: tabular-nums;
	font-family: var(--m-font-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--m-ink);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* Il segno piu' piccolo del numero: il dato e' la cifra. */
.m-card__segno {
	order: 1;
	font-family: var(--m-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	color: var(--m-ink-2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* Pozzetto dell'icona: incassato, perché contiene e non si clicca. */
/*
 * Marchio e nome sulla stessa riga.
 *
 * `flex-wrap` perche' la stessa card vive anche in home, dove e' larga
 * 250px: li' «M.ACCESSIBILITY» accanto a un pozzetto da 60 non ci
 * starebbe, e va a capo da sola invece di spingere fuori la scatola.
 */
.m-card__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.m-card__pozzetto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var(--m-r-md);
	background: linear-gradient(180deg, #ECEAE5, #FBF9F5);
	box-shadow: var(--m-well);
	color: var(--m-link);
}

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

.m-card__titolo {
	font-family: var(--m-font-display);
	font-size: 1.3125rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
}

/*
 * Dal Piano 2 il titolo è un link: per le card «in sviluppo» è l'unico
 * modo di arrivare alla pagina del prodotto, visto che il pulsante
 * porta alla lista d'attesa.
 *
 * Un link alto quanto il testo sarebbe un bersaglio da 26px.
 *
 * Il bersaglio è dichiarato con `min-height`, non ricavato sommando
 * imbottiture: con la sola imbottitura il risultato dipende
 * dall'altezza di riga del font e si ferma a 42px, che è sotto soglia
 * per due pixel. Così 44 sono 44 qualunque font arrivi.
 */
.m-card__titolo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.m-card__titolo a:hover {
	color: var(--m-link);
}

.m-card__testo {
	margin: 0;
	color: var(--m-ink-2);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Le due edizioni, dichiarate nella scheda
 *
 * Due righe, non una fila di iconcine: la seconda deve ospitare il
 * logo Freemius a 100px, che e' la loro misura minima dichiarata.
 * ------------------------------------------------------------------ */

.m-card__edizioni {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.m-card__edizioni li {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	font-size: 0.8125rem;
	color: var(--m-ink-2);
}

/* Il metallo dice quale edizione e': argento il gratuito, oro il Pro. */
.m-card__metallo {
	flex: none;
	width: 24px;
	height: 24px;
}

.m-card__dove {
	flex: none;
	width: 14px;
	height: 14px;
	margin-left: 4px;
}

.m-card__canale {
	font-family: var(--m-font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

/*
 * `margin-left` tiene l'area di rispetto che Freemius chiede: pari alla
 * larghezza della «F», che a questa misura sono circa 14px. `width` e
 * `height` stanno nel rapporto esatto del viewBox, 1000x219: niente
 * deformazioni, che e' l'altra loro regola.
 */
.m-card__freemius {
	flex: none;
	width: 100px;

	/*
	 * `auto` e non 22px: il rapporto esatto e' 1000/219 = 4,566, e
	 * 100x22 ne fa 4,545. Mezzo punto percentuale non si vede, ma
	 * «niente deformazioni» e' scritto nelle loro regole senza una
	 * soglia di tolleranza. Gli attributi `width` e `height` nel markup
	 * restano, perche' riservano lo spazio prima che l'immagine arrivi.
	 */
	height: auto;
	margin-left: 10px;
}

/*
 * Il prezzo e cosa compri con esso sono una cosa sola: il prezzo da
 * solo e' un numero, con sotto tre voci e' un'offerta.
 */
.m-card__listino {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.m-card__prezzo {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--m-ink);
}

.m-card__pro {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.8125rem;
	color: var(--m-ink-2);
}

/*
 * Il segno di spunta e' disegnato dal bordo, non e' un carattere: un
 * «+» o una «v» finirebbero letti ad alta voce voce per voce.
 */
.m-card__pro li {
	position: relative;
	padding-left: 18px;
	line-height: 1.4;
}

.m-card__pro li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 7px;
	height: 4px;
	border-left: 2px solid var(--m-accent);
	border-bottom: 2px solid var(--m-accent);
	transform: rotate(-45deg);
}

/* L'ultima riga non e' una funzione: non porta la spunta. */
.m-card__pro-altro {
	color: var(--m-ink-3);
	font-style: italic;
}

.m-card__pro-altro::before {
	content: none;
}

.m-card__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

/* --- Barra di avanzamento ---
   Il binario è incassato, il riempimento sporge: contenitore e contenuto. */
.m-barra {
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(180deg, #DCD8D0, #EFEDE8);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
	overflow: hidden;
}

/*
 * La tinta la decide la percentuale, e la calcola il PHP:
 * `mentora_tinta_avanzamento()` la scrive come variabile sul singolo
 * riempimento. Dal rame al verde passando per l'ambra, cosi' la barra
 * dice a che punto e' anche senza leggere il numero.
 *
 * Il ripiego e' l'ambra, cioe' il colore che la barra aveva prima:
 * senza la variabile, nulla peggiora.
 *
 * Il tubo resta un tubo: la riga chiara in alto e la tinta piena in
 * basso sono quello che gli da' volume. La prima si ricava dalla
 * seconda con `color-mix`, e dove `color-mix` non c'e' resta la tinta
 * piena — meno rilievo, stesso colore.
 */
.m-barra__riempimento {
	--m-barra-tinta: var(--m-led-wip);

	height: 100%;
	border-radius: 999px;
	background-image:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px),
		linear-gradient(180deg, var(--m-barra-tinta), var(--m-barra-tinta));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
	transition: width var(--m-dur-base) var(--m-ease-soft);
}

@supports (background: color-mix(in srgb, red 50%, white)) {
	.m-barra__riempimento {
		background-image:
			repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px),
			linear-gradient(180deg, color-mix(in srgb, var(--m-barra-tinta) 70%, #FFF), var(--m-barra-tinta));
	}
}

/*
 * A cento la tinta e' gia' il verde del LED acceso: questa classe non
 * cambia il colore, lo **blocca**. Serve il giorno che qualcuno
 * dimenticasse la variabile, e serve a dire nel markup che quella
 * barra e' finita.
 */
.m-barra__riempimento--completo {
	--m-barra-tinta: var(--m-led-on);
}

/* ================================================================== *
 * CAMPI
 *
 * Incassati: un campo è un contenitore, non un pulsante.
 * ================================================================== */

.m-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.m-campo label {
	font-family: var(--m-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--m-ink);
}

.m-campo input,
.m-campo textarea,
.m-campo select {
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--m-metal-edge);
	border-radius: var(--m-r-sm);
	background: linear-gradient(180deg, #ECEAE5, #fff);
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .14);
	font-family: var(--m-font-body);
	font-size: 1rem;
	color: var(--m-ink);
}

.m-campo textarea {
	padding: 12px 14px;
	min-height: 120px;
	line-height: 1.5;
}

.m-campo input::placeholder,
.m-campo textarea::placeholder {
	/* 4.6:1 sul fondo del campo: leggibile, non un suggerimento invisibile. */
	color: #6B655C;
}

/* ================================================================== *
 * DISPLAY LCD
 * ================================================================== */

.m-lcd {
	padding: 18px 20px;
	font-size: 0.8125rem;
	line-height: 1.75;
}

.m-lcd__riga {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.m-lcd__riga--avviso {
	color: var(--m-lcd-warn);
	text-shadow: 0 0 6px rgba(245, 196, 107, .4);
}

/* Cursore lampeggiante. Si ferma con prefers-reduced-motion. */
.m-lcd__cursore {
	display: inline-block;
	animation: m-lampeggio 1.1s steps(1, end) infinite;
}

@keyframes m-lampeggio {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* ================================================================== *
 * SCHERMO SPENTO
 *
 * La cornice in cui si mostrano i video delle webapp. Il contenuto
 * resta com'è: niente ridisegno nello stile del sito.
 * ================================================================== */

.m-schermo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 6px solid #1E1C1A;
	border-radius: var(--m-r-md);
	background-color: #0B0B0A;
	background-image: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 40%);
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, .8),
		0 10px 20px rgba(0, 0, 0, .35);
	overflow: hidden;
}

/*
 * La schermata riempie lo schermo spento, ritagliata invece che
 * deformata: una cattura a 16/10 e una a misura di telefono stanno
 * nella stessa cornice senza che nessuna delle due si allunghi.
 */
.m-schermo__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.m-schermo__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
	color: #fff;
	font-family: var(--m-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	/* Su una riga sola: a capo diventerebbe un rettangolo, non un pulsante. */
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--m-dur-fast) var(--m-ease-spring);
}

.m-schermo__play:hover {
	transform: translate(-50%, -50%) scale(1.04);
}

/* ================================================================== *
 * CONTATORI INCISI — sulle targhe in ottone
 * ================================================================== */

.m-contatori {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
	gap: 12px;
}

.m-contatore {
	padding: 14px 10px;
	border-radius: var(--m-r-md);
	text-align: center;
	/*
	 * .10 e non .18: il velo bruno scurisce l'ottone sotto, e l'ottone
	 * si scurisce gia' da solo verso destra. Sommati, portavano
	 * l'etichetta a 3.98:1. La profondita' del pozzetto la fa l'ombra
	 * interna, non il velo.
	 */
	background: rgba(120, 92, 40, .10);
	box-shadow:
		inset 0 3px 6px rgba(60, 42, 10, .35),
		0 1px 0 rgba(255, 255, 255, .45);
}

.m-contatore__numero {
	display: block;
	/*
	 * Cifre a larghezza fissa: il contatore conta da 0 al numero vero,
	 * e senza questo ogni cifra che cambia sposta di un pelo quella
	 * accanto — un tremolio che si vede solo mentre scorre.
	 */
	font-variant-numeric: tabular-nums;
	font-family: var(--m-font-display);
	font-size: 2.125rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--m-brass-ink);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.m-contatore__etichetta {
	display: block;
	margin-top: 2px;
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	letter-spacing: .08em;
	/*
	 * Il 4.87:1 dichiarato qui prima era sbagliato: supponeva un
	 * pozzetto a tinta piena (#BA9C60) che non esiste. Il pozzetto è un
	 * velo semitrasparente sopra un gradiente che si scurisce verso
	 * destra, e componendo gli strati l'etichetta stava fra 3.98 e
	 * 4.42:1 — sotto soglia per un testo da 12px.
	 *
	 * Misurato componendo velo, trama e gradiente nel punto peggiore
	 * del testo, non agli angoli della scatola: con #372A0A dava 4.64.
	 *
	 * Sceso ancora a #2E2207 nello Step 8, dove la verifica misura la
	 * fermata **piu' scura del gradiente ovunque** invece che quella
	 * sotto al testo. E' un limite piu' severo del vero — il testo in
	 * quell'angolo non ci va — ma con 0.14 di margine non vale la pena
	 * difendere la differenza: cosi' passa anche il conto pessimista,
	 * a 4.79.
	 */
	color: #2E2207;
}

/* ================================================================== *
 * INTESTAZIONE DI SEZIONE
 *
 * Etichetta mono numerata a sinistra, titolo sotto, paragrafo a destra.
 * ================================================================== */

.m-intestazione {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--60);
}

.m-intestazione__titolo {
	margin: 6px 0 0;
}

.m-intestazione__nota {
	flex: 1 1 320px;
	max-width: 440px;
	margin: 0;
	color: var(--m-ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/*
 * La variante in colonna: la nota sotto il titolo invece che accanto.
 * Chiesta per «Two areas, chosen on purpose», dove la nota finisce la
 * frase del titolo invece di commentarla da lontano.
 *
 * `align-items` torna a sinistra perche' la regola base allinea in
 * basso, che in colonna non vuol dire niente, e lo stacco scende da 24
 * a 10: fra due righe dello stesso discorso e' gia' abbastanza.
 *
 * E `flex` va riscritto. In riga `1 1 320px` e' una larghezza; girata
 * la direzione diventa un'**altezza** di partenza da 320px, con il
 * permesso di crescere — una nota di due righe alta un terzo di
 * schermo, e in pagina non si capirebbe da dove viene.
 */
.m-intestazione--colonna {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/*
 * 860 e non la misura da lettura: queste tre note devono stare su una
 * riga sola. Misurate clonandole senza a capo: 786, 804 e 761px. Con
 * 640 andavano tutte a capo, e l'ultima lasciava «almost online» da
 * solo in fondo.
 *
 * E' un tetto, non una larghezza: una nota piu' corta resta corta, e
 * su uno schermo stretto va a capo come deve.
 */
.m-intestazione--colonna .m-intestazione__nota {
	flex: 0 1 auto;
	max-width: 860px;
}
/* ================================================================== *
 * QUADERNO — la documentazione
 *
 * textures.css disegna le righe. Qui arrivano la colonna di sinistra
 * col margine rosso, i fori e i fogli sotto.
 * ================================================================== */

.m-quaderno {
	position: relative;
	/* La rigatura legge questa misura per sapere dove stampare i righi. */
	--m-quaderno-pad: 24px;
	padding: var(--m-quaderno-pad) 24px var(--m-quaderno-pad) 70px;
	border-radius: var(--m-r-md);
	/* I fogli sotto: due coppie di ombre piatte, nessuna sfocatura. */
	box-shadow:
		4px 4px 0 #EFEADF,
		5px 5px 0 #CFC7B6,
		8px 8px 0 #E9E3D6,
		9px 9px 0 #CFC7B6;
}

/* La colonna del margine. */
.m-quaderno::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 46px;
	border-left: 2px solid var(--m-paper-margin);
	pointer-events: none;
}

.m-quaderno__fori {
	position: absolute;
	top: 28px;
	bottom: 28px;
	left: 14px;
	width: 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	pointer-events: none;
}

.m-quaderno__foro {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--m-ground);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3);
}

/* Il testo sta sulle righe solo con questo passo. */
.m-quaderno__testo {
	line-height: 32px;
}

.m-quaderno__testo a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ================================================================== *
 * BIGLIETTO — la linea di strappo
 * ================================================================== */

.m-biglietto {
	padding: 22px 26px;
	border-radius: var(--m-r-md);
}

.m-biglietto__strappo {
	margin: 16px 0;
	border: 0;
	border-top: 2px dashed rgba(90, 74, 44, .45);
}

/* ================================================================== *
 * MEDAGLIONE — il marchio nella barra in alluminio
 * ================================================================== */

.m-medaglione {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* Sopra le viti e lo sfondo della barra. */
	position: relative;
	z-index: 1;
}

.m-medaglione img,
.m-medaglione svg {
	width: 46px;
	height: 46px;
}

/* Sotto i 32px va la versione micro: la ricca perde i dettagli. */
.m-medaglione--micro {
	width: 28px;
	height: 28px;
}

.m-medaglione--micro img,
.m-medaglione--micro svg {
	width: 28px;
	height: 28px;
}

/*
 * Nel drawer il marchio e' bianco e grande come il cerchio della X che
 * gli sta di fronte: 44px. Qui non c'e' smalto sotto — il pannello e'
 * in pelle scura — quindi il segno riempie tutto il cerchio.
 */
.m-medaglione--drawer {
	width: 44px;
	height: 44px;
}

.m-medaglione--drawer img,
.m-medaglione--drawer svg {
	width: 44px;
	height: 44px;
}

/* ================================================================== *
 * TESTO INCISO
 * ================================================================== */

.m-inciso {
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.m-inciso--scuro {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}

/* ================================================================== *
 * PANNELLI
 *
 * L'imbottitura dei blocchi materiali passa da qui, non da stili
 * inline nel markup del blocco.
 *
 * Il motivo è pratico: se scrivi a mano `style="padding:24px"` dentro
 * un wp:group che dichiara la spaziatura negli attributi, WordPress
 * serializza la forma estesa (padding-top, padding-right…) e la
 * validazione del blocco fallisce — «contenuto non valido» nell'editor.
 * Una classe non ha questo problema e il markup resta leggibile.
 * ================================================================== */

.m-pannello {
	padding: 24px;
	border-radius: var(--m-r-lg);
}

.m-pannello--grande {
	padding: 32px;
	border-radius: var(--m-r-xl);
}

.m-pannello--stretto {
	padding: 18px;
	border-radius: var(--m-r-md);
}

.m-pannello__titolo {
	margin: 0 0 12px;
	font-family: var(--m-font-display);
	font-size: 1.25rem;
	letter-spacing: -.01em;
}

/*
 * Il margine superiore azzerato vale solo per il primo: un titolo che
 * apre un argomento nuovo in mezzo al pannello restava incollato al
 * paragrafo sopra.
 */
.m-pannello__titolo:not(:first-child) {
	margin-top: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------------ *
 * TITOLO DI PAGINA
 *
 * Una regola sola per il titolo di una pagina scritta e per quello di
 * una guida: erano identiche in due posti, e due copie della stessa
 * misura prima o poi diventano due misure diverse.
 * ------------------------------------------------------------------ */
.m-pagina__titolo,
.m-doc-testa__titolo {
	margin: 6px 0 0;
	font-family: var(--m-font-display);
	font-size: clamp(1.875rem, 4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* ------------------------------------------------------------------ *
 * PAGINE LEGALI
 *
 * Testo lungo da leggere, non da scorrere: la larghezza la da' gia'
 * `page.html` col layout vincolato a 720px. Qui servono solo le due
 * righe in cima — quando e' stato aggiornato, e di cosa parla — e un
 * po' d'aria fra una sezione e l'altra.
 * ------------------------------------------------------------------ */
.m-legale__aggiornato {
	margin: 10px 0 0;
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	letter-spacing: .06em;
	color: var(--m-ink-3);
}

.m-legale__sommario {
	margin: 18px 0 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--m-ink-2);
}

/*
 * I titoli di sezione staccano dal paragrafo che li precede piu' di
 * quanto stacchino dal proprio: cosi' si vede a colpo d'occhio dove
 * comincia un argomento nuovo.
 */
.m-legale__sommario ~ h2,
.m-legale__aggiornato ~ h2 {
	margin-top: var(--wp--preset--spacing--60);
}

/* ------------------------------------------------------------------ *
 * ELENCO A SEGNI
 *
 * Al posto del pallino, un trattino inciso: lo stesso segno che si fa
 * a penna su un elenco scritto a mano. Il pallino nativo non si puo'
 * incidere, il `::before` si'.
 * ------------------------------------------------------------------ */
.m-elenco-segni {
	margin: 0;
	padding: 0;
	list-style: none;
}

.m-elenco-segni li {
	position: relative;
	margin-block: 10px;
	padding-left: 22px;
	line-height: 1.55;
}

.m-elenco-segni li::before {
	content: "";
	position: absolute;
	top: .66em;
	left: 0;
	width: 11px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--m-accent);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* ================================================================== *
 * GRIGLIE
 *
 * Fluide, senza breakpoint: la colonna decide quando andare a capo.
 * ================================================================== */

.m-griglia-plugin {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 20px;
}

/* ------------------------------------------------------------------ *
 * DUE PER RIGA — l'archivio dei plugin
 *
 * `auto-fit` va bene dove i plugin sono un pezzo di un'altra pagina:
 * ne mette quanti ce ne stanno. Nell'archivio sono la pagina, e due
 * per riga danno alla card lo spazio per una copertina e per i
 * pulsanti su una riga sola.
 *
 * Due esatte, non «quante ce ne stanno»: con `auto-fit` l'ultima riga
 * di un numero dispari si allargherebbe a tutta la pagina, e i plugin
 * aumenteranno.
 * ------------------------------------------------------------------ */
.m-griglia-plugin--due {
	grid-template-columns: 1fr;
}

@media (min-width: 912px) {
	.m-griglia-plugin--due {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Tutte le righe alte uguali, non solo le schede dentro una riga.
 *
 * In griglia le schede di una riga si distendono gia' sulla piu' alta,
 * e i pulsanti di quella riga sono allineati. Fra una riga e l'altra
 * no: misurate 427 la prima e 449 la seconda, quindi i pulsanti in
 * basso stavano 22px piu' giu'. `1fr` sulle righe automatiche le
 * pareggia tutte.
 */
.m-griglia-plugin--due {
	grid-auto-rows: 1fr;
}

/*
 * Il sommario si prende lo spazio che avanza, cosi' i pulsanti cadono
 * alla stessa quota in tutte le schede della riga.
 *
 * **Prima questo commento prometteva anche le barre alla stessa quota,
 * e non e' piu' vero.** Reggeva quando sotto la barra c'erano solo
 * prezzo e pulsanti, uguali per tutti. Dal 29 ottobre sotto c'e' anche
 * l'elenco di cosa aggiunge il Pro, che e' alto diverso da scheda a
 * scheda — tre voci o quattro, e righe che vanno a capo in modo
 * diverso. Misurato: 916 contro 894 nella prima riga, 1782 contro 1874
 * nella seconda.
 *
 * Allinearle di nuovo vorrebbe dire una griglia a righe nominate per
 * tutta la scheda, non un `flex` su un pezzo: e' una scelta, non una
 * correzione, ed e' segnata nel TODO.
 */
/*
 * **Solo da 912px in su**, cioe' solo dove la griglia ha davvero due
 * colonne. In colonna singola non c'e' nessuna scheda accanto con cui
 * allinearsi, e il sommario si allargava lo stesso: un vuoto di ~70px
 * fra il testo e le edizioni, misurato a 375px. Una regola giusta nel
 * posto sbagliato.
 */
@media (min-width: 912px) {
	.m-griglia-plugin--due .m-card__testo {
		flex: 1 1 auto;
	}
}

/*
 * Il nome piu' grande, da 21 a 28px, e solo qui: la stessa card in
 * home e' larga meno della meta', e a 28 il nome andrebbe a capo
 * accanto al marchio invece di stargli di fianco.
 */
.m-griglia-plugin--due .m-card__titolo {
	font-size: 1.75rem;
}

/*
 * I pulsanti alla stessa quota in tutte le schede.
 *
 * `margin-top: auto` li teneva gia' in fondo, ma non bastava: le
 * schede hanno un numero diverso di pulsanti, quelli di «Mentora
 * Book» andavano a capo e il blocco diventava alto il doppio. Il
 * primo pulsante partiva da 307px in una scheda e da 353 in quella
 * accanto — misurati.
 *
 * Il fondo e' due righe di pulsanti: 44px di bersaglio, 10 di stacco.
 * Chi ne ha una sola lascia lo spazio vuoto e parte dove partono gli
 * altri.
 */
.m-griglia-plugin--due .m-card__azioni {
	min-height: 98px;
	align-content: flex-end;
}

/* ------------------------------------------------------------------ *
 * LA FILA DELLE WEB APP — si scorre di lato
 *
 * Erano tre e stavano in griglia. Ne arriveranno altre, e una griglia
 * che cresce allunga la pagina invece di far capire che c'e' altro.
 * Qui la fila scorre e la card dopo si vede gia' spuntare: e' quello
 * che dice «ce n'e' ancora», senza scriverlo da nessuna parte.
 *
 * Nessuna freccia e nessuno script. Si scorre col dito, con la
 * rotella, con la barra e **con il tasto TAB**: dentro ogni card ci
 * sono dei link, e il browser porta in vista quello che prende il
 * fuoco. Per questo il contenitore non ha `tabindex`: aggiungerebbe
 * una fermata in piu' senza dare niente in cambio.
 *
 * `overflow: auto hidden` e non `auto`: con l'asse verticale su
 * `auto` l'animazione d'ingresso, che alza le card di qualche pixel,
 * faceva comparire una barra verticale per mezzo secondo. Il
 * `padding` qui sotto e' lo spazio che serve alle ombre per non
 * essere tagliate.
 * ------------------------------------------------------------------ */
.m-griglia-labs {
	display: flex;
	gap: 20px;
	overflow: auto hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 6px;
	/* 10px sopra: e' lo spazio in cui la teca si alza al rollover senza essere tagliata. */
	padding: 10px 6px 14px;
}

/*
 * Le due proprieta' standard SOLO dove le pseudo-classi non ci sono.
 *
 * Misurato: con `scrollbar-width` dichiarata, Chromium ignora tutto
 * `::-webkit-scrollbar` e tiene la sua barra a scomparsa — la fila
 * restava senza barra, che era esattamente il difetto da togliere.
 * `@supports not selector(::-webkit-scrollbar)` e' vero su Firefox e
 * falso su Chromium e Safari, quindi ognuno prende la sua strada.
 */
@supports not selector(::-webkit-scrollbar) {
	.m-griglia-labs {
		scrollbar-width: thin;
		scrollbar-color: var(--m-brass-2) rgba(0, 0, 0, .34);
	}
}

/* ------------------------------------------------------------------ *
 * LA BARRA DELLA FILA — si deve vedere da ferma
 *
 * Su macOS le barre sono a scomparsa: compaiono mentre si scorre e poi
 * spariscono, e una fila ferma sembra una fila finita. Dichiarando
 * `::-webkit-scrollbar` il browser torna alla barra classica, sempre
 * in vista. E' il motivo per cui questa regola esiste.
 *
 * Materiali, non decorazione: binario incassato nella pelle e cursore
 * d'ottone col suo colmo di luce, gli stessi due della targa qui
 * sopra. Firefox non da' le pseudo-classi e si accontenta di
 * `scrollbar-color`, che e' gia' l'ottone.
 * ------------------------------------------------------------------ */
.m-griglia-labs::-webkit-scrollbar {
	height: 12px;
}

.m-griglia-labs::-webkit-scrollbar-track {
	border-radius: 999px;
	background: rgba(0, 0, 0, .34);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .50);
}

.m-griglia-labs::-webkit-scrollbar-thumb {
	border: 1px solid var(--m-brass-edge);
	border-radius: 999px;
	background: linear-gradient(180deg, var(--m-brass-1), var(--m-brass-3));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -1px 0 rgba(0, 0, 0, .28),
		0 1px 2px rgba(0, 0, 0, .40);
}

.m-griglia-labs::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #F2E2BC, var(--m-brass-2));
}

.m-griglia-labs > * {
	flex: 0 0 clamp(260px, 80vw, 330px);
	scroll-snap-align: start;
	margin-block: 0;
}

/* ------------------------------------------------------------------ *
 * LA PILA DELLE WEB APP — l'archivio Labs
 *
 * Nella fila i progetti sono un pezzo di una pagina che parla d'altro,
 * e stanno stretti. Qui i progetti SONO la pagina: una teca sotto
 * l'altra, larga quanto il contenitore, e c'e' spazio per guardarne
 * una per volta.
 *
 * La cover diventa una fascia 21/9 e non il 16/10 della fila: a tutta
 * larghezza il 16/10 sarebbe alto quanto mezzo schermo, e la fascetta
 * di stato finirebbe sempre sotto la piega.
 *
 * Il testo si ferma a 68ch. Una riga lunga quanto il contenitore si
 * legge male, e il contenitore qui e' largo il doppio.
 * ------------------------------------------------------------------ */
.m-pila-labs {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.m-pila-labs > * {
	margin-block: 0;
}

.m-pila-labs .m-teca {
	gap: 18px;
	padding: 24px;
}

.m-pila-labs .m-schermo {
	aspect-ratio: 21 / 9;
	max-height: 420px;
}

/*
 * In pila la fascetta e' figlia diretta della teca, che e' una colonna
 * flex: senza questo si distenderebbe per tutta la larghezza e la
 * pastiglia diventerebbe una fascia da un bordo all'altro.
 */
.m-pila-labs .m-fascetta-stato {
	align-self: flex-start;
}

.m-pila-labs .m-teca__testo {
	max-width: 68ch;
}

/*
 * Il nome piu' grande: a tutta larghezza il corpo della fila, 19px,
 * si perdeva accanto a una cover alta 420. Qui vale 28, che e' il
 * passo degli H2 del tema meno un gradino — questa resta una scheda,
 * non un titolo di sezione.
 */
.m-pila-labs .m-teca__titolo {
	font-size: 1.75rem;
}

/* Lo scorrimento morbido solo per chi non ha chiesto di ridurre il movimento. */
@media (prefers-reduced-motion: no-preference) {
	.m-griglia-labs {
		scroll-behavior: smooth;
	}
}

.m-griglia-due {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 24px;
}

/*
 * Il gruppo resta `is-layout-flow` anche quando lo facciamo diventare
 * una griglia, e WordPress mette `margin-block-start` a ogni figlio
 * dopo il primo. In colonna non si vede; in griglia la seconda colonna
 * scende di 24px — il gap, contato due volte. La distanza la da' gia'
 * `gap`, quindi i margini qui dentro vanno azzerati.
 */
.m-griglia-due > * {
	margin-block: 0;
}

/* ------------------------------------------------------------------ *
 * IL RIQUADRO IN ATTESA DI UNA FOTO O DI UN VIDEO
 *
 * Dichiarato, non finto: dice cosa ci andra' invece di far finta che
 * ci sia gia' qualcosa. Quando arriva l'immagine questo riquadro
 * sparisce e al suo posto va il blocco immagine o video.
 *
 * `aspect-ratio` serve solo in colonna singola, dove l'altezza se la
 * decide lui. Affiancato a un pannello di testo la riga della griglia
 * e' piu' alta e il riquadro si distende: e' voluto, i due pezzi della
 * riga devono finire alla stessa quota.
 * ------------------------------------------------------------------ */
.m-media-attesa {
	display: grid;
	place-items: center;
	min-height: 220px;
	aspect-ratio: 16 / 10;
	padding: 24px;
	border: 2px dashed var(--m-brass-dark);
	border-radius: var(--m-r-lg);
	background-color: rgba(156, 122, 60, .12);
}

.m-media-attesa__nota {
	margin: 0;
	font-family: var(--m-font-mono);
	font-size: 0.8125rem;
	letter-spacing: .04em;
	line-height: 1.6;
	text-align: center;
	color: var(--m-ink-2);
}

/*
 * Lo scambio e le altezze stanno QUI SOTTO e non piu' sopra, dove li
 * avevo scritti la prima volta: una media query non aggiunge
 * specificita', e `.m-media-attesa { aspect-ratio: 16/10 }` qui sopra
 * vinceva sull'`aspect-ratio: auto` dentro la query. I riquadri
 * restavano a 328 mentre le righe erano gia' a 400.
 */
/* ------------------------------------------------------------------ *
 * GRIGLIA ALTERNATA — testo, suo riquadro, testo, suo riquadro
 *
 * Nel DOM i quattro pezzi stanno in ordine di lettura, e in una
 * colonna sola e' gia' giusto cosi': ogni riquadro segue il testo che
 * illustra.
 *
 * A due colonne la seconda riga si scambia, e viene fuori lo zigzag.
 * Lo scambio vive dentro la media query perche' fuori non ci sono due
 * colonne da scambiare: `grid-column: 2` su una griglia a una colonna
 * se ne inventerebbe una seconda, e il telefono prenderebbe metà
 * larghezza.
 *
 * I 912px sono il punto dove `auto-fit` qui sopra passa a due colonne:
 * due da 420 piu' 24 di `gap` fanno 864, e la sezione toglie 24 per
 * parte. Misurato, non scelto a occhio.
 * ------------------------------------------------------------------ */
@media (min-width: 912px) {
	/*
	 * Tutti i riquadri alla stessa altezza, che e' la richiesta.
	 *
	 * `minmax(400, auto)` da' a ogni riga un fondo di 400px: i quattro
	 * pannelli di testo stanno fra 330 e 399 — misurati — quindi le
	 * quattro righe vengono tutte 400 e i quattro riquadri pure, nelle
	 * due sezioni. Se un giorno un testo passa i 400, la sua riga
	 * cresce invece di tagliarlo.
	 */
	.m-griglia-due--alternata {
		grid-auto-rows: minmax(400px, auto);
	}

	/*
	 * E qui il riquadro deve lasciar perdere la sua proporzione.
	 * `aspect-ratio` gli da' un'altezza definita, e un elemento con
	 * l'altezza gia' decisa **non si distende** sulla riga: restava a
	 * 328 mentre il testo accanto arrivava a 399. La proporzione serve
	 * solo in colonna singola, dove l'altezza se la decide lui.
	 */
	.m-media-attesa {
		aspect-ratio: auto;
		min-height: 0;
	}

	.m-griglia-due--alternata > :nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}

	.m-griglia-due--alternata > :nth-child(4) {
		grid-column: 1;
		grid-row: 2;
	}
}

/* ================================================================== *
 * CONTATTI — il modulo
 *
 * Funziona senza JavaScript: invio normale, esito letto dall'indirizzo
 * al ritorno. Non c'è nessuno script da nessuna parte, quindi non c'è
 * niente che possa non arrivare.
 * ================================================================== */

.m-contatto__modulo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
}

.m-contatto__modulo .m-btn {
	align-self: flex-start;
}

.m-campo__nota,
.m-contatto__nota {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--m-ink-2);
}

.m-contatto__nota {
	max-width: 52ch;
}

.m-campo__facoltativo {
	font-weight: 400;
	color: var(--m-ink-3);
}

/*
 * L'esito dell'invio. Il colore non è l'unico segno — chi non
 * distingue il verde dal rosso legge comunque una frase che dice cosa
 * è successo — ma aiuta chi lo distingue.
 */
.m-contatto__esito {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: var(--m-r-md);
	border-left: 4px solid;
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 560px;
}

.m-contatto__esito--bene {
	border-color: #2F6B3A;
	background-color: #E4EFE3;
	color: #1E4426;
}

.m-contatto__esito--male {
	border-color: var(--m-copper);
	background-color: #F6E7E0;
	color: #6B2A12;
}

/* ------------------------------------------------------------------ *
 * L'ESCA
 *
 * Fuori dallo schermo, ma tecnicamente visibile: i bot un po' svegli
 * saltano i campi con `display: none`, perché è il modo ovvio di
 * nascondere un'esca. Qui esce dalla finestra e basta.
 *
 * `aria-hidden` e `tabindex="-1"` stanno nel markup: chi usa un
 * lettore di schermo o la tastiera non lo incontra mai.
 * ------------------------------------------------------------------ */
.m-esca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * CONTATTI — l'aria dentro il pannello dei recapiti
 *
 * Trenta fra un dato e l'altro invece dei 24 di WordPress: sono sei
 * informazioni diverse — chi, dove, mail, telefono, orari, supporto —
 * e con poco stacco si leggevano come un elenco solo.
 *
 * I due canali di messaggistica fanno eccezione e restano vicini al
 * numero: appartengono a quello, non sono un blocco a sé.
 * ------------------------------------------------------------------ */
.m-contatto__recapiti > * + * {
	margin-top: 30px;
}

.m-contatto__recapiti .m-canali {
	margin-top: 14px;
}

.m-contatto__recapiti .m-marchi-coppia {
	margin-top: 22px;
}

/*
 * «Support goes elsewhere» apre un secondo argomento dentro lo stesso
 * pannello, e con la regola generale dei titoli ereditava 24px: meno
 * dei 30 che ora separano due righe di dati. Un titolo di sezione con
 * meno aria di un paragrafo e' il verso sbagliato, quindi 36.
 *
 * Serve la doppia classe: `.m-pannello__titolo:not(:first-child)`
 * pesa piu' del `> * + *` qui sopra e vincerebbe comunque.
 */
.m-contatto__recapiti .m-pannello__titolo:not(:first-child) {
	margin-top: 36px;
}

/* ------------------------------------------------------------------ *
 * CONTATTI — il riquadro della newsletter, sotto il modulo
 *
 * Un pannello più basso di quello dei recapiti: è un'offerta in
 * secondo piano rispetto al modulo sopra, non un suo pari.
 * ------------------------------------------------------------------ */
.m-contatto__newsletter {
	margin-top: var(--wp--preset--spacing--60);
}

.m-contatto__newsletter > * + * {
	margin-top: 14px;
}

/* ------------------------------------------------------------------ *
 * CONTATTI — «dove siamo» prima del modulo, quando sono in colonna
 *
 * A due colonne il modulo sta a sinistra, dove va l'azione principale.
 * In colonna singola viene prima l'indirizzo: chi arriva da un
 * telefono il piu' delle volte cerca quello, non il modulo.
 *
 * La soglia non e' a occhio. `.m-griglia-due` tiene due colonne finche'
 * la griglia e' larga almeno 864px (420 + 420 + 24 di gap), e la
 * griglia e' la finestra meno 48 di imbottitura della sezione: quindi
 * due colonne da **912px** di finestra in su. Misurato — a 920 sono
 * due, a 900 una.
 *
 * Il pannello non contiene niente che prenda il fuoco, quindi
 * invertirlo con `order` non scolla l'ordine di tabulazione da quello
 * che si vede.
 * ------------------------------------------------------------------ */
@media (max-width: 911px) {
	.m-contatto__due > :last-child {
		order: -1;
	}
}

/* ------------------------------------------------------------------ *
 * I CANALI DI MESSAGGISTICA
 *
 * WhatsApp e Telegram come pulsanti e non come segni muti: qui lo
 * spazio c'è, e un'icona da sola non dice a cosa porta.
 *
 * Sono link in uscita, non risorse caricate: nessuno script di terzi
 * entra nella pagina.
 * ------------------------------------------------------------------ */
.m-canali {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

.m-canali__voce {
	gap: 8px;
}

.m-canali__voce svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: 0 0 auto;
}

/* Il numero resta leggibile come numero, non diventa un link colorato. */
.m-recapito__tel {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * LA COPPIA DI MARCHI
 *
 * Mentora e Cult ID sotto al titolo del pannello, prima dei nomi
 * scritti. Lo stacco sopra è più largo di quello sotto: separano il
 * titolo, non il testo a cui appartengono.
 *
 * Al passaggio si sollevano — niente rotazione: il quarto di giro è il
 * gesto del marchio Mentora nella barra, e girare il segno di un'altra
 * impresa non è una libertà che ci prendiamo.
 * ------------------------------------------------------------------ */
.m-marchi-coppia {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: var(--wp--preset--spacing--40) 0 16px;
}

.m-marchi-coppia__segno {
	width: 40px;
	height: 40px;
	filter: drop-shadow(0 2px 3px rgba(70, 55, 35, .22));
	transition:
		translate var(--m-dur-base) var(--m-ease-spring),
		filter var(--m-dur-base) var(--m-ease-soft);
}

.m-marchi-coppia:hover .m-marchi-coppia__segno,
.m-marchi-coppia:focus-within .m-marchi-coppia__segno {
	translate: 0 -3px;
	filter: drop-shadow(0 7px 9px rgba(70, 55, 35, .30));
}

/* L'indirizzo scritto: un <address>, che di suo sarebbe in corsivo. */
.m-recapito {
	margin: 0 0 18px;
	font-style: normal;
	line-height: 1.7;
}

/* ================================================================== *
 * LA MAPPA
 *
 * Incassata nella pagina come una finestra: cornice, ombra interna, e
 * nessun bordo che galleggi. Le tessere sono nostre e sono finite,
 * quindi la mappa ha dei limiti veri — oltre il riquadro scaricato non
 * c'è niente da mostrare.
 * ================================================================== */

.m-mappa {
	margin-block: var(--wp--preset--spacing--50);
}

.m-mappa__tela {
	height: 380px;
	border: 1px solid var(--m-metal-edge);
	border-radius: var(--m-r-lg);
	background-color: #E8E4DA;
	box-shadow:
		inset 0 3px 8px rgba(60, 48, 30, .28),
		0 1px 0 rgba(255, 255, 255, .6);
	overflow: hidden;
}

@media (max-width: 600px) {
	.m-mappa__tela {
		height: 300px;
	}
}

/* Il ripiego quando JavaScript non c'è: centrato nel riquadro vuoto. */
.m-mappa__ripiego {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 24px;
	text-align: center;
	color: var(--m-ink-2);
}

/* Il segno sull'indirizzo: un punto in rame con un alone chiaro. */
.m-mappa__punto {
	display: block;
	width: 22px;
	height: 22px;
	margin: 2px;
	border-radius: 50%;
	background-image: radial-gradient(circle at 35% 32%, var(--m-copper-light), var(--m-copper));
	box-shadow:
		0 0 0 4px rgba(255, 255, 255, .85),
		0 2px 6px rgba(0, 0, 0, .45);
}

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

/*
 * I controlli di Leaflet sono bersagli: quelli predefiniti sono 30px.
 * Qui valgono le stesse regole del resto del sito.
 */
.m-mappa .leaflet-bar a {
	width: 44px;
	height: 44px;
	line-height: 44px;
	font-size: 1.25rem;
	color: var(--m-ink);
}

/*
 * L'attribuzione e' obbligatoria, quindi dev'essere leggibile: il
 * fondo del controllo e' bianco al 70% sopra le tessere, e il grigio
 * predefinito di Leaflet non basta.
 */
.m-mappa .leaflet-control-attribution {
	background: rgba(255, 255, 255, .92);
	padding: 2px 8px;
	font-size: 11px;
	color: var(--m-ink);
}

.m-mappa .leaflet-control-attribution a {
	color: var(--m-link);
}

/* ------------------------------------------------------------------ *
 * AREA CLIENTI
 * ------------------------------------------------------------------ */
.m-account__azione {
	margin: 18px 0 0;
}

/*
 * Il segnaposto quando il portale non e' configurato: dichiarato, non
 * mascherato da pulsante.
 */
.m-account__mancante {
	margin: 18px 0 0;
	padding: 14px 18px;
	max-width: min(56ch, 100%);
	border-left: 4px solid var(--m-brass-dark);
	border-radius: var(--m-r-sm);
	background-color: rgba(156, 122, 60, .12);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--m-ink-2);
}

/* ------------------------------------------------------------------ *
 * IL MODULO D'ISCRIZIONE
 *
 * Modulo e nota viaggiano insieme in un contenitore solo. Erano due
 * elementi separati, e nella griglia a due colonne del pannello
 * newsletter la nota finiva in seconda riga, sotto il TESTO invece che
 * sotto il campo a cui si riferisce.
 * ------------------------------------------------------------------ */
.m-iscrizione {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ================================================================== *
 * IL MARCHIO IN GRANDE
 *
 * Il medaglione ricco, che i gradienti e il rilievo ce li ha già suoi.
 * Qui attorno si aggiunge solo l'ambiente: l'ombra portata, un velo di
 * luce come sotto una teca, e l'ombra a terra.
 *
 * Il marchio non si tocca — né colore, né rotazione, né ricostruzione.
 * Sopra i 40px la versione ricca è quella giusta, e qui siamo a 280.
 * ================================================================== */

.m-marchio-grande {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	/*
	 * Imbottitura solo sopra e sotto.
	 *
	 * Con 24px anche ai lati, l'immagine calcolava il suo `74%` sulla
	 * scatola del **contenuto** e i due pseudo-elementi — luce e ombra,
	 * che sono posizionati — sulla scatola con l'**imbottitura**. A
	 * 375px il velo veniva 253,8px contro i 218,3 del medaglione:
	 * sbordava a sinistra e il pezzo si leggeva spostato a destra.
	 *
	 * Senza imbottitura laterale le due scatole coincidono e le tre
	 * percentuali parlano della stessa larghezza. Lo spazio ai lati lo
	 * da' gia' il medaglione, che occupa il 74%.
	 */
	padding: 24px 0;
	/*
	 * La prospettiva sta QUI e non sull'immagine: `rotateX` e
	 * `rotateY` senza un punto di fuga sul genitore danno
	 * un'inclinazione piatta, che non e' parallasse — e' uno schiacciamento.
	 */
	perspective: 900px;
}

.m-marchio-grande img {
	position: relative;
	z-index: 1;
	width: min(280px, 74%);
	height: auto;
	filter:
		drop-shadow(0 20px 28px rgba(70, 55, 35, .30))
		drop-shadow(0 4px 6px rgba(70, 55, 35, .22));
	/*
	 * Il ritorno a riposo: la molla del tema, lenta. Mentre il
	 * puntatore e' sopra, `.is-viva` toglie la transizione e il pezzo
	 * lo seguire da vicino — con la transizione accesa arriverebbe
	 * sempre in ritardo di mezzo secondo.
	 */
	transition: transform var(--m-dur-slow) var(--m-ease-spring);
	transform-origin: 50% 55%;
	will-change: transform;
}

.m-marchio-grande.is-viva img {
	transition: none;
}

/*
 * L'ombra a terra. Si sposta nel verso OPPOSTO all'inclinazione: un
 * oggetto che pende a sinistra butta l'ombra a destra. E si allunga un
 * po' quando il pezzo si alza.
 */
.m-marchio-grande::before {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 14%;
	left: 50%;
	width: min(230px, 62%);
	height: 26px;
	translate: calc(-50% - var(--mx, 0) * 18px) calc(var(--my, 0) * -4px);
	border-radius: 50%;
	background-image: radial-gradient(ellipse, rgba(70, 55, 35, .28), transparent 70%);
	transition: translate var(--m-dur-slow) var(--m-ease-spring);
}

/*
 * Il riflesso, che SCORRE con l'inclinazione.
 *
 * È la parte che fa la differenza fra un oggetto e un disegno: su una
 * superficie curva la luce non sta ferma mentre il pezzo gira. Il
 * centro del lampo si muove in senso opposto al puntatore, come il
 * riflesso di una finestra su una medaglia che si inclina.
 *
 * `pointer-events: none` perché è decorazione pura, e la maschera lo
 * tiene dentro al cerchio del medaglione.
 */
.m-marchio-grande::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: min(280px, 74%);
	aspect-ratio: 240 / 248;
	border-radius: 50%;
	pointer-events: none;
	/*
	 * Il lampo sta fermo DENTRO lo pseudo-elemento, in alto a sinistra;
	 * a muoversi è lo pseudo-elemento. Si fa così e non spostando il
	 * centro del gradiente perché `background-image` non si anima: al
	 * ritorno il riflesso sarebbe saltato a posto invece di scivolare.
	 */
	background-image: radial-gradient(
		circle at 34% 28%,
		rgba(255, 255, 255, .52) 0%,
		rgba(255, 255, 255, .17) 20%,
		transparent 44%
	);
	mask-image: radial-gradient(circle at 50% 46%, #000 0 46%, transparent 52%);
	translate:
		calc(-50% - var(--mx, 0) * 16px)
		calc(-50% - var(--my, 0) * 14px);
	transition: translate var(--m-dur-slow) var(--m-ease-spring);
}

/* Mentre il puntatore è sopra, luce e ombra lo seguono senza ritardo. */
.m-marchio-grande.is-viva::after,
.m-marchio-grande.is-viva::before {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.m-marchio-grande img {
		transition: none;
	}
}

@media (max-width: 782px) {
	.m-marchio-grande {
		min-height: 240px;
	}
}

/* ------------------------------------------------------------------ *
 * I PROFILI IN GRANDE
 *
 * Nella barra sono stretti a 30px per far stare tutto; qui lo spazio
 * c'è, quindi tornano quadrati e grandi come chiesto: 64px di
 * bersaglio, 28 di segno.
 * ------------------------------------------------------------------ */
/*
 * Alti 64 come chiesto, ma stretti 44: la scatola da 64x64 lasciava
 * 36px d'aria fra un segno e l'altro, perche' il segno ne occupa 28.
 * Stretta a 44 l'aria scende a 16 e i segni si leggono come una fila.
 *
 * 44 e' il minimo del progetto, quindi il bersaglio regge: 44x64.
 */
.m-social--grande {
	flex-wrap: wrap;
	gap: 0;
	margin-top: var(--wp--preset--spacing--50);
	/* Il primo segno in asse col testo: meta' dell'aria della scatola. */
	margin-left: -8px;
}

.m-social--grande .m-social__voce {
	width: 44px;
	height: 64px;
	color: var(--m-ink-2);
}

.m-social--grande .m-social__voce svg {
	width: 28px;
	height: 28px;
}

/*
 * Sul telefono gli otto profili su una riga sola.
 *
 * Il conto: a 375px la colonna ne offre 343, e otto bersagli da 44
 * ne chiedono 352 — nove di troppo, e andavano a capo 7+1. Il massimo
 * per stare in riga e' 42.
 *
 * Stretti a 40 con il segno a 26: la fila sta in 320, resta un po'
 * d'aria, e i segni si avvicinano fra loro di 2px perche' la scatola
 * si stringe piu' del segno.
 *
 * 40x60 resta molto sopra il minimo di 24x24 della WCAG 2.2; sotto i
 * 44 del progetto, come gia' i profili nella barra, e per la stessa
 * ragione: lo spazio non c'e'.
 */
@media (max-width: 600px) {
	.m-social--grande .m-social__voce {
		width: 40px;
		height: 60px;
	}

	.m-social--grande .m-social__voce svg {
		width: 26px;
		height: 26px;
	}
}

/* ------------------------------------------------------------------ *
 * Il canale che non ha ancora un indirizzo
 *
 * Il pulsante c'e' ed e' vero, ma e' spento: lo stile dei controlli
 * disattivati sta piu' in alto, qui c'e' solo la riga che dice perche'.
 * ------------------------------------------------------------------ */

.m-canale__azione {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
}

.m-canale__spento {
	font-family: var(--m-font-mono);
	font-size: 0.6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--m-ink-3);
}