/*
 * Superficie (Card.jsx dell'oracolo). Nessun blocco "Card" nativo in
 * WordPress: lo stile di base è registrato su core/group via
 * register_block_style() (functions.php, nome "fm-card") — compare nel
 * picker "Stili" dell'editor come "Superficie" invece di dover scrivere una
 * classe a memoria. I modificatori (elevazione/glow/padding/raggio/
 * interattiva) restano "Classi CSS aggiuntive" manuali: non sono alternative
 * a scelta singola come lo stile di base, sono rifiniture combinabili.
 * CSS statica, non block style variations di theme.json (PROGRESS-tema.md
 * §1: quel meccanismo non è affidabile dentro wp:post-content).
 *
 * Default: elevation sm, padding md, radius lg (come l'oracolo).
 */

.is-style-fm-card {
	background: var(--wp--custom--surface-card);
	border: var(--wp--custom--border-width--hair) solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--5);
	box-shadow: var(--wp--custom--shadow--sm);
	transition:
		transform var(--wp--custom--dur--base) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}

/* ---- Elevazione (ombra neutra) — ignorata se è impostato un .is-glow-* ---- */
.is-style-fm-card.is-elevation-none { box-shadow: none; }
.is-style-fm-card.is-elevation-xs { box-shadow: var(--wp--custom--shadow--xs); }
.is-style-fm-card.is-elevation-sm { box-shadow: var(--wp--custom--shadow--sm); }
.is-style-fm-card.is-elevation-md { box-shadow: var(--wp--custom--shadow--md); }
.is-style-fm-card.is-elevation-lg { box-shadow: var(--wp--custom--shadow--lg); }

/* ---- Glow (alone colorato, contesto gaming/enfasi) — vince sull'elevazione ---- */
.is-style-fm-card.is-glow-pink { box-shadow: var(--wp--custom--glow--pink); }
.is-style-fm-card.is-glow-orange { box-shadow: var(--wp--custom--glow--orange); }
.is-style-fm-card.is-glow-violet { box-shadow: var(--wp--custom--glow--violet); }
.is-style-fm-card.is-glow-flash { box-shadow: var(--wp--custom--glow--flash); }

/* ---- Padding ---- */
.is-style-fm-card.is-padding-none { padding: 0; }
.is-style-fm-card.is-padding-sm { padding: var(--wp--preset--spacing--4); }
.is-style-fm-card.is-padding-md { padding: var(--wp--preset--spacing--5); }
.is-style-fm-card.is-padding-lg { padding: var(--wp--preset--spacing--6); }

/* ---- Raggio ---- */
.is-style-fm-card.is-radius-sm { border-radius: var(--wp--custom--radius--sm); }
.is-style-fm-card.is-radius-md { border-radius: var(--wp--custom--radius--md); }
.is-style-fm-card.is-radius-lg { border-radius: var(--wp--custom--radius--lg); }
.is-style-fm-card.is-radius-xl { border-radius: var(--wp--custom--radius--xl); }

/* ---- Interattiva — sollevamento in hover, stessa ombra "lg" salvo un glow impostato ---- */
@media (hover: hover) {
	.is-style-fm-card.is-interactive:hover {
		transform: translateY(-4px);
		box-shadow: var(--wp--custom--shadow--lg);
	}
	.is-style-fm-card.is-interactive.is-glow-pink:hover { box-shadow: var(--wp--custom--glow--pink); }
	.is-style-fm-card.is-interactive.is-glow-orange:hover { box-shadow: var(--wp--custom--glow--orange); }
	.is-style-fm-card.is-interactive.is-glow-violet:hover { box-shadow: var(--wp--custom--glow--violet); }
	.is-style-fm-card.is-interactive.is-glow-flash:hover { box-shadow: var(--wp--custom--glow--flash); }
}