.calendar {
    display: grid;
    grid-template-rows: auto 1fr;
    max-width: 100%; /* Limit max width */
    overflow-x: auto; /* Enable horizontal scrolling */
    position: relative; /* Needed for sticky positioning */
}

.header {
    display: grid;
    grid-template-columns: 100px repeat(4, 1fr); /* Time + rooms */
    background-color: #C8CC48;
    text-align: center;
    font-weight: bold;
}

.time-column {
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-right: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: sticky; /* Keep it fixed */
    left: 0; /* Stick to the left */
    z-index: 1; /* Ensure it stays above other content */
}

.room-column {
    border: 1px solid #000000;
    border-right: none;
    padding: 1em; /* Use em for responsive padding */
    background-color: #C8CC48;
}

.room-column:last-of-type {
    border-right: 1px solid #000000;
}

.room-column span {
    display: block;
    font-size: 0.9em; /* Use relative units */
    border-top: 1px solid #000;
    font-weight: 500;
    margin: 0.5em; /* Use em for responsive margin */
    padding-top: 0.5em; /* Use em for responsive padding */
}

.grid-body {
    display: grid;
    grid-template-columns: 100px repeat(4, 1fr); /* Time column + rooms */
    grid-template-rows: repeat(20, 100px);
    grid-auto-rows: 100px;
}

.time-slot {
    padding: 10px;
    border: 1px solid #ddd;
    border-right: none;
    background-color: #fafafa;
    grid-column: 1 / 2; /* Time slots in the first column */
    display: flex;
    align-items: start;
    justify-content: center;
    position: sticky; /* Keep it fixed */
    left: 0;
}

.event {
    background-color: #4caf50;
    color: white;
    padding: 10px 5px;
    font-size: 1em; /* Use relative font size */
    border-radius: 4px;
    text-align: center;
    margin: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.event span {
    display: block;
    font-size: 1.1em; /* Use relative font size */
    font-weight: 600;
    margin: 5px;
}


.event_type{
    display: block;
    font-size: 15px;

}

.event_find_more{
     font-size: 13px;
     text-decoration: underline;
    margin-top: 10px;
 }

.event_find_more:hover, .event_find_more:visited{
    color: white!important;
}

.event_link:hover, .event_link:visited{
    color: white!important;
}

.event_theme_grow{
    background-color: #e96026;
}

.event_theme_seed{
background-color: #007373;
}


.event_theme_sell{
    background-color: #8f0755;
}

.event_theme_other{
    background-color: #000;
}

.event a,
.event a:visited{
 color:#FFF;
    background-color: transparent;
}

.empty-slot {
    background-color: transparent; /* For empty slots */
    border: 0.5px solid #ddd;

    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}

.empty-slot span{
    display: block;
    font-style: italic;
    color: #80848b;

}


@media (max-width: 990px) {
    .room-column span {
        display: none;
    }


    .empty-slot {
        min-width: 200px;
    }

    .room-column {
        padding: 0.5em; /* Reduce padding for very small screens */
        min-width: 200px;
    }
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .header {
        grid-template-columns: 100px repeat(2, 1fr); /* Adjust for smaller screens */
    }

    .grid-body {
        grid-template-columns: 100px repeat(2, 1fr); /* Adjust for smaller screens */
        cursor: url('icon.svg'), auto;
    }


    .room-column span {
        display:none;
    }

    .event {
        font-size: 0.9em; /* Smaller font for small screens */
    }

    .empty-slot {
        min-width: 200px;
    }

    .room-column {
        padding: 0.5em; /* Reduce padding for very small screens */
        min-width: 200px;
    }

}

@media (max-width: 480px) {
    .header {
        grid-template-columns: 100px 1fr; /* Further reduce for very small screens */
    }

    .grid-body {
        grid-template-columns: 100px 1fr; /* Further reduce for very small screens */
    }

    .room-column {
        padding: 0.5em; /* Reduce padding for very small screens */
        min-width: 200px;
    }

    .room-column span {
        display:none;
    }

    .event {
        font-size: 0.8em; /* Even smaller font for very small screens */
    }

    .empty-slot {
        min-width: 200px;
    }

}