/* ==========================================================================
   Blocco: Territori (csp-terr)
   - .csp-terr-wrap → fascia a tutta larghezza del viewport con colore di
                      fondo (background inline dalla view)
   - .csp-terr      → container interno centrato, griglia a 3 colonne:
                      titolo, sottotitolo e selettore città occupano la riga
                      intera, le card una colonna ciascuna
   Stili di città e card: vedi territori-citta/style.css e
   territori-card/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper a tutta larghezza ("full bleed")
   -------------------------------------------------------------------------- */
.csp-terr-wrap {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 4.5rem 0 3.5rem;
	box-sizing: border-box;
}

/* 100vw include la scrollbar verticale su Windows/Linux: evita la scrollbar
   orizzontale. "clip" non crea un contesto di scroll e non rompe sticky. */
body:has(.csp-terr-wrap) {
	overflow-x: clip;
}

/* Nell'editor il blocco è già "align full": niente 100vw. */
.editor-styles-wrapper .csp-terr-wrap {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* --------------------------------------------------------------------------
   Container interno + griglia
   -------------------------------------------------------------------------- */
.csp-terr {
	--csp-terr-gap: 3rem;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--csp-terr-gap);
	max-width: 1020px;
	margin: 0 auto;
	padding: 0 2rem;
	box-sizing: border-box;
}

/* Tutto ciò che non è una card occupa la riga intera. */
.csp-terr > *:not(.csp-terr-card) {
	grid-column: 1 / -1;
}

.csp-terr-wrap .csp-terr h2 {
	font-family: "Gelasio";
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #0E693A;
	margin: 0 0 0.5rem;
}

.csp-terr-wrap .csp-terr .csp-terr__subtitle {
	font-family: "Gelasio";
	font-size: 24px;
	line-height: 1.4;
	text-align: center;
	color: #0E693A;
	margin: 0 0 3rem;
}

@media (max-width: 900px) {
	.csp-terr {
		--csp-terr-gap: 1.5rem;
	}
	.csp-terr-wrap .csp-terr h2 {
		font-size: 36px;
	}
	.csp-terr-wrap .csp-terr .csp-terr__subtitle {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.csp-terr-wrap {
		padding: 3.5rem 0 2.5rem;
	}
	.csp-terr {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 1.5rem;
	}
	.csp-terr-wrap .csp-terr h2 {
		font-size: 30px;
	}
	.csp-terr-wrap .csp-terr .csp-terr__subtitle {
		font-size: 18px;
		margin-bottom: 2rem;
	}
}