/* ════════════════════════════════════════════════════
   PortalTour — foglio di stile centralizzato
   Usato da: index.php, elenco_turismo.php, mappe_turismo.php
   ════════════════════════════════════════════════════ */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--clr-primary:    #2a9d8f;
	--clr-primary-dk: #1f7a6e;
	--clr-primary-lt: #e8f7f5;
	--clr-primary-u-lt: #ecf8f7;
	--clr-accent:     #e76f51;
	--clr-text:       #1a1a2e;
	--clr-text-muted: #6b7280;
	--clr-border:     #e5e7eb;
	--clr-bg:         #f8fafb;
	--clr-white:      #ffffff;
	--radius-sm:      6px;
	--radius-md:      10px;
	--radius-lg:      14px;
	--shadow-sm:      0 1px 4px rgba(0,0,0,0.08);
	--shadow-md:      0 4px 16px rgba(0,0,0,0.10);
	--navbar-h:       68px;
	--font:           'Nunito', sans-serif;
}

html, body {
	height: 100%;
	font-family: var(--font);
	background: var(--clr-bg);
	color: var(--clr-text);
	overflow: hidden;
	scroll-behavior: smooth;
}

/* ── Scrollbar custom ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }


/* ════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════ */

.navbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--navbar-h);
	background: var(--clr-white);
	border-bottom: 1px solid var(--clr-border);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 20px;
	z-index: 1000;
	box-shadow: var(--shadow-sm);
}

.navbar__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}

.navbar__brand img {
	height: 52px;
	width: auto;
}

.navbar__titles {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.navbar__titles h1 {
	font-size: 18px;
	font-weight: 700;
	color: var(--clr-text);
	line-height: 1.2;
	white-space: nowrap;
}

.navbar__titles h2 {
	font-size: 14px;
	font-weight: 400;
	color: var(--clr-text-muted);
	line-height: 1.2;
	white-space: nowrap;
}

.navbar__divider {
	width: 1px;
	height: 36px;
	background: var(--clr-border);
	flex-shrink: 0;
}

/* Form ricerca: subito dopo il separatore (non spinto a destra) */
.navbar__search {
	display: flex;
	align-items: center;
	gap: 8px;
}

.navbar__search input[type="text"] {
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	font-family: var(--font);
	font-size: 14px;
	color: var(--clr-text);
	background: var(--clr-bg);
	outline: none;
	transition: border-color .2s;
	width: 220px;
}

.navbar__search input[type="text"]:focus { border-color: var(--clr-primary); }

.navbar__search select {
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	font-family: var(--font);
	font-size: 14px;
	color: var(--clr-text-muted);
	background: var(--clr-bg);
	outline: none;
	cursor: pointer;
	transition: border-color .2s;
	min-width: 150px;
}

.navbar__search select:focus { border-color: var(--clr-primary); }

.btn-cerca {
	height: 38px;
	padding: 0 18px;
	background: var(--clr-primary);
	color: var(--clr-white);
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
	flex-shrink: 0;
}

.btn-cerca:hover { background: var(--clr-primary-dk); }

/* Bottone "Vai alla mappa": visibile solo su mobile (attivato via media query) */
.btn-vai-mappa {
	display: none;
	height: 36px;
	padding: 0 12px;
	background: var(--clr-primary-lt);
	color: var(--clr-primary-dk);
	border: 1px solid var(--clr-primary);
	border-radius: var(--radius-sm);
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
	margin-left: auto;		/* spinge il bottone all'estrema destra su mobile */
	transition: background .2s, color .2s;
	text-decoration: none;
	align-items: center;
	white-space: nowrap;
}

.btn-vai-mappa:hover { background: var(--clr-primary); color: var(--clr-white); }


/* ════════════════════════════════════════════════════
   LAYOUT PRINCIPALE (desktop ≥ 1025px)
   ════════════════════════════════════════════════════ */

.main-layout {
	display: flex;
	height: calc(100vh - var(--navbar-h));
	margin-top: var(--navbar-h);
}

/* Colonna elenco strutture */
.col-elenco {
	width: 55%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px 16px 20px 20px;
	background: var(--clr-bg);
}

/* Colonna mappa */
.col-mappa {
	width: 45%;
	height: 100%;
	overflow: hidden;
	position: relative;
}


/* ════════════════════════════════════════════════════
   CARD STRUTTURA
   ════════════════════════════════════════════════════ */

.struttura-card {
	display: flex;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	margin-bottom: 14px;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow .25s ease, transform .2s ease, background .25s ease, border-color .25s ease;
	box-shadow: var(--shadow-sm);
	height: 200px;
}
 
.struttura-card:hover {
	background: var(--clr-primary-u-lt);
	border-color: var(--clr-primary);
	box-shadow:
		0 2px 6px rgba(0,0,0,0.06),
		0 8px 24px rgba(42,157,143,0.20);
	transform: translateY(-3px);
}
 
.struttura-card__img {
	flex-shrink: 0;
	width: 190px;
	height: 100%;
	overflow: hidden;
	background: var(--clr-primary-lt);
	position: relative;
}
 
.struttura-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease, filter .3s ease;
}
 
