/*
 * Pagine a sezioni diverse dalla home (Chi siamo, Contatti) e modulo di
 * contatto: solo classi nuove, costruite sui token e sui componenti del mockup.
 */

/* Storia: stessa sezione "reading" della home, con titolo. */
.page-story h2 {
	margin-bottom: 30px;
}

.page-story h2 > span {
	color: var(--blue);
}

.page-story .reading-intro {
	margin-bottom: 0;
}

/*
 * Loghi dei clienti: griglia in scala di grigi, il logo torna a colori al
 * passaggio del mouse (la transizione si spegne con prefers-reduced-motion
 * tramite la regola globale del mockup).
 */
.clients {
	border-top: 1px solid var(--line);
}

.clients h2 {
	margin-bottom: 18px;
}

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

.clients .clients-note {
	max-width: 720px;
	margin-bottom: 44px;
}

.clients-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}

.clients-grid > li {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
}

.clients-grid img {
	display: block;
	width: 100%;
	max-width: 174px;
	height: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s, opacity 0.2s;
}

.clients-grid > li:hover img {
	filter: none;
	opacity: 1;
}

@media (max-width: 1200px) {

	.clients-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 950px) {

	.clients-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {

	.clients .clients-note {
		margin-bottom: 32px;
	}

	.clients-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.clients-grid > li {
		padding: 14px;
	}
}

@media (max-width: 480px) {

	.clients-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * "Come nasce": titolo a sinistra / testo a destra come .expertise-heading
 * del mockup, ma con tre paragrafi diretti invece di uno solo, quindi
 * l'allineamento in fondo alla riga (align-items:end, adatto a un solo breve
 * paragrafo) diventa "start" e i paragrafi, che nel mockup non hanno margine
 * verticale proprio (unico paragrafo), qui hanno uno spazio tra loro. Le due
 * card sotto sono .expertise-card invariate (2 colonne, 1 sotto 720px: regola
 * del mockup, non toccata). Il link finale riusa .text-link del mockup, qui
 * reso blu per coerenza con gli altri usi fuori dall'header scuro (come
 * .deliverables e .evidence in home-extra.css).
 */
.spinoff .expertise-heading {
	align-items: start;
}

.spinoff .expertise-heading > p + p {
	margin-top: 20px;
}

.spinoff .text-link {
	color: var(--blue);
}

.spinoff .spinoff-link {
	margin-top: 40px;
}

@media (max-width: 720px) {

	.spinoff .spinoff-link {
		margin-top: 30px;
	}
}

/* Recapiti: tre card sul modello di .expertise-card. */
.contact-channels {
	background: #f1f5fb;
	border-top: 1px solid #e0e7f0;
}

.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.contact-cards .expertise-card p {
	margin-bottom: 10px;
}

.contact-cards .expertise-card p:last-child {
	margin-bottom: 0;
}

.contact-cards a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-color: #b9cbe8;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}

.contact-cards a:hover {
	text-decoration-color: currentcolor;
}

/* Modulo di contatto. */
.contact-form-section .contact-grid {
	align-items: start;
}

.cwv-contact-form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cwv-contact-form p {
	margin: 0;
}

.cwv-contact-field label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.875rem;
	font-weight: 500;
}

.cwv-contact-required {
	font-weight: 400;
	color: var(--muted);
}

.cwv-contact-field input,
.cwv-contact-field textarea {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #c3ccd8;
	border-radius: 3px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.cwv-contact-field textarea {
	min-height: 170px;
	resize: vertical;
}

.cwv-contact-field input:focus-visible,
.cwv-contact-field textarea:focus-visible,
.cwv-contact-privacy input:focus-visible {
	outline: 3px solid var(--bright);
	outline-offset: 2px;
	border-color: var(--blue);
}

.cwv-contact-privacy {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--muted);
}

.cwv-contact-privacy input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--blue);
}

.cwv-contact-privacy a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cwv-contact-form .button {
	align-self: flex-start;
	cursor: pointer;
	font-family: inherit;
}

.cwv-contact-field [aria-invalid="true"],
.cwv-contact-privacy [aria-invalid="true"] {
	border-color: #c5221f;
	outline: 1px solid #c5221f;
}

.cwv-contact-notice:focus {
	outline: 3px solid var(--bright);
	outline-offset: 2px;
}

.cwv-contact-notice {
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-left-width: 4px;
	border-radius: 3px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.cwv-contact-notice.is-success {
	border-color: #b7dfc3;
	border-left-color: #188038;
	background: #eef8f1;
	color: #0d652d;
}

.cwv-contact-notice.is-error {
	border-color: #f3c2bd;
	border-left-color: #c5221f;
	background: #fdf0ef;
	color: #a50e0e;
}

/* Illustrazione sotto "Raccontaci il tuo progetto.", come quelle della home. */
.contact-form-section .contact-illustration {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-top: 40px;
}

@media (max-width: 720px) {

	.contact-form-section .contact-illustration {
		max-width: 360px;
		margin: 28px auto 0;
	}
}

/*
 * Mappa (blocco cwv/map): altezza riservata con --cwv-map-h, quindi nessun CLS
 * quando l'iframe (lazy, sotto la piega) viene caricato.
 */
.contact-map {
	border-top: 1px solid var(--line);
}

.cwv-map {
	width: 100%;
	margin: 0;
}

.cwv-map iframe {
	display: block;
	width: 100%;
	height: var(--cwv-map-h, 420px);
	border: 0;
	border-radius: 10px;
	background: var(--soft);
}

.cwv-map.is-grayscale iframe {
	filter: grayscale(100%);
}

.cwv-map figcaption {
	margin-top: 18px;
}

/* Stesso stile di .text-link del mockup. */
.cwv-map figcaption a {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--blue);
}

.cwv-map figcaption a:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Anteprima statica nell'editor: nessuna richiesta a Google da wp-admin. */
.cwv-map-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--cwv-map-h, 420px);
	border: 1px dashed #b8c2cf;
	border-radius: 10px;
	background: #eceff3;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.875rem;
	text-align: center;
}

/*
 * Contrasto WCAG AA (≥ 4,5:1), come in blog.css: stessa tinta del mockup, solo
 * più scura, per le sezioni della home riusate qui. La home resta identica al
 * mockup perché questo file non vi viene caricato.
 */
.contact-grid .eyebrow {
	color: #576f8f;
}

.contact-grid .mono-label {
	color: #646e7e;
}

.contact-alt {
	color: #5c6f8a;
}

.domain {
	color: #6e757f;
}

.footer-top > span {
	color: #6c7684;
}

.source-note {
	color: #6b7686;
}

@media (max-width: 950px) {

	.contact-cards {
		grid-template-columns: 1fr;
		gap: 23px;
	}
}

/*
 * Sotto 720px mappa più bassa: !important per prevalere sulla variabile
 * inline del blocco.
 */
@media (max-width: 720px) {

	.cwv-map,
	.cwv-map-preview {
		--cwv-map-h: 320px !important;
	}
}