/*
 * PromoCards (screens.jsx dell'oracolo, `function PromoCards()`) — due card
 * promo affiancate (configuratore / permuta). Uso reale: sezione
 * `.fm-action-grid` > `.fm-config`/`.fm-permuta` già nel contenuto vero della
 * home page (pagina "Home FlashMac SF", ID 1442915) — link reali già
 * presenti (https://build.flashmac.eu, https://vlt.flashmac.com/), non
 * inventati. Markup reale usa `<h2>` (non `<h3>` come l'oracolo): scelta
 * semantica già fatta da chi ha scritto la pagina, non cambiata qui.
 *
 * Stesso trucco di "breakout" del fondo band "b" usato in trustbar.css.
 *
 * Il bottone di .fm-config non ha lo Stile is-style-fm-dark (registrato per
 * Tag/ProductCard) impostato nel contenuto reale — invece di modificare il
 * contenuto editabile della pagina, il colore "scuro su sfondo chiaro"
 * richiesto dall'oracolo per quella card è applicato qui via selettore
 * scoped, stesso risultato visivo di is-style-fm-dark senza toccare il
 * blocco. Il bottone di .fm-permuta ha già la resa corretta (gradiente
 * "flash" di default, coincide con la richiesta dell'oracolo per quella
 * card) — nessuna modifica necessaria lì.
 */
.fm-action-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--5);
	max-width: var(--wp--custom--shell--default);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--8) var(--wp--custom--gutter-shell);
}
.fm-action-grid::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--wp--custom--band--b);
	z-index: -1;
}
@media (max-width: 767px) {
	.fm-action-grid {
		grid-template-columns: 1fr;
	}
}

.fm-config,
.fm-permuta {
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--6);
}
.fm-config {
	background: var(--wp--preset--gradient--flash);
	box-shadow: var(--wp--custom--glow--flash);
	color: var(--wp--custom--on-accent);
}
.fm-permuta {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ink-900);
	border: var(--wp--custom--border-width--hair) solid var(--wp--preset--color--ink-800);
	color: var(--wp--custom--on-accent);
}
.fm-permuta::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -40px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--violet);
	filter: blur(70px);
	opacity: 0.45;
}

.fm-config .fm-kick,
.fm-permuta .fm-kick {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--xxxs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: var(--wp--custom--fw--bold);
	color: var(--wp--custom--on-accent);
	padding: 4px 11px;
	border-radius: var(--wp--custom--radius--pill);
}
.fm-config .fm-kick {
	background: rgba(255, 255, 255, 0.2);
}
.fm-permuta .fm-kick {
	background: rgba(255, 255, 255, 0.12);
}

.fm-config > h2,
.fm-permuta > h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--fw--bold);
	font-size: var(--wp--preset--font-size--xxl);
	margin: 14px 0 8px;
	color: var(--wp--custom--on-accent);
}

.fm-config > p:not(.fm-kick),
.fm-permuta > p:not(.fm-kick) {
	max-width: 340px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	margin: 0 0 20px;
}
.fm-config > p:not(.fm-kick) {
	color: rgba(255, 255, 255, 0.94);
}
.fm-permuta > p:not(.fm-kick) {
	color: var(--wp--preset--color--ink-200);
}

/* dark su chiaro (equivalente a is-style-fm-dark, senza toccare il blocco reale) */
.fm-config .wp-block-button__link {
	background: var(--wp--preset--color--ink-950);
	color: var(--wp--custom--on-accent);
	box-shadow: none;
}