.struttura-card:hover .struttura-card__img img {
	transform: scale(1.05);
	filter: brightness(1.05) saturate(1.08);
}


/* Corpo della card: colonna con main in cima e footer in fondo */
.struttura-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;		/* impedisce che il contenuto sfori oltre l'altezza fissa */
}

/* Sezione testo: occupa lo spazio disponibile, nasconde l'overflow */
.card-main {
	flex: 1;
	padding: 12px 16px 8px;
	overflow: hidden;
}

/* Badge tipologia */
.card-tipologia {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--clr-primary-dk);
	background: var(--clr-primary-lt);
	padding: 2px 8px;
	border-radius: 99px;
	margin-bottom: 5px;
}

/* Nome struttura: max 2 righe */
.card-nome {
	font-size: 16px;
	font-weight: 700;
	color: var(--clr-text);
	line-height: 1.3;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Wrapper griglia: 2 colonne su desktop */
.card-contatti-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px 10px;
	margin-top: 2px;
}
 
/* Su schermi < 765px: una colonna sola */
@media (max-width: 764px), (min-width: 1024px) {
	.card-contatti-grid {
		grid-template-columns: 1fr;
	}
}

/* Riga contatto: icona + testo su una riga sola */
.card-contatto {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--clr-text-muted);
	margin-bottom: 3px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.card-contatto-icona {
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	fill: none;
	stroke: var(--clr-primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card-contatto a {
	color: var(--clr-primary);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-contatto a:hover { text-decoration: underline; }

/* Footer card: servizi + carte — altezza fissa, ancorata in basso */
.card-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--clr-border);
	padding: 6px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--clr-bg);
	overflow: hidden;
}

/* Icone servizi */
.servizi {
	display: flex;
	flex-wrap: nowrap;		/* no wrap: l'altezza della card è fissa */
	gap: 3px;
	align-items: center;
	overflow: hidden;
}

.servizi img {
	width: 25px;
	height: 25px;
	object-fit: contain;
	opacity: 0.85;
	flex-shrink: 0;
}

/* Carte di credito */
.carte {
	display: flex;
	flex-wrap: nowrap;
	gap: 3px;
	align-items: center;
	overflow: hidden;
}

.carte img {
	width: 30px;
	height: 22px;
	object-fit: contain;
	border: 1px solid var(--clr-border);
	border-radius: 3px;
	flex-shrink: 0;
}


/* ════════════════════════════════════════════════════
   PAGINAZIONE
   ════════════════════════════════════════════════════ */

.paginazione-wrap {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--clr-border);
}

.paginazione-totale {
	font-size: 12px;
	color: var(--clr-text-muted);
	text-align: right;
	margin-bottom: 10px;
}

.paginazione-bottoni {
	display: flex;
	justify-content: center;
	gap: 6px;
}

.btn-pag {
	height: 36px;
	min-width: 80px;
	padding: 0 14px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	background: var(--clr-white);
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-text);
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

