/* ============================================================
   #Container — layout principale
   ============================================================ */

	#Container{
		min-height: 50rem;
        max-width: 88.222rem;
        margin-left: 8rem;
        margin-right: 8rem;
        margin-top: 9rem;
        margin-bottom: 5rem;
        color: var(--Page_Text_Color);
	}
	#Container #PageTitle {
		color: #000;
		padding: 0;
		margin: 0;
		font-family: "Montserrat", sans-serif;
		font-weight: 300;
		font-size: 2.5rem;
	}
	#Container #PageSubtitle {
		padding: 0;
		margin: 1rem 0;
		font-family: "Montserrat", sans-serif;
		font-weight: 500;
		font-size: 1.5rem;
	}
	#Container #Testo p {
		line-height: 1.5rem;
		margin: 0;
		padding:0;
		margin-bottom: 1rem;
	}
	#Container #Testo p:first-child {
		margin-top: 2rem;
	}
	#Container #Testo p {
		font-size: 1.1rem;
	}
	#Container #Testo p a {
		text-underline-offset: 0.3rem;
        font-weight: 700;
        text-decoration-thickness: 0.1rem;
	}


/* ============================================================
   FILTERS BAR — barra filtri orizzontale unica
   ============================================================ */

	.FiltersBar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-top: 2rem;
		margin-bottom: 2rem;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid #d6d6d6;
	}

	/* Gruppo date (due bottoni affiancati) */
	.FB-DateGroup {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	/* Divisore verticale */
	.FB-Divider {
		width: 1px;
		height: 1.2rem;
		background: rgba(0, 0, 0, 0.2);
		margin: 0 0.5rem;
		flex-shrink: 0;
	}

	/* Bottone base — usato da date, produzione e sala */
	.FB-Btn {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		padding: 0.45rem 1rem;
		border: 1px solid rgba(0, 0, 0, 0.3);
		background: transparent;
		font-family: 'Montserrat', sans-serif;
		font-size: 0.78rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #000;
		cursor: pointer;
		white-space: nowrap;
		border-radius: 2px;
		transition: background 0.15s, color 0.15s, border-color 0.15s;
		line-height: 1.2;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		text-decoration: none;
	}

	.FB-Btn:hover {
		border-color: #000;
		background: rgba(0, 0, 0, 0.06);
	}

	.FB-Btn.Selected {
		background: #000;
		color: #fff;
		border-color: #000;
	}

	/* Gruppo produzione (ul che contiene il li stilizzato come FB-Btn) */
	.FB-ProdGroup {
		display: flex;
		align-items: center;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#Production {
		display: flex;
		align-items: center;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#Production li {
		margin: 0;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	/* Dropdown sala */
	.FB-SalaGroup {
		position: relative;
	}

	.FB-SalaMenu {
		display: none;
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		background: #fff;
		border: 1px solid rgba(0, 0, 0, 0.18);
		border-radius: 2px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
		z-index: 300;
		overflow: hidden;
	}

	.FB-SalaGroup.open .FB-SalaMenu {
		display: block;
	}

	/* Freccia — ruota quando il dropdown è aperto */
	.FB-Arrow {
		display: inline-block;
		font-size: 0.65rem;
		line-height: 1;
		transition: transform 0.2s ease;
	}

	.FB-SalaGroup.open .FB-Arrow {
		transform: rotate(180deg);
	}

	/* Lista sale dentro il dropdown */
	#Categories {
		list-style: none;
		padding: 0.3rem 0;
		margin: 0;
	}

	#Categories li {
		padding: 0.65rem 1.2rem;
		font-family: 'Montserrat', sans-serif;
		font-size: 0.78rem;
		letter-spacing: 0.04em;
		cursor: pointer;
		white-space: nowrap;
		color: #000;
		transition: background 0.1s;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	#Categories li:hover {
		background: rgba(0, 0, 0, 0.06);
	}

	#Categories li.Selected {
		background: #000;
		color: #fff;
	}


/* ============================================================
   EVENTS GRID
   ============================================================ */

	#Container #EventsContainer {
		position: relative;
		width: 100%;
   		display: inline-grid;
	    grid-template-columns: 1fr 1fr 1fr;
	    grid-column-gap: 1.5rem;
	    grid-row-gap: 1.5rem;
	}
	#Container #EventsContainer #noResults {
		grid-column: 1 / span 3;
    	text-align: center;
	}
	#Container #EventsContainer #noResults p {
		font-size: 2rem;
	}


/* ============================================================
   MOBILE
   ============================================================ */

	@media screen and (max-width: 440px) {
		.RassImage {
			display: none;
		}
		#Container {
			margin-left: auto;
			margin-right: auto;
			margin-top: 5rem;
			max-width: 90%;
		}
		#Container #EventsContainer {
			grid-template-columns: unset;
		}
		.FB-Divider {
			display: none;
		}
		.FiltersBar {
			gap: 0.4rem;
		}
		.FB-Btn {
			font-size: 0.72rem;
			padding: 0.4rem 0.75rem;
			width: 100%;
			justify-content: center;
		}
		.FB-DateGroup {
		    display: flex;
		    align-items: center;
		    gap: 0.25rem;
		    flex-direction: column;
		    width: 100%;
		}
		.FB-SalaGroup {
		    position: relative;
		    width: 100%;
		}
		#Production {
		    display: flex;
		    align-items: center;
		    list-style: none;
		    padding: 0;
		    margin: 0;
		    width: 100%;
		}
		.FB-SalaMenu {
		    display: none;
		    position: absolute;
		    top: calc(100% + 6px);
		    left: 0;
		    background: #fff;
		    border: 1px solid rgba(0, 0, 0, 0.18);
		    border-radius: 2px;
		    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
		    z-index: 300;
		    overflow: hidden;
		    width: 100%;
		    text-align: center;
		}
	}