/*
 * Sezioni aggiunte alla home dopo il mockup (pattern home-evidence,
 * home-onboarding, home-agencies): solo le classi nuove, sui componenti del
 * mockup. Caricato solo dove queste sezioni sono presenti (inc/assets.php).
 */

/*
 * "Cosa comprende il lavoro" (.deliverables): sfondo a piena larghezza del
 * viewport pur restando .container, come .business. L'inset verticale di 1px
 * rifila l'antialiasing del clip-path ai bordi. Deviazione voluta dal mockup
 * (dettagli in README, sezione 6; la stessa regola è applicata anche al
 * mockup in tests/e2e/visual.spec.ts prima delle baseline).
 */
.deliverables {
	background: var(--soft);
	box-shadow: 0 0 0 100vmax var(--soft);
	clip-path: inset(1px -100vmax);
}

.onboarding h2 > span,
.evidence h2 > span,
.video h2 > span {
	color: var(--blue);
}

/*
 * .deliverables h2 e .reading-heading h2 allineati allo stesso stile di
 * .plugin-limits-heading h2 (la regola di base del mockup per h2, senza
 * override proprio). Deviazione voluta dal mockup (dettagli in README,
 * sezione 6; headingParityRules() in tests/e2e/normalize.ts legge questi
 * marcatori HEADING-PARITY e li applica anche al mockup prima delle
 * baseline).
 */

/* HEADING-PARITY:START */
.deliverables h2,
.reading-heading h2 {
	font-size: clamp(2.2rem, 3.2vw, 3.25rem);
	line-height: 1.16;
	letter-spacing: -1.6px;
	font-weight: 500;
	color: var(--ink);
}

@media (max-width: 720px) {

	.deliverables h2,
	.reading-heading h2 {
		font-size: 2.125rem;
		line-height: 1.17;
		letter-spacing: -1px;
	}
}

/* HEADING-PARITY:END */

/* Prima di iniziare: .steps del metodo, su due colonne. */
.onboarding {
	border-top: 1px solid #e9edf2;
}

.onboarding .steps {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 32px;
}

/* Numeri più scuri di quelli del metodo (#8b94a2): contrasto AA su bianco. */
.onboarding .step-top {
	color: var(--muted);
}

/* Web agency: .expertise-card, tre su una riga. */
.agencies .expertise-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agencies .expertise-card p {
	margin-bottom: 0;
}

.agencies-cta {
	margin-top: 44px;
}

/* Dati pubblici: .benefits-grid su quattro colonne. */
.evidence .benefits-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.evidence .benefits-grid article {
	display: flex;
	flex-direction: column;
}

.evidence .evidence-figure {
	margin: 18px 0 14px;
	font-size: 2.25rem;
	line-height: 1.15;
	letter-spacing: -1.2px;
	font-weight: 500;
	color: var(--blue);
	font-variant-numeric: tabular-nums;
}

.evidence .text-link {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 18px;
	color: var(--blue);
}

@media (max-width: 1199px) {

	.evidence .benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 28px;
	}
}

@media (max-width: 950px) {

	.agencies .expertise-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {

	.onboarding .steps,
	.evidence .benefits-grid {
		grid-template-columns: 1fr;
		gap: 31px;
	}

	.evidence .evidence-figure {
		font-size: 2rem;
	}

	.agencies-cta {
		margin-top: 32px;
	}
}

/* Illustrazioni in fondo ai titoli (tools/home-additions.json). */

/* HOME-ADDITIONS:START */
.symptoms-heading .symptoms-illustration,
.faq .faq-illustration {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-top: 40px;
}

@media (max-width: 720px) {

	.symptoms-heading .symptoms-illustration,
	.faq .faq-illustration {
		max-width: 360px;
		margin: 28px auto 0;
	}
}

/* HOME-ADDITIONS:END */

/*
 * Video con copertina (blocco cwv/video): prima del clic solo l'immagine,
 * lazy, con proporzioni riservate (nessun CLS). Il pulsante play sta nello
 * spazio libero in basso a sinistra della copertina. Fondo grigio chiaro
 * come .business.
 */
.video {
	background: var(--soft);
}

.video-player {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: var(--dark);
	box-shadow: 0 28px 60px -34px rgba(19, 36, 60, 0.6);
}

.video-player img,
.video-player video {
	display: block;
	width: 100%;
	height: 100%;
}

.video-player video {
	object-fit: contain;
	background: var(--dark);
}

.video-cover {
	display: block;
	position: relative;
	height: 100%;
	color: #fff;
}

.video-cover:focus-visible {
	outline: 3px solid #fbbc04;
	outline-offset: -3px;
}

.video-play {
	position: absolute;
	left: 8.6%;
	top: 69%;
	display: flex;
	align-items: center;
	gap: 16px;
}

.video-play-icon {
	display: grid;
	place-items: center;
	width: clamp(44px, 6vw, 76px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #4285f4;
	box-shadow: 0 0 0 8px rgba(66, 133, 244, 0.22);
	transition: transform 0.2s, background-color 0.2s;
}

.video-play-icon::before {
	content: "";
	width: 30%;
	height: 34%;
	margin-left: 8%;
	background: #fff;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.video-cover:hover .video-play-icon,
.video-cover:focus-visible .video-play-icon {
	transform: scale(1.08);
	background: #5a95f5;
}

.video-play-label {
	font-size: clamp(0.875rem, 1.4vw, 1.125rem);
	font-weight: 500;
}

.video-play-label > span {
	margin-left: 6px;
	font-family: var(--mono);
	color: #aebdd3;
}

@media (prefers-reduced-motion: reduce) {

	.video-play-icon {
		transition: none;
	}
}

@media (max-width: 720px) {

	.video-player {
		border-radius: 10px;
	}

	.video-play {
		top: 68%;
	}

	.video-play-icon {
		width: 40px;
		box-shadow: 0 0 0 5px rgba(66, 133, 244, 0.22);
	}

	.video-play-label {
		display: none;
	}
}