.btn-pag:hover {
	background: var(--clr-primary-lt);
	border-color: var(--clr-primary);
	color: var(--clr-primary-dk);
}


/* ════════════════════════════════════════════════════
   MAPPA
   ════════════════════════════════════════════════════ */

#map {
	width: 100%;
	height: 100%;
}

.gmnoprint a,
.gmnoprint span { display: none; }

.gmnoprint div { background: none !important; }

.gm-style div div div div div div div div a {
	background-color: #ffffff !important;
	padding: 0;
	color: var(--clr-primary-dk);
	font-size: 15px;
	font-weight: 700;
}


/* ════════════════════════════════════════════════════
   FOOTER / INFO PORTALTOUR
   ════════════════════════════════════════════════════ */

.info-portaltour {
	margin-top: 24px;
	padding: 20px;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	font-size: 13px;
	color: var(--clr-text-muted);
	text-align: center;
	line-height: 1.7;
}

.info-portaltour strong { color: var(--clr-text); }
.info-portaltour a { color: var(--clr-primary); text-decoration: none; }
.info-portaltour a:hover { text-decoration: underline; }

.info-testo-comune { margin-top: 24px; padding: 0 4px; }

.info-testo-comune h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--clr-primary-dk);
	margin-bottom: 6px;
	margin-top: 18px;
}

.info-testo-comune p {
	font-size: 13px;
	color: var(--clr-text-muted);
	line-height: 1.7;
}

.social-bar {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}

.social-bar a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--clr-primary-lt);
	color: var(--clr-primary-dk);
	font-size: 14px;
	text-decoration: none;
	transition: background .2s;
}

.social-bar a:hover { background: var(--clr-primary); color: var(--clr-white); }

#coda { visibility: hidden; }


/* ════════════════════════════════════════════════════
   RESPONSIVE
   Unica soglia a 1024px: sotto questa larghezza
   si attiva la visualizzazione "mobile".
   Struttura in cima all'elenco (scorre con la pagina):
   1. Riga pulsante "Vai alla mappa"   (allineata a destra)
   2. Banner ricerca: input+select+bottone
   ════════════════════════════════════════════════════ */

/* Nasconde elementi mobile su schermi larghi (≥ 1025px) */
.ricerca-mobile     { display: none; }
.barra-mappa-mobile { display: none; }

@media (max-width: 1024px) {

	/* Navbar standard — solo navbar fissa in cima */
	:root { --navbar-h: 72px; }

	/* Layout verticale: elenco sopra, mappa in fondo */
	.main-layout {
		flex-direction: column;
		height: auto;
		margin-top: var(--navbar-h);	/* solo la navbar è fissa */
		overflow-y: auto;
		overflow-x: hidden;
	}

	html, body { overflow: auto; }

	.col-elenco {
		width: 100%;
		height: auto;
		overflow: visible;
		padding: 14px;
	}

	/* Mappa in fondo con altezza fissa */
	.col-mappa {
		width: 100%;
		height: 340px;
		flex-shrink: 0;
	}

	/* Nasconde ricerca e separatore dalla navbar */
	.navbar__search  { display: none; }
	.navbar__divider { display: none; }

	/* Sottotitolo sempre visibile nella navbar */
	.navbar__titles h2 { display: block; }

	/* Nasconde il btn-vai-mappa dalla navbar */
	.navbar .btn-vai-mappa { display: none; }

	/* Mostra il btn-vai-mappa dentro la barra-mappa-mobile */
	.barra-mappa-mobile .btn-vai-mappa { display: flex; }

	/* ── Riga pulsante mappa: scorre con la pagina, allineata a destra ── */
	.barra-mappa-mobile {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 40px;
		margin-bottom: 6px;
	}

	/* ── Banner ricerca: scorre con la pagina ── */
	.ricerca-mobile {
		display: block;
		background: var(--clr-white);
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-md);
		padding: 10px 14px;
		margin-bottom: 14px;
	}

	.ricerca-mobile form {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}

	/* Input e select affiancati con la stessa larghezza */
	.ricerca-mobile input[type="text"],
	.ricerca-mobile select {
		flex: 1;
		min-width: 0;
		height: 34px;
		padding: 0 10px;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-sm);
		font-family: var(--font);
		font-size: 13px;
		color: var(--clr-text);
		background: var(--clr-bg);
		outline: none;
	}

	/* Pulsante Cerca a piena larghezza sotto i due campi */
	.ricerca-mobile .btn-cerca {
		width: 100%;
		height: 34px;
		font-size: 13px;
	}

	/* Card leggermente più bassa */
	.struttura-card      { height: 170px; }
	.struttura-card__img { width: 120px; }

	/* Caratteri leggermente ridotti nelle card */
	.card-nome      { font-size: 14px; }
	.card-contatto  { font-size: 12px; }
	.card-tipologia { font-size: 9px; }
}

