/* Sfondo nero profondo e reset margini */
	body { 
		background-color: #000; 
		margin: 0; 
		padding: 10px; 
		font-family: "Montserrat", Verdana, Arial, Helvetica, sans-serif;
		color: green;
		font-size: 20px;
	}
	.header-cover {
		display: flex;          /* Attiva il layout a colonne */
		align-items: center;    /* Allinea verticalmente foto e testo al centro */
		gap: 20px;              /* Spazio tra la foto e il testo */
		background-color: #1a1a1a; /* Sfondo scuro come nel tuo esempio */
		padding: 5px;
		/* border-radius: 15px;   */ /* Angoli arrotondati per la "card" */
		margin-bottom: 10px;    /* Spazio prima dell'inizio della gallery */
		/* border: 2px solid white; */
	}
	.header-sx {
		flex: 0 0 300px; 
	}
	.header-sx img {
		width: 100%;            /* La foto occupa tutto il div sx */
		height: auto;
		border-radius: 15px;    /* Arrotonda gli angoli della foto */
		display: block;
	}
	.header-dx {
		flex: 1;                /* Il testo occupa tutto lo spazio rimanente */
		color: #ffffff;
		text-align: justify;  	/* Testo giustificato */
	}
	H2 {
		font-family: "Montserrat", "Segoe UI", "Roboto Condensed", Arial, Helvetica, sans-serif;
		color: white;
		font-size: 1.5em;
		/* border: 2px solid white; */
		padding: 0 5px;
		margin: 0;
	}
	.font-title {
		color: #dddddd !important; 
		font-family: "Montserrat", sans-serif, Arial, Helvetica;
		font-size: 2em;
		/* font-weight: 500; semi-bold */
		font-weight: 600; /* semi-bold */			
		text-decoration: none !important;
		display: inline-block !important; /* non manda a capo alla fine del div, se c'è ancora spazio */
		margin: 0;
		padding: 0 5px;
		/* border: 2px solid white; */
	}
	.font-text {
		color: #dddddd !important; 
		font-family: "Montserrat", sans-serif, Arial, Helvetica;
		font-size: 2em;
		text-decoration: none !important;
		display: inline-block !important; /* non manda a capo alla fine del div, se c'è ancora spazio */
		margin: 0;
		padding: 0 5px;
		/* border: 2px solid white; */
	}
	.font-data {
		color: white; 
		font-family: "Montserrat", "Roboto Condensed", elvetica, sans-serif, Arial;
		font-size: 16px;
		text-decoration: none !important;
		/* display: inline-block !important; */ /* con questo a commento, viene occupata tutta la riga */
		margin: 0;
		padding: 3px 5px;
		border-top: 1px solid white;
		/* border: 2px solid white; */
	}
	/* ----- AREA GLIGHTBOX ----- */	
	/* banda desc nella Glightbox - spaziatura interna*/
		.glightbox-container .gdesc-inner {
			padding: 5px 10px !important; /* altezza banda in funzione del testo e disposizione testo */
		} 
		
	/* Stile generale del testo della descrizione */
		.glightbox-container .gdesc-inner .gslide-desc {
			font-size: 16px !important;
			color: #000 !important;
			line-height: normal;
			/* Rimuove margini extra dal testo della descrizione */
			margin-bottom: 0 !important;
			padding-bottom: 0 !important;
		}
	
	/* Opzionale: se vuoi che la barra sia quasi invisibile o molto sottile */
		.glightbox-container .gslide-description {
			background: rgba(255, 255, 255, 0.9) !important;  /* Rende il fondo leggermente trasparente */
			max-height: 100px; /* Limita l'altezza massima */
			/* border-top: 1px solid black; /* linea sottile di separazione tra foto e testo */
		}
	/* LINK: Stile specifico per i LINK dentro la descrizione della Glightbox*/
		.glightbox-container .gdesc-inner .gslide-desc 
		a {
			color: #02559b !important; /* nero-blu  */
			font-weight: bold;
			text-decoration: none !important; /* Rimuove sottolineatura */
			transition: color 0.2s ease-in-out;
		}
	/* LINK: Effetto al passaggio del mouse sui link */
		.glightbox-container .gdesc-inner .gslide-desc 
		a:hover {
			color: #0173d3 !important; /* Diventa blu */
		}
		
	/* ----- AREA GALLERY THUMBS ----- */
	/* Angoli netti (0) e transizione fluida al passaggio del mouse */
        .jg-entry img {
            border-radius: 0 !important; 
			transition: box-shadow 0.3s ease, opacity 0.3s ease !important;
        }
	/* Effetto al passaggio del mouse sulla thumb - ombreggiatura */
        .jg-entry img:hover {
            opacity: 0.85;
			box-shadow: 0px 0px 15px rgba(0,0,0,0.5); /* Ombreggiatura */
            /* transform: scale(1.02); Leggero zoom al passaggio del mouse - non utilizzato */
        }	
	/* Banda descrizione sulla gallery (non nel Glightbox) con spefiche testo - personalizza tutto qui: OK! */
	/* 1. STILE E CONTENUTO: aspetto visivo */
		.jg-caption {
			/* min-height: 30px; */
			line-height: 1.5 !important; /* influisce sull'altezza della banda nera anche a riga singola */
			color: white !important;
			font-family: 'Montserrat', sans-serif !important;
			font-weight: 600 !important;
			font-size: 14px !important;
			padding: 0 5px !important;
			background: rgba(0, 0, 0, 0.50) !important; /* Colore sfondo e trasparenza */
			transition: opacity 0.3s ease-in-out; /* Effetto comparsa fluida */
		}
	/* Justified Gallery - Banda Nera (Didascalia) */
	/* 2. STRUTTURA E POSIZIONAMENTO: Forza il comportamento del plugin */
		.justified-gallery > a > .jg-caption, 
		.justified-gallery > div > .jg-caption {
			display: flex !important;
			align-items: center !important; /* allineamento verticale del testo */
			bottom: 0 !important; /* posizione della barra dal bordo inferiore*/
			opacity: 0 !important; 
			pointer-events: none; /* Fondamentale per non disturbare l'hover */
		}
	/* 3. INTERAZIONE: Mostra la banda solo quando passi sopra con il mouse all'elemento della gallery: OK! */
		.jg-entry:hover .jg-caption {
			opacity: 1 !important;
		}
	/* Personalizzazione icone GLightbox (opzionale) - per ora non utilizzato
        .glightbox-container .gclose, .glightbox-container .gnext, .glightbox-container .gprev {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        } */