/*
 * Figurina Panini (template-parts/components/figurina.php), condivisa dai widget che la stampano.
 * Porta home.css 355-382, 468-469, 925-938 e scene.css 896-913 (retro standard).
 *
 * La cornice è tutta la figurina: la foto sta nella finestra, il nome nella striscia della cornice;
 * le misure arrivano dal partial come variabili (--on-fig-*), lette da assets/data/geo-figurine.json.
 * Il contenitore della figurina deve avere container-type: inline-size: il nome si misura in cqw
 * sulla casella (come nel prototipo), così resta in proporzione a qualunque larghezza.
 * Mobile first: le regole senza media query valgono per il telefono.
 */

.on-figurina {
	/* Il cartoncino del retro è stampato in un verde solo: il verde inchiostro, più scuro per i valori */
	--on-fig-stampa: var(--on-green-ink);
	--on-fig-stampa-scura: color-mix(in srgb, var(--on-green-ink) 55%, var(--on-ink));
	--on-fig-seppia: color-mix(in srgb, var(--on-table) 55%, var(--on-film));
	--on-fig-ombra: 0 6px 10px color-mix(in srgb, var(--on-shade) 25%, transparent);
	position: relative;
	margin: 0;
	aspect-ratio: var(--on-fig-fr, .75);
	transform: rotate(var(--on-fig-r, 0deg));
	transform-style: preserve-3d;
	will-change: transform;
}

/* Senza GSAP (movimento ridotto) la figurina si gira con il CSS; con GSAP la anima il modulo JS */
.on-figurina:not(.is-gsap) {
	transition: transform var(--on-dur-4) var(--on-ease-flip);
}

.on-figurina.is-flipped:not(.is-gsap) {
	transform: rotateY(180deg);
}

/*
 * Cornice e foto con due classi: ".elementor img" (Elementor) mette height: auto e vincerebbe
 * su una classe sola, facendo uscire la foto dalla finestra e annullando object-position.
 */
.on-figurina .on-figurina__cornice {
	position: absolute;
	z-index: 3;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.on-figurina__faccia {
	position: absolute;
	top: var(--on-fig-wy);
	left: var(--on-fig-wx);
	width: var(--on-fig-ww);
	height: var(--on-fig-wh);
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Fronte: la foto nella finestra della cornice */
.on-figurina__fronte {
	display: grid;
	grid-template-rows: 1fr;
	background: var(--on-placeholder);
	box-shadow: var(--on-fig-ombra);
	color: var(--on-ink);
}

/* Grana e bordi appena bruniti, come una stampa vecchia */
.on-figurina__fronte::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--on-grain), radial-gradient(ellipse at 50% 50%, transparent 60%, color-mix(in srgb, var(--on-fig-seppia) 22%, transparent));
	mix-blend-mode: multiply;
	opacity: .8;
	pointer-events: none;
}

.on-figurina__foto {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: var(--on-placeholder);
}

.on-figurina .on-figurina__img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--on-foto-x, 50%) var(--on-foto-y, 12%);
	filter: saturate(.82) contrast(1.06) sepia(.16);
}

/* Il lucido che passa quando la si tocca, prima che si giri */
.on-figurina__foto::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: -60% -30%;
	background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--on-white) 40%, transparent) 50%, transparent 58%);
	transform: translateX(-70%);
	transition: transform .55s ease-out;
	pointer-events: none;
}

.on-figurina:focus-within .on-figurina__foto::before {
	transform: translateX(70%);
}

@media (hover: hover) and (pointer: fine) {
	.on-figurina:hover .on-figurina__foto::before {
		transform: translateX(70%);
	}
}

/*
 * Senza foto: il cognome grande sul verde del campo (righe del tubo catodico nelle leggende) e lo
 * scudo piccolo. Copia .ph.vuota di scene.css 376-380 e 789-791 con la cascata del prototipo:
 * lo scudo eredita da home.css 367 (.stk .front .ph img) posizione assoluta, inset 0, punto
 * di fuoco e filtro della foto; scene.css gli dà solo larghezza, altezza, contain e opacità.
 * I due verdi sono quelli del prototipo (#15913f → #0a6b2b), ricavati dai colori del kit.
 */
.on-figurina__foto--vuota {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 6%;
	container-type: inline-size;
	background: linear-gradient(160deg, color-mix(in srgb, color-mix(in srgb, var(--on-green) 91%, var(--on-green-ink)) 92%, var(--on-white)) 0%, color-mix(in srgb, var(--on-green) 33%, var(--on-green-ink)) 100%);
}

.on-figurina__foto--vuota::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--on-shade) 14%, transparent) 0 2px, transparent 2px 5px);
	pointer-events: none;
}

.on-figurina .on-figurina__foto--vuota img {
	position: absolute;
	inset: 0;
	width: 22%;
	height: auto;
	object-fit: contain;
	object-position: 50% 12%;
	filter: saturate(.82) contrast(1.06) sepia(.16);
	opacity: .85;
}

.on-figurina__foto--vuota b {
	padding: 0 6%;
	color: var(--on-white);
	font-family: var(--on-font-display);
	font-size: min(30cqw, calc(132cqw / var(--on-fig-l, 6)));
	font-style: normal;
	font-weight: 700;
	line-height: .9;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: keep-all;
}