/* ════════════════════════════════════════════════════
   SCHEDA STRUTTURA (scheda_struttura.php)
   ════════════════════════════════════════════════════ */

/* Override: su questa pagina body scorre normalmente */
.scheda-wrap ~ * ,
.scheda-wrap { }
/* (applicato via body class se necessario; il reset scroll è inline nel php) */

/* ── Layout pagina ── */
.scheda-wrap {
	max-width: 1100px;
	margin: calc(var(--navbar-h) + 32px) auto 0;
	padding: 0 20px 60px;
}

/* ── Intestazione: nome + badge + codici ── */
.scheda-header { margin-bottom: 20px; }

.scheda-header__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.scheda-titolo-gruppo { flex: 1; min-width: 0; }

.scheda-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--clr-primary-dk);
	background: var(--clr-primary-lt);
	padding: 3px 10px;
	border-radius: 99px;
	margin-bottom: 8px;
}

.scheda-nome {
	font-size: 28px;
	font-weight: 700;
	color: var(--clr-text);
	line-height: 1.2;
	margin-bottom: 10px;
}

/* CIN e CIR */
.scheda-codici {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.scheda-codice-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--clr-text);
	color: var(--clr-white);
	font-size: 14px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 6px;
	letter-spacing: 0.04em;
}

.scheda-codice-badge span {
	font-weight: 400;
	color: #ccc;
	font-size: 11px;
}

/* Link struttura casuale */
.scheda-nav-random {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-text-muted);
	text-decoration: none;
	transition: background .2s, border-color .2s;
	white-space: nowrap;
}

.scheda-nav-random:hover {
	background: var(--clr-primary-lt);
	border-color: var(--clr-primary);
	color: var(--clr-primary-dk);
}

/* ── Griglia foto stile Airbnb ── */
.foto-grid {
	display: grid;
	gap: 6px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 32px;
	background: var(--clr-primary-lt);
}

/* 1 foto: piena larghezza */
.foto-grid--solo {
	grid-template-columns: 1fr;
	max-height: 480px;
}

/* 2 foto: 50/50 affiancate */
.foto-grid--2 {
	grid-template-columns: 1fr 1fr;
	max-height: 420px;
}

/* 3-5 foto: principale 60% + secondarie 40% */
.foto-grid--multi {
	grid-template-columns: 3fr 2fr;
	max-height: 480px;
}

.foto-grid__principale {
	position: relative;
	overflow: hidden;
}

.foto-grid__principale img,
.foto-grid__secondaria img,
.foto-grid--solo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}

.foto-grid__principale:hover img { transform: scale(1.02); }

/* Wrapper secondarie: layout diverso per ogni caso */

/* 1 secondaria (caso 2 foto): unica cella */
.foto-grid__secondarie-wrap--1 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	gap: 6px;
}

/* 2 secondarie (caso 3 foto): colonna verticale */
.foto-grid__secondarie-wrap--2col {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 6px;
}

/* 3 secondarie (caso 4 foto): 2 in alto + 1 in basso larga */
.foto-grid__secondarie-wrap--3 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, 1fr);
	gap: 6px;
}
 
