/*
 * Contatti: recapiti e come arrivare affiancati, mappa a tutta larghezza sotto.
 * La facciata della mappa (.cn-mappa) è un componente del tema: qui si dà solo
 * il posto dove sta.
 */

.cn-contatti {
	display: grid;
	gap: clamp(2rem, 5vw, 3.6rem) clamp(2rem, 5vw, 4.5rem);
}

.cn-contatti__blocco {
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: var(--cn-filetto) solid var(--cn-bordo);
}

.cn-contatti__etichetta {
	font-family: var(--cn-font-testo);
	font-size: var(--cn-occhiello-corpo);
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cn-rovere-miele);
	margin: 0 0 1rem;
}

.cn-contatti__indirizzo {
	font-family: var(--cn-font-display);
	font-size: var(--cn-titolo-voce);
	line-height: 1.35;
	margin: 0 0 1.2rem;
}

.cn-contatti__recapiti {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}

.cn-contatti__nota,
.cn-contatti__arrivare {
	color: var(--cn-inchiostro-tenue);
	font-size: var(--cn-corpo-piccolo);
	max-width: 48ch;
}

.cn-contatti__arrivare {
	display: grid;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.55;
}

.cn-contatti__arrivare li {
	position: relative;
	padding-left: 1.4rem;
}

.cn-contatti__arrivare li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.7rem;
	height: var(--cn-filetto);
	background-color: var(--cn-rovere-miele);
}

.cn-contatti__nota {
	margin: 0 0 0.8rem;
}

.cn-contatti__azione {
	margin: 0;
	font-size: var(--cn-corpo-piccolo);
}

.cn-contatti__mappa {
	margin-top: clamp(1rem, 3vw, 2rem);
}

@media (min-width: 60rem) {
	.cn-contatti {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	}

	.cn-contatti__mappa {
		grid-column: 1 / -1;
	}
}