/*
 * ACSI — Home: Hero
 * Dipende da variabili-colori.css.
 */

.acsi-hero {
	position: relative;
	width: 100%;
	padding: 36px 0;
	overflow: hidden;
	min-height: 440px;
	background: var(--colore-sfondo);
}

.acsi-hero__testo-colonna {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.acsi-hero__testo-colonna > div {
	max-width: 480px;
}

.acsi-hero__immagine-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 56%;
	z-index: 1;
	display: flex;
	align-items: center;
}

.acsi-hero__titolo {
	font-family: var(--font-titoli);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.15;
	color: var(--colore-testo);
	margin: 0 0 16px;
}

.acsi-hero__titolo em {
	font-style: normal;
	color: var(--colore-primario);
}

.acsi-hero__testo {
	font-family: var(--font-testo);
	font-size: 15px;
	line-height: 1.6;
	color: var(--colore-testo);
	max-width: 46ch;
	margin: 0 0 22px;
}

.acsi-hero__azioni {
	display: flex;
	gap: 14px;
}

.acsi-hero__bottone-primario {
	background: var(--colore-accento);
	color: var(--colore-sfondo);
	border: none;
	border-radius: var(--raggio-bordo, 8px);
	padding: 12px 22px;
	font-family: var(--font-testo);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.acsi-hero__bottone-primario:hover,
.acsi-hero__bottone-primario:focus-visible {
	background: var(--colore-accento-hover, var(--colore-accento));
}

.acsi-hero__bottone-secondario {
	background: transparent;
	color: var(--colore-primario);
	border: 1px solid var(--colore-primario);
	border-radius: var(--raggio-bordo, 8px);
	padding: 12px 22px;
	font-family: var(--font-testo);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
}

.acsi-hero__bottone-secondario:hover,
.acsi-hero__bottone-secondario:focus-visible {
	background: var(--colore-sfondo-alt);
}

.acsi-hero__immagine {
	position: relative;
	z-index: 2;
	aspect-ratio: 1 / 1;
	width: 92%;
	margin-left: auto;
	margin-right: -6%;
	border-radius: 50%;
	overflow: hidden;
	background: var(--colore-primario-chiaro);
}

.acsi-hero__anello {
	position: absolute;
	z-index: 1;
	top: 6%;
	left: -7%;
	width: 70%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 2px solid var(--colore-accento);
	opacity: .55;
}

.acsi-hero__pallino-verde {
	position: absolute;
	z-index: 3;
	top: -2%;
	left: 42%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--colore-primario-chiaro);
}

.acsi-hero__foglia {
	position: absolute;
	z-index: 0;
	bottom: 2%;
	right: 10%;
	width: 34%;
	aspect-ratio: 1 / 1;
	border-radius: 42% 58% 60% 40% / 55% 45% 55% 45%;
	background: var(--colore-primario-chiaro);
	opacity: .5;
}

.acsi-hero__immagine img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

@media (max-width: 860px) {
	.acsi-hero {
		padding: 32px 0 40px;
		min-height: 0;
	}

	.acsi-hero__testo-colonna > div {
		max-width: none; /* su desktop limitava il testo per lasciare spazio all'immagine a destra */
	}

	.acsi-hero__titolo {
		font-size: 28px;
	}

	.acsi-hero__azioni {
		flex-wrap: wrap;
	}

	/* L'immagine era "position: absolute" pensata per il bleed a destra su
	   desktop — su mobile restava lì, sovrapposta al testo invece di
	   scendere sotto. Torna in flusso normale, sotto il testo. */
	.acsi-hero__immagine-wrapper {
		position: relative;
		inset: auto;
		top: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		margin-top: 32px;
		justify-content: center;
	}

	/* Niente più cerchio su mobile: il ritaglio circolare pensato per la
	   composizione desktop, a schermo stretto, tagliava via gran parte
	   della foto e la rimpiccioliva senza motivo. Rettangolo 16:9 a piena
	   larghezza, con ritaglio (object-fit: cover) invece che l'intera
	   immagine forzata in un cerchio. */
	.acsi-hero__immagine {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: var(--raggio-bordo-card, 12px);
		margin: 0;
	}

	/* Decorazioni pensate per la composizione desktop (anello e foglia
	   posizionati in percentuale rispetto al bleed a destra) — su mobile,
	   con l'immagine centrata e più piccola, finivano scomposte o fuori
	   posto. Tolte per non affollare uno spazio già stretto. */
	.acsi-hero__anello,
	.acsi-hero__foglia,
	.acsi-hero__pallino-verde {
		display: none;
	}
}