/* Rimuove il comportamento "terza occupa tutta la riga" — non serve più */
.foto-grid__secondarie-wrap--3 .foto-grid__secondaria:nth-child(3) {
	grid-column: auto;
}

/* 4 secondarie (caso 5 foto): griglia 2x2 */
.foto-grid__secondarie-wrap--4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: calc(50% - 3px) calc(50% - 3px);
	gap: 6px;
}

.foto-grid__secondaria {
	overflow: hidden;
	position: relative;
}

.foto-grid__secondaria:hover img { transform: scale(1.04); }

.foto-altre-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-white);
	font-family: var(--font);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background .2s;
}
 
.foto-altre-overlay:hover {
	background: rgba(0, 0, 0, 0.60);
}

.foto-no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-primary-lt);
	border-radius: var(--radius-lg);
	height: 260px;
	margin-bottom: 32px;
}

.foto-no-image img { max-width: 280px; opacity: .6; }

/* ── Modale carosello foto ── */
.foto-modale-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .85);
	z-index: 3000;
}

.foto-modale-overlay.attivo { display: block; }

.foto-modale {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 3001;
	align-items: center;
	justify-content: center;
	padding: 20px 60px;		/* spazio per le frecce */
}

.foto-modale.attivo { display: flex; }

/* Contenitore immagine centrata */
.foto-modale__contenuto {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.foto-modale__contenuto img {
	max-width: 100%;
	max-height: calc(100vh - 100px);
	object-fit: contain;
	border-radius: var(--radius-md);
	display: block;
}

/* Counter "1 / 5" */
.foto-modale__counter {
	margin-top: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
	font-family: var(--font);
}

/* Pulsante chiudi */
.foto-modale__chiudi {
	position: fixed;
	top: 16px;
	right: 20px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
	z-index: 3002;
}

.foto-modale__chiudi:hover { background: rgba(255, 255, 255, .3); }

/* Frecce navigazione */
.foto-modale__nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
	z-index: 3002;
}

.foto-modale__nav:hover { background: rgba(255, 255, 255, .3); }

.foto-modale__nav--prev { left: 12px; }
.foto-modale__nav--next { right: 12px; }

/* ── Badge "+ N foto" su mobile ── */
.foto-badge-mobile {
	display: none;			/* nascosto su desktop, attivato via media query mobile */
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--font);
	padding: 4px 10px;
	border-radius: 99px;
	cursor: pointer;
	gap: 4px;
	align-items: center;
	pointer-events: auto;
}

/* ── Layout corpo: info a sinistra, host a destra ── */
.scheda-body {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 32px;
	margin-bottom: 32px;
	align-items: stretch;	/* le due colonne raggiungono la stessa altezza */
}

/* ── Card Host ── */
.scheda-host-card {
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 20px;
	text-align: center;
	box-shadow: var(--shadow-sm);
	height: 100%;			/* si allunga fino all'altezza della colonna info */
	box-sizing: border-box;
}

.scheda-host-card img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 10px;
	border: 3px solid var(--clr-primary-lt);
}

.scheda-host-nome {
	font-size: 14px;
	font-weight: 700;
	color: var(--clr-text);
}

.scheda-host-label {
	font-size: 12px;
	color: var(--clr-text-muted);
	margin-bottom: 4px;
}

/* Su desktop: wrapper testo visibile, layout centrato verticale (foto è sopra) */
.scheda-host-card__testo {
	display: flex;
	flex-direction: column;
	align-items: center;		/* centra label e nome sotto la foto */
}

/* Su desktop: label sopra alla foto visibile, label nel wrapper nascosto */
.scheda-host-label--desktop { display: block; }
.scheda-host-label--mobile  { display: none; }

/* ── Sezioni interne ── */
.scheda-section {
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 28px 32px;
	margin-bottom: 20px;
	box-shadow: var(--shadow-sm);
}

.scheda-section__titolo {
	font-size: 18px;
	font-weight: 700;
	color: var(--clr-text);
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--clr-primary-lt);
}

.scheda-section__titolo::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 18px;
	background: var(--clr-primary);
	border-radius: 2px;
	margin-right: 10px;
	vertical-align: middle;
}

