/* FSE clone: il CSS che i blocchi nativi non sanno esprimere.
   Ogni regola qui è una cosa che in Bricks era un pannello: elenco nel README. */

h1, h2, h3, h4, h5, h6, p { text-wrap: pretty; margin-block: 0; }
img:not(svg, .img-no-filter) { filter: brightness(1.2); }

/* Testo bianco: in LI è la classe .text-white che ridefinisce le variabili, non un colore inline */
.li-text-white {
	--text-color: var(--color-white);
	--text-color-primary: var(--color-white);
	color: var(--text-color);
}

/* ---- Pill (stile di blocco del Paragraph) ---- */
.is-style-li-pill {
	display: inline-block;
	width: fit-content;
	background-color: var(--color-primary-100);
	color: var(--color-primary-700);
	border-radius: var(--radius-full);
	padding: var(--space-2xs) var(--space-s);
	font-size: var(--text-xs);
}

/* ---- Bottoni: chevron in coda, come l'icona Ionicons di Bricks ---- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: var(--space-2xs);
	line-height: var(--body-lh);
	transition: filter var(--duration-fast) var(--ease-out);
}
.wp-block-button__link::after {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-style-li-light .wp-block-button__link {
	background-color: var(--button-bg-light);
	color: var(--text-color);
	border-color: transparent;
}

/* ---- Hero: foto come sfondo del Group, velo a gradiente, testo nelle ultime tre colonne di sette ---- */
.li-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--section-vertical) var(--section-horizontal);
}
/* La foto è lo sfondo nativo del Group (style.background): nell'editor e sul sito rende uguale.
   Non replica il brightness(1.2) che Bricks applica alle <img>: qui la foto è uno sfondo. */
.li-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(-90deg, var(--color-neutral-900) 40%, transparent 70%);
	opacity: var(--gradient-fade-opacity);
}
.li-hero__container {
	margin-block-start: 0; /* il layout flow di core mette un margine al secondo figlio */
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max-width);
	display: grid;
	grid-template-columns: var(--grid-7);
	gap: var(--grid-gap);
}
.li-hero__content { grid-column: 5 / span 3; }
.li-hero__testo { max-width: var(--mw-section-header); }

/* Due sezioni a tutto campo si toccano: il layout flow del contenuto metterebbe un blockGap fra loro */
.entry-content > section + section { margin-block-start: 0; }

/* ---- Fascia numeri ---- */
.li-sezione { padding: var(--section-vertical) var(--section-horizontal); }
.li-stat > .wp-block-outermost-icon-block { flex: 0 0 auto; }
.li-contatore { line-height: 1; }
.li-contatore__prefisso, .li-contatore__suffisso { color: var(--color-secondary-500); }

@media (max-width: 767px) {
	.li-hero::after {
		background: linear-gradient(-90deg, var(--color-neutral-900) 100%, transparent 0%);
		opacity: 0.7;
	}
	.li-hero__container { grid-template-columns: var(--grid-1); }
	.li-hero__content { grid-column: auto; }
	.li-hero .wp-block-button, .li-hero .wp-block-button__link { width: 100%; }
}