/* =========================================================================
   05-card.css — card, griglie, chip, mappa, badge "Immagine AI".
   03/09/2026.

   UNA CARD BASE E DEI MODIFICATORI, non una card per sezione. Sulle pagine
   vecchie esistono .lg-benefici-card, .lg-corso-card, .lg-aree-card,
   .lg-percorsi-card: quattro nomi per lo stesso riquadro con bordo e raggio,
   piu' quattro copie delle stesse dichiarazioni. Qui la scatola e' una sola
   e cambia solo cio' che deve cambiare davvero.
   ========================================================================= */


/* --- Griglia di card ----------------------------------------------------
   ⚠️ grid-auto-rows: 1fr NON e' decorativo. Senza, le card con meno testo
   restano piu' basse delle vicine e la riga si disallinea; sulle pagine
   vecchie e' successo due volte, l'ultima con aspect-ratio, che spegne lo
   stretch implicito (CLAUDE.md §8.3). Le colonne le decide chi compone,
   con i modificatori qui sotto.                                           */
.lc-page .lc-griglia {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.lc-page .lc-griglia { gap: 20px }
	.lc-page .lc-griglia--2 { grid-template-columns: repeat(2, 1fr) }
	.lc-page .lc-griglia--3 { grid-template-columns: repeat(2, 1fr) }
	.lc-page .lc-griglia--4 { grid-template-columns: repeat(2, 1fr) }
}

@media (min-width: 992px) {
	.lc-page .lc-griglia--3 { grid-template-columns: repeat(3, 1fr) }
	.lc-page .lc-griglia--4 { grid-template-columns: repeat(3, 1fr) }
}

@media (min-width: 1200px) {
	.lc-page .lc-griglia--4 { grid-template-columns: repeat(4, 1fr) }
}


/* --- Card ---------------------------------------------------------------
   min-width: 0 non e' superfluo: un elemento di griglia ha min-width auto e
   non si comprime sotto la propria min-content. E' questo a trasformare "un
   contenuto calcolato male" in "pagina che esce dallo schermo" — il guasto
   che sulla Longevity si e' visto solo su iPhone reale (CLAUDE.md §8.5).  */
.lc-page .lc-card {
	position: relative;
	align-self: stretch;
	min-width: 0;
	width: 100%;
	padding: 24px;
	background: var(--lc-bianco);
	border: 1px solid var(--lc-bordo);
	border-radius: var(--lc-raggio);
}

/* Con un numero d'ordine nell'angolo: il testo rientra per non finirci
   sotto. */
.lc-page .lc-card--numerata {
	padding-left: 62px;
}