/* Griglia caratteristiche: etichetta + valore */
.scheda-features-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 20px;
	align-items: start;
}

.scheda-feature-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--clr-text);
	white-space: nowrap;
}

.scheda-feature-value {
	font-size: 14px;
	color: var(--clr-text-muted);
}

.scheda-feature-label .ico-info {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--clr-primary);
	color: white;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	line-height: 14px;
	cursor: pointer;
	margin-left: 4px;
	vertical-align: middle;
}

/* Icone servizi e carte */
.scheda-icone-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.scheda-icone-wrap img.icona-servizio {
	width: 28px;
	height: 28px;
	object-fit: contain;
	opacity: 0.85;
}

.scheda-icone-wrap img.icona-carta {
	width: 36px;
	height: 24px;
	object-fit: contain;
	border: 1px solid var(--clr-border);
	border-radius: 3px;
}

/* Descrizione testo libero */
.scheda-descrizione {
	font-size: 14px;
	color: var(--clr-text-muted);
	line-height: 1.8;
}

/* ── Blocco collassabile "Leggi tutto" ── */
.leggi-tutto-wrap {
	position: relative;
}

/* Contenuto troncato: altezza massima, overflow nascosto */
.leggi-tutto-contenuto {
	overflow: hidden;
	transition: max-height .4s ease;
}

/* Sfumatura in fondo quando il testo è troncato */
.leggi-tutto-fade {
	position: absolute;
	bottom: 14px;		/* sopra il link "Leggi tutto" */
	left: 0; right: 0;
	height: 48px;
	background: linear-gradient(transparent, var(--clr-white));
	pointer-events: none;
	transition: opacity .3s;
}

/* Il fade sparisce quando il contenuto è espanso */
.leggi-tutto-wrap.espanso .leggi-tutto-fade { opacity: 0; }

/* Link espandi/riduci */
.leggi-tutto-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--clr-primary);
	cursor: pointer;
	text-decoration: underline;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font);
}

.scheda-descrizione table td,
.scheda-descrizione table th { padding: 6px 10px; }

/* ── Selettore lingua navbar ── */
.navbar__lingue {
	position: relative;
	flex-shrink: 0;
	margin-left: auto;
}

.navbar__lingue-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	background: var(--clr-bg);
	cursor: pointer;
	font-family: var(--font);
	font-size: 13px;
	color: var(--clr-text);
	transition: border-color .2s;
}

.navbar__lingue-btn:hover { border-color: var(--clr-primary); }
.navbar__lingue-btn img   { width: 20px; height: auto; }

.navbar__lingue-dropdown {
	display: none;
	position: absolute;
	/* top: calc(100% + 6px); */
	top: 100%;
	padding-top: 6px;
	right: 0;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	min-width: 150px;
	z-index: 2000;
	overflow: hidden;
}

.navbar__lingue-dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	font-size: 13px;
	color: var(--clr-text);
	text-decoration: none;
	transition: background .15s;
}

.navbar__lingue-dropdown a:hover { background: var(--clr-primary-lt); }
.navbar__lingue-dropdown a img   { width: 22px; height: auto; }

.navbar__lingue:hover .navbar__lingue-dropdown { display: block; }

/* ── Griglia servizi offerti per categoria ── */
.opzioni-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.opzioni-categoria__titolo {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--clr-primary-dk);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--clr-primary-lt);
}

.opzioni-categoria__titolo img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
}

.opzioni-lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.opzioni-lista li {
	font-size: 14px;
	color: var(--clr-text-muted);
	padding: 4px 0 4px 14px;
	position: relative;
}

.opzioni-lista li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--clr-primary);
}

/* ── Mappa nella scheda ── */
.scheda-mappa-wrap {
	width: 100%;
	height: 420px;
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* ── Barra mobile "Torna all'elenco" + lingua (solo su mobile, scorre con la pagina) ── */
.scheda-barra-mobile {
	display: none;			/* nascosta su desktop */
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--clr-border);
}

