.calendar {
	padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 20px;
	/* Aggiunte per gestire le aree */
    grid-template-areas:
        "oggi oggi"
        "futuri passati"
		"prenotazioni tutti";
}

.calendar h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

.box-oggi {
    width: 100%; /* occupa tutta la riga */
	grid-area: oggi;
    background: rgba(255, 215, 0, 0.2); /* giallo chiaro per evidenziare */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	box-sizing: border-box;
}

.box-oggi h2 {
    /*color: #DAA520;*/ /* oro scuro */
    margin-bottom: 10px;
	font-size: 32px;
}

.box-oggi p {
  font-size: 24px;
}

.box-oggi p a {
    font-weight: bold;
	font-size: 24px;
    color: #444;
    text-decoration: none;
}

.box-oggi p a:hover {
    color: #000;
}

.box-passati {
    grid-area: passati;
    background: #f2f2f2;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.box-futuri {
    grid-area: futuri;
    background: #f2f2f2;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.evento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.location{
    font-size: 16px;
    margin-top: 8px;
}

.giorno {
    margin-bottom: 20px;
}

.giorno h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.giorno ul,
.box-passati ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.giorno li,
.box-passati li {
    margin-bottom: 8px;
}

.giorno a,
.box-passati a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: color 0.2s ease;
}

.giorno a:hover,
.box-passati a:hover {
    color: #007BFF;
}

.box-prenotazioni {
    grid-area: prenotazioni;
    border-radius: 10px;
    padding: 20px;
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/
}

.box-tutti-eventi {
    grid-area: tutti;
    text-align: center;
    padding: 20px;
}

.box-prenotazioni a {
	display: block;
    padding: 36px 25px; /* altezza larghezza*/
    background: #f2f2f2;
	color: inherit;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s ease;
    box-sizing: border-box;
	text-align: center;
}

.box-tutti-eventi a {
    /*display: inline-block;*/
	display: block;
    padding: 36px 25px; /* altezza larghezza*/
    background: #f2f2f2;
    /*color: #fff;*/
	color: inherit;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s ease;
    box-sizing: border-box;
	text-align: center;
}

.box-prenotazioni a:hover {
    background: #66bb6a;
	transform: translateY(-2px);
}

.box-tutti-eventi a:hover {
    background: #66bb6a;
	transform: translateY(-2px);
}

	
.btn-tutti-eventi {
	  white-space: nowrap;
	  display: inline-flex;
	  align-items: center;
	  font-size: clamp(1rem, 2vw, 4rem);
	}
	
.lista-tutti-eventi {
	  white-space: nowrap;
	  display: inline-flex;
	  align-items: center;
	  font-size: clamp(1rem, 2vw, 4rem);
	}

/* ===== RESPONSIVE ===== */
@media (max-width: 1250px) {
    .calendar {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin: 20px auto;
        max-width: 97%;
    }
}

@media (max-width: 900px) {
    .calendar {
        grid-template-columns: 1fr;
		grid-template-areas:
		  "oggi"
		  "futuri"
		  "prenotazioni"
		  "passati"
		  "tutti";
    }
	
	.box-tutti-eventi a {
		padding: 72px 25px;
	}
	
	.box-prenotazioni a {
		padding: 72px 25px;
	}

    .evento {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 600px) {
	.calendar > * {
        max-width: 99%;
        min-width: 0;
    }

	.box-tutti-eventi a,
    .box-prenotazioni a {
        word-break: break-word;
		padding: 48px 25px;
	}

	.btn-tutti-eventi,
	.lista-tutti-eventi {
		  white-space: normal;
		  display: flex;
		  align-items: center;
		}
}


@media (max-width: 400px) {
	.calendar {
        max-width: 100%;
    }
	
	.box-tutti-eventi a {
		padding: 24px 12px;
	}
	
	.box-prenotazioni a {
		padding: 24px 12px;
	}
}

@media (max-width: 385px) {
	.box-tutti-eventi a {
		padding: 16px 8px;
	}
	
	.box-prenotazioni a {
		padding: 16px 8px;
	}
}

@media (max-width: 360px) {
	.box-tutti-eventi a {
		padding: 12px 6px;
	}
	
	.box-prenotazioni a {
		padding: 12px 6px;
	}
}

@media (max-width: 320px) {
	.box-tutti-eventi a {
		padding: 6px 3px;
	}
	
	.box-prenotazioni a {
		padding: 6px 3px;
	}
}