.lc-page .lc-card-numero {
	position: absolute;
	top: 24px;
	left: 22px;
	color: var(--lc-blu-chiaro);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ⚠️ Il numero e' --lc-blu-chiaro e non --lc-azzurro: quest'ultimo su
   bianco fa 2,52:1. E' aria-hidden, ma un contrasto basso lo rende
   comunque illeggibile a chi ci vede poco. */

.lc-page .lc-card > * + * {
	margin-top: 8px;
}

/* Stesso motivo dell'accordion: il margine del Reboot sull'ultimo paragrafo
   si somma al padding della card. */
.lc-page .lc-card > :last-child,
.lc-page .lc-card > :last-child > :last-child,
.lc-page .lc-card-corpo > :last-child {
	margin-bottom: 0;
}


/* --- Card con fotografia ------------------------------------------------
   La foto in cima, a filo dei bordi: per questo la card ritaglia
   (overflow:hidden) e il padding sta sul testo, non sulla card.           */
.lc-page .lc-card--foto {
	padding: 0;
	overflow: hidden;
}

.lc-page .lc-card-foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.lc-page .lc-card-corpo {
	padding: 20px;
}

.lc-page .lc-card-corpo > * + * {
	margin-top: 8px;
}


/* --- Chip ---------------------------------------------------------------
   Etichette brevi in fila, per una vista sintetica. Non sono bottoni e non
   devono sembrarlo: nessun bordo, nessun hover. */
.lc-page .lc-chip-riga {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.lc-page .lc-chip {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--lc-chip-fondo);
	color: var(--lc-chip-testo);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
}


/* --- Mappa: due colonne che su telefono si impilano ---------------------
   Una <table> vera avrebbe un problema serio a 360px: due colonne di cui
   una piena di nomi lunghi. Qui e' una griglia con i ruoli ARIA di tabella,
   quindi uno screen reader la annuncia come tabella a ogni larghezza,
   mentre a schermo le due celle si impilano sotto i 768px.

   L'intestazione sparisce alla vista sotto i 768px: sopra due celle
   impilate le parole "Voce" e "Valore" non intestano niente e raddoppiano
   l'altezza di ogni riga. Resta pero' nell'albero di accessibilita'
   (.visually-hidden e non display:none), perche' li' serve davvero.       */
.lc-page .lc-mappa {
	display: grid;
	background: var(--lc-bianco);
	border: 1px solid var(--lc-bordo);
	border-radius: var(--lc-raggio);
	overflow: hidden;
}

.lc-page .lc-mappa-riga {
	display: grid;
	gap: 10px;
	padding: 16px 18px;
}

.lc-page .lc-mappa-riga + .lc-mappa-riga {
	border-top: 1px solid var(--lc-bordo-tenue);
}

.lc-page .lc-mappa-voce {
	color: var(--lc-blu);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.lc-page .lc-mappa-intestazione {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.lc-page .lc-mappa-intestazione {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 14px 18px;
		overflow: visible;
		clip-path: none;
		display: grid;
		grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
		gap: 20px;
		background: var(--lc-fondo-tenue);
		border-bottom: 1px solid var(--lc-bordo);
		color: var(--lc-blu-chiaro);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.lc-page .lc-mappa-riga {
		grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
		align-items: start;
		gap: 20px;
	}
}


/* --- Badge "Immagine AI" ------------------------------------------------
   Va su ogni fotografia generata e SOLO su quelle: etichettare come
   sintetico il ritratto di un professionista reale sarebbe falso quanto non
   etichettare un'immagine generata (CLAUDE.md §8.1).

   Fondo scuro semitrasparente e non bianco come chiesto in origine: bianco
   su bianco e' invisibile. Cosi' il caso peggiore — foto tutta bianca sotto
   l'etichetta — da' 4,7:1, sopra la soglia AA.

   NON e' aria-hidden: le immagini illustrative hanno alt="", quindi senza
   questo testo per chi usa uno screen reader la dichiarazione non
   esisterebbe. E' ripetitivo, ed e' il prezzo giusto.

   ⚠️ Il badge non copre l'art. 50 del regolamento UE 2024/1689 per intero:
   quello chiede anche una marcatura leggibile dalla macchina, cioe' C2PA,
   che vive dentro il file e la scrive chi genera l'immagine.              */
.lc-page .lc-media {
	position: relative;
	width: fit-content;
}

/* ⚠️ width:fit-content serve alle immagini con max-width (img-fluid), che
   altrimenti lascerebbero il badge sospeso nel vuoto alla loro destra. Ma
   su un'immagine larga 100% e' un calcolo circolare che si risolve a ZERO:
   provato, le foto collassavano a 0x0 (CLAUDE.md §7.6). In quel caso serve
   il modificatore qui sotto. */
.lc-page .lc-media--piena {
	width: 100%;
}

.lc-page .lc-media > img {
	display: block;
}

.lc-page .lc-ai-badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(10, 32, 50, .62);
	color: var(--lc-bianco);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.45;
	text-transform: uppercase;
	white-space: nowrap;
	/* Dove la foto sta dentro un comando (un <summary>, un <button>), senza
	   questo il badge intercetta il clic e quell'angolo smette di
	   funzionare. */
	pointer-events: none;
}

@media (max-width: 575.98px) {
	.lc-page .lc-ai-badge {
		right: 6px;
		bottom: 6px;
		padding: 2px 7px;
		font-size: 10px;
		letter-spacing: .04em;
	}
}