/* stile pagina generale */
	body { 
		font-family: arial, sans-serif; 
		background:#f5f5f5; 
		/* text-transform: uppercase; */
		display: flex;
		flex-direction: column;
		min-height: 100vh; /* Forza il body a coprire tutta l'altezza dello schermo */
		margin: 0;         /* Rimuove margini di default che creano scroll inutili */
	}
	/* contenitore gallery */
	.container {
		padding: 15px; 
		flex: 1; /* Questa è la "molla" che spinge il footer in basso */
		display: flex;
		flex-direction: column;
	}

	/*stile gallery thumbs*/
	.gallery {
		/* border: 1px solid black; */
		display: grid;
		grid-template-columns: repeat(auto-fit, 150px);
		gap: 12px;
		padding: 6px;
		max-width: 100%;    
		margin: 0 auto;       
		justify-content: center;
	} 

	.gallery-item {
		width: 100%; 
		text-align: center;
	}

	.gallery-item img {
		width: 100%; 
		cursor: pointer; 
		border-radius:4px; 
		display: block; /* aggiunto per togliere lo spazio fantasma sotto le immagini ed avere il gap uguale sia in verticale che in orizzontale */
	}
	.gallery-item.is-video { position: relative; }

	/* crea un triangolo semplice bianco sulla thumbs */
	/* .gallery-item.is-video::after {
		content: '▶'; 
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		font-size: 40px;
		color: white;
		text-shadow: 0 0 10px rgba(0,0,0,0.5);
		pointer-events: none;
	} */
	
	/* Crea un cerchio azzurro con il tasto play bianco */
	.gallery-item.is-video::after {
		content: '▶'; 
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		
		/* Questo crea il cerchio */
		background-color: rgba(0, 174, 255, 0.8); 
		/* background-color: rgba(65, 131, 196, 0.8); /* Azzurro precedente con trasparenza */
		width: 45px; /* dimensione cerchio */
		height: 45px; /* dimensione cerchio */
		border-radius: 50%;
		
		/* Questo gestisce il triangolo bianco */
		color: rgba(255, 255, 255, 0.95); /* bianco con trasparenza */
		font-size: 20px;
		line-height: 46px; /* Centra verticalmente il triangolo */
		text-align: center; /* Centra orizzontalmente il testo */
		padding-left: 4px;  /* Correzione ottica: il triangolo sembra sempre troppo a sinistra */
		
		box-shadow: 0 4px 12px rgba(0,0,0,0.4);
		pointer-events: none;
		
		/* Opzionale: aggiunge un leggero bordo per staccare meglio sulla neve */
		/* border: 1px solid rgba(255, 255, 255, 0.2); */
	}

	/*stile header-bar */
	.header-bar {
		display: flex;
		justify-content: space-between; /* Spinge il titolo a sx e il bottone a dx */
		align-items: center;           /* Allinea perfettamente i centri in verticale */
		background: #fff;              /* Opzionale: sfondo bianco */
		padding: 10px 20px;            /* Spazio interno */
		border-bottom: 1px solid #ddd; /* Una riga sottile di separazione */
		margin-bottom: 20px;
	}

	/* Trasforma il link in un vero bottone */
	.back-button {
		display: inline-block;
		padding: 8px 16px;
		background-color: #007bff;     /* Colore blu */
		color: white;                  /* Testo bianco */
		text-decoration: none;         /* Toglie la sottolineatura */
		border-radius: 5px;            /* Angoli tondi come le foto */
		font-size: 14px;
		font-weight: bold;
		transition: background 0.3s;   /* Effetto morbido al passaggio */
	}
	/* scurisce il bottone al passaggio del puntatore */
	.back-button:hover {
		background-color: #0056b3;     /* Blu più scuro quando ci passi sopra */
	}

	#album-title {
		margin: 0;                     /* Toglie i margini di default per evitare asimmetrie */
		font-size: 24px;
	}
	
	/* === REGOLE GLightbox === */
	/* 1. NASCONDI LA DESCRIZIONE DI DEFAULT */
	.glightbox-container .gslide-description {
		display: none !important;
	}
	/* 2. MOSTRA LA DESCRIZIONE SOLO QUANDO ATTIVO */
	.glightbox-container.show-info .gslide-description {
		display: block !important;
		/* Se vuoi che la descrizione sia a destra su desktop */
		position: relative; 
		max-width: 210px;
		/* impostazioni colore sfondo e altro */
		background: #ccc;    /* Colore dello sfondo */
		padding: 0 !important;       /* Spazio tra il testo e i bordi del box */
		margin-left: 5px;		/* spazio tra box description e foto */
	}
	
	/* 3. IL TASTO INFO */
	.custom-info-btn {
		position: fixed;
		top: 15px;
		right: 60px;
		z-index: 999999 !important;
		background: rgba(0, 0, 0, 0.7);
		color: white;
		border: 1px solid rgba(255, 255, 255, 0.5);
		height: 35px;
		min-width: 80px; /* Larghezza minima per evitare che il tasto "salti" al cambio testo */
		padding: 0 12px;
		/* Centraggio assoluto */
		display: flex;
		align-items: center; 
		justify-content: center;
		cursor: pointer;
		font-family: Arial, sans-serif;
		letter-spacing: 1px;
		font-size: 12px;
		font-weight: bold;
		border-radius: 4px;
	}

	/* Allineamento specifico per la X */
	.btn-x {
		font-size: 16px;     /* La X deve essere grande per sembrare centrata */
		margin-right: 8px;   /* Spazio tra X e INFO */
		line-height: 0;      /* Fondamentale: annulla l'ingombro verticale del carattere */
		display: inline-block;
		position: relative;
		top: -0.5px;           /* Micro-aggiustamento manuale se serve alzarla/abbassarla */
	}
		
	/* Layout Desktop per allineare foto e descrizione */
	@media (min-width: 769px) {
		.glightbox-container.show-info .ginner-container {
			flex-direction: row;
		}
		.glightbox-container .gslide-description .gslide-title {
			color: #000;				/* colore font */
			font-size: 16px;			/* grandezza testo titolo foto */
			padding: 0 !important;
			margin-top: 0;
			margin-bottom: 20px;
		}
		.glightbox-container .gslide-desc {
			color: #000;
			font-size: 14px; 				/* grandezza testo desc */
			line-height: 1.4;
		}
	}