/**
 * Recapiti — elenco di telefono, email e sede.
 *
 * Vive dentro alla colonna di testo di `story-split`, sotto all'invito: la
 * composizione a due colonne la porta quel componente, qui c'è solo l'elenco.
 *
 * Nel riferimento è una `<ul>` con `<li>`; qui sono gruppi, come già per le tre
 * voci di "A Napoli All Day". Si perde la semantica di elenco e si guadagna un
 * blocco modificabile: è il compromesso che il tema ha già scelto una volta, e
 * cambiarlo per una sezione sola vorrebbe dire averne due.
 *
 * L'icona è disegnata da due pseudo-elementi: il tondo di carta e, sopra, la
 * sagoma tinta di rosso da una maschera. Due e non uno perché il tondo e il
 * segno hanno colori diversi, e una maschera sola li prenderebbe entrambi.
 * Stando fuori dal markup non entrano nell'albero di accessibilità, dove non
 * avrebbero niente da aggiungere all'etichetta che le sta accanto.
 */

.contatti-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* L'elenco sta nella colonna di `story-split`, che dà 20px fra i suoi figli:
   qui ne servono 32, perché è un blocco a sé e non la riga successiva dello
   stesso discorso. Due classi per battere la regola di flusso di core, che ne
   pesa una. */
.wp-block-group.story-split__copy > .contatti-list {
	margin-block-start: 32px;
}

.wp-block-group.contatti-list > * {
	margin-block-start: 0;
}

/* --- La singola voce ---------------------------------------------------- */

.contatti-list__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
}

.wp-block-group.contatti-list__item > * {
	margin-block-start: 0;
}

/* Il tondo. `flex: 0 0 44px` e non una semplice larghezza: in una riga
   flessibile una scatola con larghezza dichiarata si lascia comunque
   restringere, e su schermo stretto il tondo diventerebbe un ovale. */
.contatti-list__item::before {
	content: "";
	flex: 0 0 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--paper);
}

/* La sagoma, centrata sul tondo: 22px come nel riferimento. */
.contatti-list__item::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 11px;
	width: 22px;
	height: 22px;
	transform: translateY( -50% );
	background-color: var(--wp--preset--color--rosso);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.contatti-list__item--telefono::after {
	-webkit-mask-image: var(--cn-media-icona-telefono);
	mask-image: var(--cn-media-icona-telefono);
}

.contatti-list__item--email::after {
	-webkit-mask-image: var(--cn-media-icona-email);
	mask-image: var(--cn-media-icona-email);
}

.contatti-list__item--sede::after {
	-webkit-mask-image: var(--cn-media-icona-sede);
	mask-image: var(--cn-media-icona-sede);
}

/* --- Etichetta e valore ------------------------------------------------- */

.contatti-list__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wp-block-group.contatti-list__text > * {
	margin-block-start: 0;
}

.contatti-list__label {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	/* Il riferimento non la dichiara: eredita l'1,55 del body, mentre qui la
	   radice dà 1,6. Su tre voci la differenza si somma e accorcia l'elenco. */
	line-height: 1.55;
}

/* Il valore resta senza sottolineatura: l'etichetta sopra lo qualifica già e
   il tondo colorato accanto dice che è un recapito. Al passaggio e al fuoco
   diventa rosso; il contorno del fuoco lo disegna il browser, quindi resta
   visibile anche per chi naviga da tastiera. */
.contatti-list__value {
	font-style: normal;
	line-height: 1.55;
}

.contatti-list__value a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.contatti-list__value a:hover,
.contatti-list__value a:focus-visible {
	color: var(--wp--preset--color--rosso);
}

@media ( prefers-reduced-motion: reduce ) {
	.contatti-list__value a {
		transition: none;
	}
}