/*
 * Pattern della home (patterns/trust-bar.php, promo-cards.php, tiktok-banner.php)
 * — costruiti dai componenti del design system e dall'oracolo (screens.jsx),
 * NON dal markup della pagina statica legacy (page_on_front, ID 1442915), che
 * resta intoccata e stilata separatamente da trustbar.css/promocards.css/
 * tiktokbanner.css finché non viene sostituita. Vedi STATO.md — la home è
 * l'unica parte del sito ancora non composta dai componenti del DS: questi
 * pattern sono la preparazione per lo scambio, non ancora lo scambio stesso.
 */

/* ---- TrustBar ---- */
.fm-trustbar {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4);
	max-width: var(--wp--custom--shell--default);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--6) var(--wp--custom--gutter-shell);
}
.fm-trustbar::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-trustbar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* .fm-trust-card è già .is-style-fm-card is-elevation-xs is-radius-md (Card component
   riusato as-is): qui solo il layout interno (icona + testo) che Card da sola non offre. */
.fm-trust-card {
	flex-direction: row;
	align-items: center;
	gap: 13px;
	padding: 16px 18px;
}
@media (max-width: 767px) {
	.fm-trust-card {
		gap: 10px;
		padding: var(--wp--preset--spacing--3);
	}
}

.fm-icon-tile {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--custom--accent-soft);
	color: var(--wp--preset--color--flash-pink);
}
.fm-icon-tile svg {
	display: block;
}
@media (max-width: 767px) {
	.fm-icon-tile {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
	}
	.fm-icon-tile svg {
		width: 16px;
		height: 16px;
	}
}

.fm-trust-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--fw--bold);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--text-strong);
}
.fm-trust-sub {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--text-muted);
}

/* ---- PromoCards ---- */
.fm-promo-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-promo-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-promo-grid {
		grid-template-columns: 1fr;
	}
}

.is-style-fm-promo-flash,
.is-style-fm-promo-dark {
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--6);
}
.is-style-fm-promo-flash {
	background: var(--wp--preset--gradient--flash);
	box-shadow: var(--wp--custom--glow--flash);
	color: var(--wp--custom--on-accent);
}
.is-style-fm-promo-dark {
	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);
}
.is-style-fm-promo-dark::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;
}

/* kick riusato anche dal banner TikTok sotto — sfondo diverso in base al contenitore
   (bianco 20% su gradiente chiaro, 12% su superfici scure) */
.fm-promo-kick {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 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);
	width: fit-content;
}
.fm-promo-kick p {
	margin: 0;
}
.is-style-fm-promo-flash .fm-promo-kick {
	background: rgba(255, 255, 255, 0.2);
}
.is-style-fm-promo-dark .fm-promo-kick,
.is-style-fm-tiktok .fm-promo-kick {
	background: rgba(255, 255, 255, 0.12);
}

.is-style-fm-promo-flash > h3,
.is-style-fm-promo-dark > h3 {
	position: relative;
	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);
}
.is-style-fm-promo-flash > p,
.is-style-fm-promo-dark > p {
	position: relative;
	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;
}
.is-style-fm-promo-flash > p {
	color: rgba(255, 255, 255, 0.94);
}
.is-style-fm-promo-dark > p {
	color: var(--wp--preset--color--ink-200);
}
.is-style-fm-promo-flash .wp-block-buttons,
.is-style-fm-promo-dark .wp-block-buttons {
	position: relative;
}

/* ---- TikTokBanner ---- */
.is-style-fm-tiktok {
	position: relative;
	overflow: hidden;
	max-width: var(--wp--custom--shell--default);
	margin: var(--wp--preset--spacing--8) auto;
	padding: var(--wp--preset--spacing--7) var(--wp--custom--gutter-shell);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--ink-950);
}
.is-style-fm-tiktok::before {
	content: "";
	position: absolute;
	top: -40px;
	right: 80px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--violet);
	filter: blur(80px);
	opacity: 0.4;
}
.is-style-fm-tiktok::after {
	content: "♪";
	position: absolute;
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--fw--bold);
	font-size: 120px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.06);
}
@media (max-width: 767px) {
	.is-style-fm-tiktok::after {
		display: none;
	}
}
.is-style-fm-tiktok > h2 {
	position: relative;
	max-width: 560px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--fw--bold);
	font-size: var(--wp--preset--font-size--xxxl);
	letter-spacing: -0.02em;
	margin: 16px 0 8px;
	color: var(--wp--custom--on-accent);
}
.is-style-fm-tiktok > p {
	position: relative;
	max-width: 400px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	margin: 0 0 22px;
	color: var(--wp--preset--color--ink-200);
}
.is-style-fm-tiktok > p strong {
	color: var(--wp--custom--on-accent);
}
.is-style-fm-tiktok .wp-block-buttons {
	position: relative;
}