/* Il nome nella striscia della cornice */
.on-figurina__nome {
	display: flex;
	position: absolute;
	z-index: 4;
	top: var(--on-fig-ny);
	right: 7%;
	left: 7%;
	align-items: center;
	justify-content: center;
	gap: .3em;
	height: var(--on-fig-nh);
	margin: 0;
	overflow: hidden;
	color: var(--on-ink);
	font-family: var(--on-font-cond);
	font-size: var(--on-fig-nome-fs, 8.6cqw);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.on-figurina--nome-chiaro .on-figurina__nome {
	color: var(--on-cream);
}

.on-figurina__nome span {
	font-size: .82em;
	opacity: .72;
}

/* Retro: il cartoncino Panini, stampato in un verde solo; copre tutta la figurina */
.on-figurina__retro {
	display: grid;
	top: 1.5%;
	left: 2%;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 4cqw;
	width: 96%;
	height: 97%;
	padding: 7% 7% 6%;
	border-radius: 2.5%;
	background: var(--on-card-back);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-fig-stampa) 25%, transparent), inset 0 0 30px color-mix(in srgb, var(--on-fig-seppia) 16%, transparent);
	color: var(--on-fig-stampa);
	text-align: left;
	transform: rotateY(180deg);
	container-type: inline-size;
}

.on-figurina__retro::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--on-grain);
	mix-blend-mode: multiply;
	opacity: .55;
	pointer-events: none;
}

.on-figurina__retro::after {
	content: "";
	position: absolute;
	inset: 3.5%;
	border: 1.5px solid color-mix(in srgb, var(--on-fig-stampa) 70%, transparent);
	border-radius: 1.6%;
	pointer-events: none;
}

.on-figurina__retro > * {
	position: relative;
	z-index: 1;
}

.on-figurina__retro-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3cqw;
	padding-bottom: 3cqw;
	border-bottom: 2px solid var(--on-fig-stampa);
}

.on-figurina__retro-top img {
	width: 13cqw;
	height: auto;
}

.on-figurina__numero {
	padding: 1.4cqw 2.6cqw .6cqw;
	border-radius: 1cqw;
	background: var(--on-fig-stampa);
	color: var(--on-card-back);
	font-family: var(--on-font-display);
	font-size: 13cqw;
	font-weight: 700;
	line-height: .9;
}

.on-figurina__dati {
	display: grid;
	align-content: start;
	gap: 3cqw;
	min-height: 0;
	overflow: hidden;
}

.on-figurina__chi {
	margin: 0;
	color: var(--on-fig-stampa);
	font-family: var(--on-font-display);
	font-size: 12cqw;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.on-figurina__dati dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	margin: 0;
	border-top: 1px solid color-mix(in srgb, var(--on-fig-stampa) 35%, transparent);
}

.on-figurina__dati dt,
.on-figurina__dati dd {
	margin: 0;
	padding: 1.6cqw 1.6cqw 1.2cqw;
	border-bottom: 1px solid color-mix(in srgb, var(--on-fig-stampa) 30%, transparent);
	font-family: var(--on-font-cond);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.on-figurina__dati dt {
	background: var(--on-fig-stampa);
	color: var(--on-card-back);
	font-size: 4.6cqw;
	letter-spacing: .04em;
}

.on-figurina__dati dd {
	color: var(--on-fig-stampa-scura);
	font-size: 5.4cqw;
}

.on-figurina__vai {
	display: flex;
	position: relative;
	z-index: 6;
	justify-content: space-between;
	color: var(--on-fig-stampa);
	font-family: var(--on-font-tv);
	font-size: 5cqw;
	letter-spacing: .02em;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 3px;
}

/*
 * Il bottone che la gira copre la figurina; girata, lascia libero il link in fondo al retro.
 * Selettori con classe + elemento + stato: lo stile bottoni del kit (".elementor-kit-6 button"
 * e ":hover/:focus", fondo verde o nero pieno) altrimenti vince e, al focus da tastiera,
 * coprirebbe tutta la figurina con un rettangolo nero.
 */
.on-figurina button.on-figurina__giro,
.on-figurina button.on-figurina__giro:hover,
.on-figurina button.on-figurina__giro:focus {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0;
}

/* Al focus da tastiera resta trasparente: si vede solo l'anello intorno alla figurina */
.on-figurina button.on-figurina__giro:focus-visible {
	outline: 3px solid var(--on-green-ink);
	outline-offset: -3px;
	opacity: 1;
}

.on-figurina.is-flipped button.on-figurina__giro {
	bottom: 24%;
}

/* Desktop: ombra a filtro sul fronte (sui telefoni costa e resta un'ombra semplice) */
@media (min-width: 901px) {
	.on-figurina__fronte {
		box-shadow: none;
		filter: var(--on-fig-filtro, drop-shadow(0 18px 18px color-mix(in srgb, var(--on-shade) 35%, transparent)));
	}
}

/*
 * Parti facoltative dell'album (argomenti timbro, raduni, testo_gira del partial; scene.css 783-784,
 * 916-917, 940): chi non le passa (home, leggende, scheda eroe) stampa la figurina di prima.
 */

/* Il timbrino dei raduni giocati, in alto a destra sul fronte: bianco su verde inchiostro (8,4:1) */
.on-figurina__timbro {
	position: absolute;
	z-index: 6;
	top: 5%;
	right: 6%;
	padding: 1.4cqw 2.4cqw .8cqw;
	background: var(--on-green-ink);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--on-shade) 25%, transparent);
	color: var(--on-white);
	font-family: var(--on-font-tv);
	font-size: 7.4cqw;
	line-height: 1;
	white-space: nowrap;
	transform: rotate(3deg);
	pointer-events: none;
}

/* La riga "Raduni" del retro, in fondo alla tabella: l'elenco dei raduni in fila */
.on-figurina__raduni ul {
	display: flex;
	flex-wrap: wrap;
	gap: .6cqw 2.4cqw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.on-figurina__raduni li {
	margin: 0;
	font-size: inherit;
}

/* "Gira ancora": l'invito in fondo al retro quando la scheda non c'è, senza sottolineatura */
.on-figurina .on-figurina__vai--gira {
	text-decoration: none;
}