/*
 * 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 {
	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: -0.72px;
	font-weight: 400;
	color: var(--ink);
}

@media (max-width: 720px) {

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

/* HEADING-PARITY:END */

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

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

/* Numeri più scuri di quelli del metodo (#91969c): 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 */

/*
 * "Il percorso" (pattern home-journey, generato da tools/service-page.mjs):
 * il diagramma animato delle pagine dei piani, su sfondo grigio a piena
 * larghezza; versione verticale sotto i 720px.
 */
.home-journey {
	background: var(--soft);
}

.home-journey h2 > span {
	color: var(--blue);
}

.home-journey .service-journey-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.home-journey .service-journey-v {
	display: none !important;
}

.home-journey .service-journey-figure .service-journey-v {
	max-width: 520px;
	margin-inline: auto;
}

@media (max-width: 720px) {

	.home-journey .service-journey-h {
		display: none !important;
	}

	.home-journey .service-journey-v {
		display: block !important;
	}
}

/*
 * "Non sei l'unico a pagare" (pattern home-collateral): i danni di un sito
 * infetto per gli altri, su sfondo bianco, con accento rosso per l'urgenza e
 * invito ad agire verso i prezzi.
 */
.collateral h2 > span {
	color: #c5221f;
}

.collateral .benefits-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.collateral .benefits-grid article {
	border-top: 2px solid #c5221f;
}

.collateral .mono-label {
	color: #a31b18;
}

.collateral .benefits-grid h3 {
	font-size: 1.75rem;
}

.collateral-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 56px;
	padding: 28px 32px;
	border-radius: 12px;
	background: #fdf0ef;
}

.collateral-action p {
	max-width: 720px;
	margin: 0;
	font-size: 1.0625rem;
	color: var(--ink);
}

.collateral-action .button {
	flex-shrink: 0;
	background: #c5221f;
	border-color: #c5221f;
}

.collateral-action .button:hover {
	background: #8a1714;
	border-color: #8a1714;
}

/*
 * Riquadro agganciato (assets/js/collateral-dock.js): sticky a 40px dal
 * fondo, largo quanto il contenuto, con la ✕ e l'ombra; nascosto sopra
 * Prezzi, chiusura e footer. Il segnaposto tiene il suo spazio nella sezione.
 */
.collateral-action {
	transition: box-shadow 0.3s ease;
}

/*
 * Bordo rosso animato che gira intorno al riquadro: anello disegnato da un
 * gradiente conico in rotazione (--rmw-beam, @property in mockup.css), 1px
 * nella sezione e 2px quando è agganciato in basso. È un livello sopra lo
 * sfondo, quindi le misure del riquadro non cambiano.
 */
@property --rmw-beam {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.collateral-action {
	--rmw-beam-width: 1px;
	position: relative;
}

.collateral-action.is-floating {
	--rmw-beam-width: 2px;
}

.collateral-action::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: var(--rmw-beam-width);
	border-radius: inherit;
	background: conic-gradient(from var(--rmw-beam), rgb(197 34 31 / 18%) 0deg 240deg, #c5221f 320deg, #ff8a87 345deg, rgb(197 34 31 / 18%) 360deg);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: rmw-beam 3.2s linear infinite;
	pointer-events: none;
}

@keyframes rmw-beam {

	to {
		--rmw-beam: 360deg;
	}
}

.collateral-action-close {
	display: none;
}

.collateral-action.is-floating {
	position: fixed;
	z-index: 15;
	right: 0;
	bottom: 40px;
	left: 0;
	width: min(1440px, calc(100% - 80px));
	margin: 0 auto;
	box-shadow: 0 18px 44px rgb(10 17 45 / 24%);
	transition:
		box-shadow 0.3s ease,
		opacity 0.25s ease,
		transform 0.25s ease;
}

.collateral-action.is-floating.is-covered {
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0s linear 0.25s;
}

.collateral-action.is-floating .collateral-action-close {
	position: absolute;
	top: -14px;
	right: -14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #f3c2bd;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	font-size: 0.75rem;
	box-shadow: 0 4px 12px rgb(10 17 45 / 18%);
	cursor: pointer;
}

.collateral-action-close:hover {
	border-color: #c5221f;
	color: #c5221f;
}

.collateral-action-close:focus-visible {
	outline: 3px solid var(--bright);
	outline-offset: 2px;
}

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

	.collateral-action::before {
		animation: none;
	}

	.collateral-action,
	.collateral-action.is-floating,
	.collateral-action.is-floating.is-covered {
		transition: none;
	}
}

@media (max-width: 1199px) {

	.collateral-action.is-floating {
		width: calc(100% - 64px);
	}

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

@media (max-width: 720px) {

	.collateral .benefits-grid {
		grid-template-columns: 1fr;
		gap: 31px;
	}

	.collateral-action {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 40px;
		padding: 24px;
	}
}