.scheda-barra-mobile__torna {
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-primary);
	text-decoration: none;
	white-space: nowrap;
}

.scheda-barra-mobile__torna:hover { text-decoration: underline; }

/* Il selettore lingua dentro la barra mobile eredita gli stili .navbar__lingue */
.scheda-barra-mobile__lingue { margin-left: 0; }

/* ── Modale info-point ── */
.info-modale-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 4000;			/* sopra alla modale foto (z-index 3000) */
}

.info-modale-overlay.attivo { display: block; }

.info-modale {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 4001;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.info-modale.attivo { display: flex; }

.info-modale__box {
	background: var(--clr-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	max-width: 480px;
	width: 100%;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.info-modale__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--clr-border);
	flex-shrink: 0;
}

.info-modale__titolo {
	font-size: 15px;
	font-weight: 700;
	color: var(--clr-text);
}

.info-modale__chiudi {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	color: var(--clr-text-muted);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}

.info-modale__chiudi:hover { background: var(--clr-border); }

.info-modale__testo {
	padding: 18px 20px;
	font-size: 13px;
	color: var(--clr-text-muted);
	line-height: 1.7;
	overflow-y: auto;
}
.scheda-footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--clr-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: var(--clr-text-muted);
}

.scheda-footer a { color: var(--clr-primary); text-decoration: none; }
.scheda-footer a:hover { text-decoration: underline; }

.scheda-footer__social { display: flex; gap: 8px; }

.scheda-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--clr-primary-lt);
	color: var(--clr-primary-dk);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s;
}

.scheda-footer__social a:hover { background: var(--clr-primary); color: var(--clr-white); }

/* ── Responsive scheda ── */
@media (max-width: 1024px) {
	.scheda-wrap {
		margin-top: calc(var(--navbar-h) + 6px);
		padding: 0 14px 40px;
	}

	.scheda-body { grid-template-columns: 1fr; }

	/* Host card: larghezza piena su mobile */
	.scheda-host-card {
		order: -1;
		max-width: 100%;
	}

	.scheda-nome { font-size: 22px; }

	/* Barra torna/lingua: visibile solo su mobile */
	.scheda-barra-mobile { display: flex; }
	
	.scheda-codice-badge { font-size: 12px; }

	/* Nasconde torna all'elenco, separatore e selettore lingua dalla navbar su mobile */
	.navbar__torna-elenco  { display: none; }
	.navbar__divider       { display: none; }
	.navbar__lingue--navbar { display: none; }

	.foto-grid--multi {
		grid-template-columns: 1fr;
		max-height: none;
	}

	/* Su mobile tutte le secondarie nascoste: si vede solo la principale */
	.foto-grid__secondarie-wrap--1,
	.foto-grid__secondarie-wrap--2col,
	.foto-grid__secondarie-wrap--3,
	.foto-grid__secondarie-wrap--4 { display: none; }

	.foto-grid--multi .foto-grid__principale,
	.foto-grid--2     .foto-grid__principale,
	.foto-grid--solo  .foto-grid__principale { height: 260px; }

	.foto-grid--2 {
		grid-template-columns: 1fr;
		max-height: none;
	}

	/* Badge "+ N foto": visibile su mobile quando ci sono più immagini */
	.foto-badge-mobile { display: flex; }

	.scheda-section { padding: 18px 16px; }

	.opzioni-lista { grid-template-columns: 1fr; }

	/* Host card su mobile: layout orizzontale, foto a sinistra del nome */
	.scheda-host-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		text-align: left;
		height: auto;			/* su mobile non serve l'altezza fissa */
	}

	.scheda-host-card img {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
		margin-bottom: 0;		/* annulla il margin-bottom desktop */
	}

	/* Raggruppa label + nome in una colonna verticale */
	.scheda-host-card__testo {
		display: flex;
		flex-direction: column;
	}

	/* Su mobile: nasconde il label sopra la foto, mostra quello dentro il wrapper */
	.scheda-host-label--desktop { display: none; }
	.scheda-host-label--mobile  { display: block; }
}