/* Pagina localita'. Riusa i token del design system (--pc-*) dove esistono,
   con fallback espliciti per non dipendere dall'ordine di caricamento. */

.paf-location {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.paf-location-breadcrumb {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 16px;
}
.paf-location-breadcrumb a { color: #6b7280; text-decoration: none; }
.paf-location-breadcrumb a:hover { text-decoration: underline; }
.paf-location-breadcrumb .sep { margin: 0 6px; opacity: .5; }
.paf-location-breadcrumb .current { color: #111827; font-weight: 600; }

.paf-location-head h1 {
	font-size: clamp(26px, 4vw, 38px);
	margin: 0 0 6px;
	line-height: 1.15;
}
.paf-location-count { color: #6b7280; margin: 0 0 20px; font-size: 15px; }

/* Il testo editoriale e' il motivo per cui questa pagina esiste: leggibile,
   non compresso, con una misura di riga che non superi i ~75 caratteri. */
.paf-location-intro {
	max-width: 70ch;
	line-height: 1.65;
	color: #374151;
	margin-bottom: 32px;
	font-size: 16px;
}

.paf-location-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.paf-location-card {
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .18s ease, transform .18s ease;
}
.paf-location-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.paf-location-card-img {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f3f4f6;
}
.paf-location-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.paf-location-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--pc-accent, #c8e600);
	color: #1f2937;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.paf-location-card-body { padding: 14px 16px 16px; }
.paf-location-card-body h2 { font-size: 17px; margin: 0 0 6px; line-height: 1.3; }
.paf-location-card-body h2 a { color: #111827; text-decoration: none; }
.paf-location-card-body h2 a:hover { text-decoration: underline; }

.paf-location-addr { font-size: 13px; color: #6b7280; margin: 0 0 10px; }

.paf-location-meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: #4b5563;
}

.paf-location-empty {
	padding: 32px;
	text-align: center;
	color: #6b7280;
	background: #f9fafb;
	border-radius: 12px;
}

.paf-location-related { margin-top: 40px; }
.paf-location-related h2 { font-size: 18px; margin-bottom: 12px; }
.paf-location-related ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0;
}
.paf-location-related a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	font-size: 14px;
	color: #374151;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.paf-location-related a:hover { border-color: #9ca3af; background: #f9fafb; }

@media (max-width: 640px) {
	.paf-location { padding: 16px 12px 32px; }
	.paf-location-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
	.paf-location-card-body { padding: 10px 12px 12px; }
	.paf-location-card-body h2 { font-size: 15px; }
}

/* ── Testo introduttivo con "leggi tutto" ─────────────────────────────
   Il testo sta in ALTO (Google pesa di piu' cio' che viene prima nel
   documento) ma non deve spingere i risultati sotto la piega: si mostrano
   ~2 righe e il resto e' nel DOM, solo troncato via CSS. Nessun caricamento
   differito: il crawler legge tutto comunque. */
.paf-location-intro { position: relative; }

.paf-location-intro.is-clamped .paf-location-intro-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.paf-location-more {
	background: none;
	border: 0;
	padding: 4px 0 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	text-decoration: underline;
	cursor: pointer;
}
.paf-location-more:hover { opacity: .7; }

/* ── Switch entita' in zona ───────────────────────────────────────────
   Accessorio, non in primo piano: la pagina parla di alloggi. */
.paf-location-switch {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 20px;
	font-size: 14px;
}
.paf-location-switch-label { color: #6b7280; }
.paf-location-switch a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	color: #374151;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.paf-location-switch a:hover { border-color: #9ca3af; background: #f9fafb; }

/* ── Mappa ────────────────────────────────────────────────────────────
   Sotto il testo e sopra la griglia: da' il colpo d'occhio geografico che
   e' il modo in cui su PAF si guardano gli alloggi, senza rubare la scena
   al contenuto indicizzabile. */
.map-location {
	width: 100%;
	height: 380px;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 24px;
	background: #eef2f5;
}

@media (max-width: 640px) {
	.map-location { height: 260px; margin-bottom: 16px; }
	.paf-location-intro.is-clamped .paf-location-intro-text { -webkit-line-clamp: 3; }
}

/* ── Indice delle localita' (/localita) ─────────────────────────────── */
.paf-location-index-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}
.paf-location-index-list a {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	text-decoration: none;
	color: #111827;
	transition: border-color .15s ease, background .15s ease;
}
.paf-location-index-list a:hover { border-color: #9ca3af; background: #f9fafb; }
.paf-location-index-list .nome { font-weight: 600; }
.paf-location-index-list .comune { font-size: 13px; color: #6b7280; }
.paf-location-index-list .conteggio {
	margin-left: auto;
	font-size: 13px;
	color: #6b7280;
	background: #f3f4f6;
	border-radius: 999px;
	padding: 2px 9px;
}

/* ── Intestazione editoriale dentro il template di ricerca ────────────
   Vive nel pannello dei risultati, sopra la griglia: la mappa resta dov'e'
   e la pagina si comporta esattamente come /ricerca. */
/* Intestazione SOPRA entrambe le colonne, a piena larghezza (scelta
   dell'utente): sta prima di .layout-x, quindi mappa e griglia partono
   sotto. Allineata alla stessa larghezza del layout per non sfalsare i
   margini. */
.paf-loc-head {
	width: 100%;
	max-width: 1534px;
	padding: 0 0 20px;
}

.paf-loc-crumbs {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 8px;
}
.paf-loc-crumbs a { color: #6b7280; text-decoration: none; }
.paf-loc-crumbs a:hover { text-decoration: underline; }
.paf-loc-crumbs span { margin: 0 5px; opacity: .5; }
.paf-loc-crumbs strong { color: #111827; font-weight: 600; }

.paf-loc-h1 {
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.15;
	margin: 0 0 10px;
	/* Gli h1 del tema hanno padding: 0 5px, che qui disallineava il titolo
	   rispetto a breadcrumb e testo (misurato: 5px di rientro). */
	padding: 0;
}

/* Il testo sta in alto perche' Google pesa di piu' cio' che viene prima nel
   documento, ma e' clampato per non spingere i risultati sotto la piega: il
   contenuto e' comunque tutto nel DOM, quindi il crawler lo legge intero. */
.paf-loc-intro {
	/* A tutta larghezza (scelta dell'utente): il testo e' clampato a 2 righe,
	   quindi non crea il muro che una misura di riga stretta serve a evitare.
	   Aperto con "Leggi tutto" resta leggibile perche' le righe sono poche. */
	max-width: none;
	line-height: 1.6;
	color: #374151;
	font-size: 15px;
	margin-bottom: 0;
}
.paf-loc-intro.is-clamped .paf-loc-intro-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.paf-loc-more {
	background: none;
	border: 0;
	padding: 4px 0 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	text-decoration: underline;
	cursor: pointer;
}
.paf-loc-more:hover { opacity: .7; }

/* Caroselli esperienze/convenzioni.
   Stanno DENTRO la colonna dei risultati: il layout listing lega le altezze
   al viewport e non prevede contenuto dopo </main>, quindi qualsiasi cosa
   messa li' si sovrappone a mappa e footer. Dentro la colonna il flusso e'
   normale e la pagina si allunga come deve.
   I blocchi arrivano da home/scheda immobile, dove vivono a piena larghezza:
   qui vanno contenuti, altrimenti sfondano la colonna. */
/* Caroselli DOPO il layout a due colonne.
   Perche' non dentro: misurato nel browser, .results-grid su desktop e'
   un'area a scorrimento interno (max-height:83vh, overflow-y:auto)
   dimensionata per affiancare la mappa. Un blocco aggiunto li' si somma a
   quell'altezza fissa e sfora: main restava 892px mentre il pannello
   arrivava a 2014, con 1022px di footer sovrapposto al contenuto.

   main e' display:flex con justify-content:center, quindi un secondo figlio
   si affiancherebbe come colonna: sulla sola pagina localita' si impila in
   verticale. La ricerca normale non ha questo blocco e resta invariata. */
.page-x--listing:has(.paf-loc-head) {
	flex-direction: column;
	/* NON align-items:center: schiaccerebbe .layout-x sul contenuto, e quel
	   grid deve restare largo quanto il contenitore per tenere le due
	   colonne (misurato: mappa scesa a 219px e griglia sfuggita a 1418).
	   I figli si centrano da soli con margin auto. */
	align-items: stretch;
}

/* Stessi margini laterali della ricerca.
   .layout-x su /ricerca ha margin: 0 33px che, sommati ai 18px di padding di
   main, danno 51px per lato. Impostando margin-left/right:auto quel valore
   veniva azzerato e la pagina localita' arrivava a filo dello schermo (18px
   invece di 51), risultando piu' larga e senza respiro ai lati.
   Il centraggio arriva comunque da max-width + auto sui margini residui. */
.page-x--listing:has(.paf-loc-head) > .paf-loc-head,
.page-x--listing:has(.paf-loc-head) > .layout-x,
.page-x--listing:has(.paf-loc-head) > .paf-loc-extra {
	/* Larghezza e centratura identiche a /ricerca, che ha .layout-x con
	   max-width:1500px e margin: 0 33px.
	   Serve la combinazione di entrambi: con i soli margini fissi la pagina
	   restava incollata a sinistra oltre i 1500px (misurato a 1920: 51px a
	   sinistra, 369px di vuoto a destra); con il solo min(100%,1500px) i
	   margini sparivano sotto quella soglia (misurato a 1492: 18px invece dei
	   51px della ricerca).
	   calc(100% - 66px) riserva i 33px per lato finche' c'e' spazio, il
	   max-width ferma la crescita, e i margini auto centrano oltre. */
	width: calc(100% - 66px);
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1024px) {
	.page-x--listing:has(.paf-loc-head) > .paf-loc-head,
	.page-x--listing:has(.paf-loc-head) > .layout-x,
	.page-x--listing:has(.paf-loc-head) > .paf-loc-extra {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Su desktop .page-x--listing ha height: calc(83vh) fissa: la ricerca e'
   progettata per occupare esattamente lo schermo, con lo scroll DENTRO la
   griglia accanto alla mappa. E' il motivo per cui il footer saliva sul
   contenuto appena si aggiungeva qualcosa.
   La pagina localita' invece deve scorrere come una pagina normale, perche'
   sotto ha i caroselli: qui l'altezza torna automatica. Vincolato a :has()
   cosi' la ricerca vera non e' toccata. */
@media (min-width: 1025px) {
	.page-x--listing:has(.paf-loc-head) {
		height: auto;
	}
}

.paf-loc-extra {
	width: 100%;
	max-width: 1534px;
	padding: 40px 0 8px;
	overflow: hidden;
}
.paf-loc-extra > * { max-width: 100%; }
.paf-loc-extra .container,
.paf-loc-extra .container-fluid {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}
/* I caroselli slick calcolano la larghezza all'init: dentro una colonna
   stretta vanno forzati a non eccedere. */
.paf-loc-extra .slick-slider { max-width: 100%; }

@media (max-width: 640px) {
	.paf-loc-head { padding: 14px 14px 4px; }
	.paf-loc-intro.is-clamped .paf-loc-intro-text { -webkit-line-clamp: 3; }
}

/* ── Altezza di mappa e griglia sulla pagina localita' ─────────────────
   La ricerca dimensiona mappa e griglia su 83vh perche' sotto la barra non
   ha altro. Qui sopra c'e' l'intestazione (misurata ~171px), quindi con lo
   stesso valore il layout sforava di 125px e costringeva a scorrere per
   vedere le prime card.
   --loc-head-h e' l'ingombro reale dell'intestazione (misurato: il layout
   parte a 221px dall'alto della finestra, cioe' 121px sotto la barra fissa,
   piu' il margine di chiusura). Sottraendolo, mappa e griglia riempiono
   esattamente il viewport residuo senza avanzi ne' sforamenti. */
@media (min-width: 1025px) {
	.page-x--listing:has(.paf-loc-head) {
		/* Ingombro dell'intestazione misurato dal top del documento: 100px di
		   barra fissa + ~172px di header. Un valore fisso funziona a una sola
		   larghezza (il testo va a capo diversamente), quindi si tiene il
		   valore misurato piu' un piccolo margine di sicurezza. */
		--loc-head-h: 182px;
	}

	.page-x--listing:has(.paf-loc-head) .map-search,
	.page-x--listing:has(.paf-loc-head) .col--map {
		height: calc(100vh - 100px - var(--loc-head-h));
		min-height: 420px;
	}

	.page-x--listing:has(.paf-loc-head) .results-grid {
		max-height: calc(100vh - 100px - var(--loc-head-h));
		min-height: 420px;
	}
}