/*
 * F03 — box "Servizi per Privati" e "Servizi per Aziende".
 *
 * Colori di sfondo: "aziende" riprende l'arancione brand (var(--color-brand-orange),
 * già confermato in palette); "privati" (var(--color-box-privati)) è stato
 * campionato dall'immagine di riferimento servizi_privati.png, poi
 * confermato dal valore esatto in Figma (77:147, #f2bd79).
 *
 * Immagine: Figma (77:146/147) non contiene l'illustrazione (persona con
 * bidone) come nodo esportabile, solo lo sfondo colorato — stessa
 * situazione della mascotte dell'hero (asset "gif" mai fornito). Le
 * immagini bidone-aziende.svg/bidone-privati.svg sono un segnaposto non
 * definitivo — vedi docs/template-parts.md § Box Servizi.
 */
.box-servizi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1594px;
	margin: 0 auto;
	gap: 10px;
	padding: 4rem 2rem;
}

.box-servizio {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: auto;
	padding: 0 2.5rem 60px 70px;
	overflow: visible;
	color: var(--color-white);
	border-radius: 90px;
}

.box-servizio--privati {
	background: var(--color-box-privati);
}

.box-servizio--aziende {
	background: var(--color-brand-orange);
}

.box-servizio__immagine {
	position: absolute;
	top: -190px;
	right: 50px;
	z-index: 1;

	/* Si ridimensiona insieme al box: 270px è il tetto massimo (desktop). */
	width: clamp(120px, 35%, 270px);
	height: auto;
}

.box-servizio__titolo {
	width: 340px;
	margin: 180px 0 73px;
	font-family: var(--font-geologica);

	/* Scala con la larghezza della finestra, 56px è il tetto massimo (desktop). */
	font-size: clamp(1.75rem, 5vw, 56px);
	font-weight: 900;
	text-transform: capitalize;
}

.box-servizio__testo {
	max-width: 620px;
	margin: 0 0 40px;
	font-family: var(--font-titles);
	font-size: clamp(1rem, 2.2vw, 26px);
	line-height: 1.5;
}

.box-servizio__cta {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-geologica);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
	text-transform: uppercase;
	background: var(--color-green);
	border-radius: var(--radius-pill);
}

/*
 * Sopra i 1024px i due box si ridimensionano fluidamente uno accanto
 * all'altro (`flex: 1 1 0`, senza una larghezza fissa) e restano sempre
 * affiancati. Sotto i 1024px vengono impilati: un gap verticale di 210px
 * evita che l'immagine sporgente di un box (margine negativo in alto) si
 * sovrapponga al box precedente nello stack.
 */
@media (width <= 1023px) {
	.box-servizi {
		flex-direction: column;
		align-items: center;
		gap: 210px;
	}

	.box-servizio {
		flex: 0 1 auto;
		width: 100%;
		max-width: 760px;
	}
}

@media (width <= 767px) {
	.box-servizi {
		gap: 200px;
	}

	.box-servizio {
		max-width: none;
		padding: 2.5rem 1.5rem 2rem;
		border-radius: 40px;
	}

	.box-servizio__immagine {
		top: -180px;
		width: min(180px, 55%);
	}

	.box-servizio__titolo {
		width: auto;

		/*
		 * Margine sopra sufficiente a non far sovrapporre il titolo
		 * all'immagine, che sporge di 180px sopra il box e rientra al suo
		 * interno per circa 100px (in base alla proporzione dell'SVG
		 * segnaposto usato).
		 */
		margin: 110px 0 1rem;
	}

	.box-servizio__testo {
		max-width: none;
		margin: 0 0 1.5rem;
	}
}