.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;
 }

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

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

/* -------------------------------------------------------------------------
   Event actions: "Find out more" + "More info"
   Selectors are deliberately specific so theme button/link styles can't leak in.
   ------------------------------------------------------------------------- */
.calendar .event .event_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 18px;
    margin-top: 12px;
}

/* Both actions share exactly the same look */
.calendar .event .event_actions .event_find_more,
.calendar .event .event_actions .event_more_info {
    all: unset;
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.calendar .event .event_actions .event_find_more:hover,
.calendar .event .event_actions .event_more_info:hover {
    opacity: 0.75;
    color: inherit !important;
}

.calendar .event .event_actions .event_find_more:focus-visible,
.calendar .event .event_actions .event_more_info:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Thin divider between the two actions when both are present */
.calendar .event .event_actions .event_find_more + .event_more_info::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 20%;
    height: 60%;
    border-left: 1px solid currentColor;
    opacity: 0.5;
}

/* Bigger tap targets on touch devices, without changing the visual size */
@media (pointer: coarse) {
    .calendar .event .event_actions .event_find_more::after,
    .calendar .event .event_actions .event_more_info::after {
        content: '';
        position: absolute;
        inset: -12px -8px;
    }
}

/* -------------------------------------------------------------------------
   "More info" modal
   --cg-modal-accent / --cg-modal-accent-fg are set from the event's colours
   ------------------------------------------------------------------------- */
dialog.cg-modal {
    --cg-modal-accent: #222222;
    --cg-modal-accent-fg: #ffffff;

    box-sizing: border-box;
    width: min(92vw, 560px);
    max-width: none;
    max-height: 85vh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #2b2b2b;
    font-family: inherit;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

dialog.cg-modal[open] {
    display: flex;
    animation: cg-modal-in 0.22s ease-out;
}

dialog.cg-modal.is-closing {
    animation: cg-modal-out 0.2s ease-in forwards;
}

dialog.cg-modal::backdrop {
    background: rgba(17, 17, 17, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

dialog.cg-modal[open]::backdrop {
    animation: cg-fade-in 0.22s ease-out;
}

dialog.cg-modal.is-closing::backdrop {
    animation: cg-fade-out 0.2s ease-in forwards;
}

dialog.cg-modal .cg-modal__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: inherit;
}

dialog.cg-modal .cg-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 20px 20px 24px;
    background: var(--cg-modal-accent);
    color: var(--cg-modal-accent-fg);
}

dialog.cg-modal .cg-modal__heading {
    min-width: 0;
}

dialog.cg-modal .cg-modal__type {
    display: block;
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

dialog.cg-modal .cg-modal__type[hidden] {
    display: none;
}

dialog.cg-modal .cg-modal__title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

dialog.cg-modal .cg-modal__close {
    all: unset;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -6px -4px 0 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

dialog.cg-modal .cg-modal__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

dialog.cg-modal .cg-modal__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

dialog.cg-modal .cg-modal__body {
    padding: 22px 24px 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Stops the page behind scrolling on mobile */
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}

dialog.cg-modal .cg-modal__body p {
    margin: 0 0 0.85em;
}

dialog.cg-modal .cg-modal__body > :first-child { margin-top: 0; }
dialog.cg-modal .cg-modal__body > :last-child  { margin-bottom: 0; }

dialog.cg-modal .cg-modal__body img,
dialog.cg-modal .cg-modal__body iframe,
dialog.cg-modal .cg-modal__body video {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

dialog.cg-modal .cg-modal__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Lock page scroll while the modal is open */
html.cg-modal-open {
    overflow: hidden;
}

@keyframes cg-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes cg-modal-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes cg-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@keyframes cg-sheet-out {
    from { transform: none; }
    to   { transform: translateY(100%); }
}

@keyframes cg-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    dialog.cg-modal[open],
    dialog.cg-modal[open]::backdrop {
        animation: none;
    }
}

.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;
    }

    /* Modal becomes a bottom sheet on phones */
    dialog.cg-modal {
        width: 100%;
        max-height: 88vh;
        margin: auto 0 0;
        border-radius: 14px 14px 0 0;
    }

    dialog.cg-modal[open] {
        animation: cg-sheet-in 0.25s ease-out;
    }

    dialog.cg-modal.is-closing {
        animation: cg-sheet-out 0.2s ease-in forwards;
    }

    dialog.cg-modal .cg-modal__header {
        padding: 18px 16px 16px 20px;
    }

    dialog.cg-modal .cg-modal__title {
        font-size: 1.2em;
    }

    dialog.cg-modal .cg-modal__body {
        padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); /* Clears the iPhone home bar */
        font-size: 15px;
    }
}

@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;
    }

}