/*
 * Sezione 5 - Dove Siamo / Contatti (.pz-dove-siamo-*)
 * Due colonne: blocco info di contatto a sinistra, preview mappa
 * (screenshot reale, cliccabile verso Google Maps) a destra - ordine nel
 * markup: .pz-dove-siamo__info poi .pz-dove-siamo__map (nessun "order" CSS,
 * il grid segue il DOM). NB: indirizzo/telefono/orari nel blocco HTML
 * restano placeholder da confermare col locale.
 */

/* .pz-dove-siamo, a differenza delle altre sezioni, non ha un contenitore
 * max-width:1100px centrato (e' a piena larghezza per la mappa full-bleed).
 * padding-left calcolato per far coincidere l'inset sinistro del titolo con
 * quello delle altre sezioni: sotto i 1100px+padding ricade su
 * --pz-section-padding-x (identico alle altre), sopra e' semplicemente meta'
 * dello spazio residuo oltre i 1100px (le altre sezioni, con padding di
 * sezione + contenitore centrato senza padding proprio, ottengono lo stesso
 * inset con "sezione-padding + meta' residuo oltre [1100 + 2*padding]" -
 * matematicamente equivalente a "meta' residuo oltre 1100" da solo, senza
 * sommare di nuovo il padding). NB: agisce solo sul bordo sinistro del grid
 * (colonna info), la mappa (colonna 2) non e' influenzata. */
.pz-dove-siamo {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	padding-bottom: 50px;
	padding-left: max(var(--pz-section-padding-x), calc((100% - var(--pz-container-max-width)) / 2));
	background-color: var(--pz-color-cream-bg);
}

.pz-dove-siamo__map {
	position: relative;
	min-height: 420px;
	margin: 40px 50px 40px 0;
}

.pz-dove-siamo__map img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pz-dove-siamo__map-link {
	display: block;
	position: absolute;
	inset: 0;
}

.pz-dove-siamo__map-badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background-color: rgba(var(--pz-color-dark-rgb), 0.75);
	color: var(--pz-color-light);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Colonna sinistra: il left-inset del titolo e' gestito dal padding-left
 * del grid .pz-dove-siamo (vedi sopra), qui solo lo spazio verso la mappa
 * (destra). Blocco lista subito sotto il titolo (flex-start, non piu'
 * space-between) - stesso margine sx del titolo per costruzione, essendo
 * entrambi figli diretti senza padding/margin-left propri. */
.pz-dove-siamo__info {
	padding: 40px 48px 40px 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.pz-dove-siamo__title {
	margin: 0 0 32px;
	font-size: clamp(2.07rem, 4.6vw, 2.99rem);
	font-weight: 800;
	color: var(--pz-color-dark);
	text-align: left;
	font-family: var(--pz-font-title);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Selettore con specificita' maggiorata (.pz-dove-siamo + classe, invece
 * della sola classe): Kadence applica ".single-content ul{padding-left:2em}"
 * (0,1,1) ai <ul> dentro il contenuto del post, che altrimenti batte la
 * singola classe qui sotto (0,1,0) e reintroduce ~34px di inset non voluto
 * sulla lista, disallineandola dal titolo. */
.pz-dove-siamo .pz-dove-siamo__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 22px;
	text-align: left;
}

.pz-dove-siamo__list li {
	display: block;
	font-size: 1.352rem;
	line-height: 1.6;
	color: var(--pz-color-text-secondary);
}

.pz-dove-siamo__list strong {
	display: block;
	font-size: 1.076rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pz-color-accent);
	margin-bottom: 4px;
}

.pz-dove-siamo__list a {
	color: var(--pz-color-dark);
	text-decoration: none;
}

.pz-dove-siamo__list a:hover {
	color: var(--pz-color-accent);
}

@media (max-width: 820px) {
	.pz-dove-siamo {
		grid-template-columns: 1fr;
		padding-left: 0;
	}

	.pz-dove-siamo__map {
		min-height: 320px;
		margin: 40px 24px;
	}

	.pz-dove-siamo__info {
		padding: 48px 24px;
	}
}