/**
 * Pagina Servizi (templates/page-servizi.html).
 *
 * Misure prese dal frame Servizi a canvas 1920: hero come le altre pagine
 * interne, elenco dei servizi sui 1466 centrali (apertura su 1172, poi il
 * manifesto a due colonne) e la timeline a tutta larghezza — testo di apertura
 * a sinistra su 567, colonna delle schede a destra su 1154, la linea del
 * percorso in mezzo alle due colonne di schede (498 ciascuna, 158 di vuoto).
 *
 * Hero delle pagine interne e manifesto stanno in `brand.css`: tornano anche
 * su altre pagine.
 */

/* --- Hero --- */

/* Il titolo di Servizi è più lungo di quello di Aziende: nel mock va a capo su
   due righe larghe 978px, quindi la colonna del testo è più larga. Il
   paragrafo resta sui 743 del mock (vedi `brand.css`). */
.dnpa-servizi__hero {
	--dnpa-hero-testo: 1000px;
}

/* --- Timeline --- */

/* Una copertina di WordPress scrive in bianco: questa è chiara come il resto
   della pagina (il blocco lo dichiara con `is-light`) e il testo è il bruno
   del design. */
.wp-block-cover.dnpa-timeline {
	color: var( --wp--preset--color--bruno );
}

/* Apertura e schede stanno in riga e partono dalla stessa altezza: nel design
   la prima scheda è alla stessa quota del titolo di sezione. */
.wp-block-group.dnpa-timeline__riga {
	align-items: flex-start;
}

.dnpa-timeline__intro {
	flex: 567 1 0;
}

.dnpa-timeline__passi {
	/* Il vuoto fra le due colonne di schede: 158px su 1154 nel design. */
	--dnpa-timeline-vuoto: 13.7%;

	/* Il pallino sul filo, e di quanto sporge fuori dalla scheda: sta al centro
	   del vuoto, cioè a 79px dal bordo su canvas 1920. Qui è il 15,87% perché
	   le percentuali di un pallino si contano sulla scheda che lo contiene
	   (498px), non sulla colonna. */
	--dnpa-timeline-pallino: 62px;
	--dnpa-timeline-sporgenza: calc( -15.87% - var( --dnpa-timeline-pallino ) / 2 );

	position: relative;
	flex: 1154 1 0;
}

/* La linea del percorso passa in mezzo alle due colonne e attraversa tutta la
   fascia, imbottitura compresa: nel mock arriva ai due bordi. */
.dnpa-timeline__passi::before {
	content: "";
	position: absolute;
	top: calc( -1 * var( --wp--preset--spacing--60 ) );
	bottom: calc( -1 * var( --wp--preset--spacing--60 ) );
	left: 50%;
	width: 1px;
	background-color: var( --wp--preset--color--terracotta );
}

/* Le schede sono larghe mezza colonna meno metà del vuoto (498 su 1154) e si
   alternano: la prima a destra della linea, la seconda a sinistra. Angoli e
   imbottitura sono quelli delle altre schede del sito; il fondo crema arriva
   dal blocco, così il cliente lo vede anche nell'editor. */
.dnpa-timeline__passo {
	position: relative;
	width: calc( 50% - var( --dnpa-timeline-vuoto ) / 2 );
	margin-inline-start: auto;
	padding: var( --wp--preset--spacing--30 );
	border-radius: var( --wp--custom--foto-radius );
}

.dnpa-timeline__passo:nth-child( even ) {
	margin-inline-start: 0;
}

/* I tre cerchi del design (anello, disco crema, punto terracotta) sono un
   elemento solo, appeso al fianco della scheda che guarda il filo. */
.dnpa-timeline__passo::before {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-start: var( --dnpa-timeline-sporgenza );
	width: var( --dnpa-timeline-pallino );
	height: var( --dnpa-timeline-pallino );
	transform: translateY( -50% );
	border: 1px solid var( --wp--preset--color--terracotta );
	border-radius: 50%;
	/* I raggi sono in percentuale e non in pixel (7 e 17 su 62 nel design) così
	   i tre cerchi restano in proporzione quando il pallino si rimpicciolisce
	   sul telefono. */
	background:
		radial-gradient( circle at center, var( --wp--preset--color--terracotta ) 0 16.5%, transparent 16.5% ),
		radial-gradient( circle at center, var( --wp--preset--color--crema ) 0 40%, transparent 40% );
}

.dnpa-timeline__passo:nth-child( even )::before {
	inset-inline-start: auto;
	inset-inline-end: var( --dnpa-timeline-sporgenza );
}

/* --- Testi delle schede --- */

/* L'etichetta del passo, come l'occhiello delle altre sezioni ma senza
   pallino: 18px maiuscolo e spaziato. Colore e corpo arrivano dal blocco. */
.dnpa-timeline__numero {
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
}

.dnpa-timeline__titolo {
	line-height: 1.4;
}

/* Nel mock la fascia della timeline e quella Contattaci si toccano: due fondi
   pieni uno sull'altro, senza striscia crema in mezzo. */
.dnpa-timeline + .wp-block-template-part {
	margin-block-start: 0;
}

/* --- Responsive: le colonne si impilano, le proporzioni restano --- */

/* Sotto i 1024px l'apertura della timeline va sopra e le schede sotto: in riga
   la colonna delle schede diventerebbe troppo stretta per due colonne. */
@media ( max-width: 1023px ) {
	.wp-block-group.dnpa-timeline__riga {
		flex-wrap: wrap;
	}

	.dnpa-timeline__intro,
	.dnpa-timeline__passi {
		flex-basis: 100%;
	}

	/* Con l'apertura sopra le schede il filo non può più salire fino al bordo
	   della fascia: finirebbe dentro il paragrafo. Parte dalla prima scheda. */
	.dnpa-timeline__passi::before {
		top: 0;
	}
}

/* Alla soglia con cui WordPress impila le colonne la timeline diventa una
   colonna sola (SPEC), ma il percorso resta: il filo passa a sinistra e i
   pallini restano di fianco alle schede, tutti dalla stessa parte (deciso da
   Stefano il 19/8). Il pallino si rimpicciolisce, perché 62px su uno schermo da
   375 si mangerebbero la riga. */
@media ( max-width: 781px ) {
	.dnpa-timeline__passi {
		--dnpa-timeline-pallino: 32px;
		--dnpa-timeline-sporgenza: calc( -1 * ( var( --dnpa-timeline-pallino ) + var( --wp--preset--spacing--30 ) ) );
	}

	.dnpa-timeline__passi::before {
		left: calc( var( --dnpa-timeline-pallino ) / 2 );
	}

	.dnpa-timeline__passo,
	.dnpa-timeline__passo:nth-child( even ) {
		width: auto;
		margin-inline-start: calc( var( --dnpa-timeline-pallino ) + var( --wp--preset--spacing--30 ) );
	}

	.dnpa-timeline__passo:nth-child( even )::before {
		inset-inline-start: var( --dnpa-timeline-sporgenza );
		inset-inline-end: auto;
	}
}

/* --- Foto segnaposto --- */

/* Una foto per fessura; l'inquadratura comune sta in `brand.css`. Ogni regola
   si spegne da sola appena il cliente sceglie la sua foto dal blocco. */

.dnpa-foto--servizi-hero:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/servizi-hero.jpg" );
}

.dnpa-foto--servizi-timeline:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/servizi-timeline.jpg" );
}