/* The Home Categories Section */
.home-category {
    display             : grid;
    grid-template-areas : "containers";
}
@media (width <= 800px) {
    .home-category {
        display             : grid;
        grid-template-areas : "title" "containers";
    }   
}
.home-category-title-container {
    grid-area : title;
    padding   : 1rem;
    position  : sticky;
    top       : 1.75rem;
    z-index   : 9999;
}
.home-category-title {
    padding             : 0.3rem 0.5rem 0.2rem;
    font                : var(--nav);
    color               : var(--dark);
    background          : var(--light);
    text-transform      : uppercase;
    white-space         : nowrap;
    transition-property : all;
}
.home-category-images {
    position   : relative;
    background : var(--dark);
}
/* The Sidebar Container */
.home-category-links-container {
    padding        : 1rem;
    grid-area      : containers;
    position       : relative;
    pointer-events : none;
    z-index        : var(--sidebar-home);
}
/* The Sidebar containing the links to the shows*/
.home-category-links {
    grid-area  : sidebar;
    position   : sticky;
    top        : 2.5rem;
    color      : var(--light);
    list-style : none;
    align-self : start;
    z-index    : 10;
}
/* Different spacing for different sections */
.home-category[data-index="0"] .home-category-links { top : calc(((1.5rem + 3px) * 2) + 1rem) }
.home-category[data-index="1"] .home-category-links { top : calc(((1.5rem + 3px) * 3) + 1rem) }
.home-category[data-index="2"] .home-category-links { top : calc(((1.5rem + 3px) * 4) + 1rem) }
.home-category[data-index="3"] .home-category-links { top : calc(((1.5rem + 3px) * 5) + 1rem) }
.home-category[data-index="4"] .home-category-links { top : calc(((1.5rem + 3px) * 6) + 1rem) }
.home-category[data-index="5"] .home-category-links { top : calc(((1.5rem + 3px) * 7) + 1rem) }
.home-category-link {
    font           : var(--serif-s);
    border-bottom  : 1px solid var(--light);
    opacity        : 0.75;
    pointer-events : all;
}
.home-category-link a {
    padding-bottom : 1rem;
    padding-top    : 1rem;
    display        : block;
}
.home-category-link:hover {
    opacity : 1;
}
/* We need a main container around all the events */
.home-category-events-container {
    grid-area : containers;
}
/* Single Event container */
.home-category-event {
    
    min-width           : 100%;
    height              : 110svh;
    padding             : 0;
    display             : grid;
    grid-template-areas : "content";
    grid-template-rows  : minmax(0,1fr);
    position            : relative;
}
.home-category-event::after {
    content          : "";
    position         : absolute;
    inset            : 0;
    background-image : radial-gradient(ellipse at top right, rgba(0,0,0,0.5) 50%, transparent);
    z-index          : 0;
}
/* The Background Image */
.home-category-image {
    display         : block;
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center center;
    grid-area       : content;
}
/* The Information container */
.home-category-event-content {
    grid-area : content;
    padding : 1rem 1rem 1rem calc(var(--sidebar-width) + 2rem);
    display : grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 50% 1.5rem 1fr;
    gap : var(--gap-v) var(--gap-h);
    grid-template-areas: "title shows" "title button";
    z-index: 1;
}
.home-category-event-information {
    grid-area  : title;
    align-self : end;
}
.event-is-open .home-category-event-information {
    display               : grid;
    grid-template-columns : 1fr 1.5rem;
    gap                   : var(--gap-h);
}
.home-category-event-title {
    font      : var(--serif-l);
    color     : var(--light);
    text-wrap : balance;
}
.home-category-event-subtitle {
    font  : var(--sans-m);
    color : var(--light);
}
.home-category-event-open {
    width : 1.5rem;
    fill  : var(--light);
    align-self: center;
}
/* The list of shows and the extra button */
.home-category-event-meta {
    align-self : end;
    grid-area  : shows;
    color      : var(--light);
}
.home-category-event-show {
    display       : block;
    margin-bottom : 0.5rem;
}
.home-category-event-show::first-letter {
    text-transform: uppercase;
}
/* The Grid Version of the category */
.home-category-grid {
    background    : #F5F5F5;
    border-bottom : 3px solid var(--accent);
}
.home-category-grid .home-category-events-container {
    padding    : 6rem 1rem;
    min-height : unset;
}
.home-category-events-grid {
    justify-content       : space-between;
    grid-area             : innergrid;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 6rem;
}
.home-category-grid-item-title {
    color         : var(--accent);
    font          : var(--serif-m);
    margin-bottom : 0.5rem;
}
/* The Buy Button */
.home-category-event-button {
    grid-area : button;
}
/* Mobile Version of the category on the homepage */
@media (width <= 800px) {

    .home-category-event {
        height              : 90svh;
        padding             : 0;
        display             : grid;
        grid-template-rows  : 1fr 1.75rem;
        grid-template-areas : "content" "button";
        gap                 : 0.5rem;

    }

    .home-category-image {
        grid-area : content;
    }

    .home-category-event-content {
        grid-row-start      : content;
        grid-row-end        : button;
        grid-column         : 1;
        display             : grid;
        grid-template-rows  : 1fr 1fr auto;
        grid-template-areas : "title" "shows" "button";
        gap                 : 0.5rem;
        padding: 0;
        grid-template-columns: 1fr;
    }

    .home-category-event-information {
        align-self : start;
        padding    : 3rem 1rem 1rem;
    }

    .home-category-event-meta {
        align-self : end;
        padding    : 1rem;
    }

    .home-category-links-container {
        display: none;
    }

    .home-category-event-wrapper {
        padding : 0rem 0 2rem 1rem;
        width   : 90vw;
    }

    .home-category-event-wrapper:last-child {
        padding-right : 1rem;
        width   : calc(90vw + 1rem);
    }

    .home-category-events-container:after {
        content : 'flickity';
        display : none;
    }

    .home-category-events-grid {
        grid-template-columns: 1fr;
    }


}
@media (width > 800px) {
    .home-category-title-container {
        display: none;
    }
}
/* Homepage opening section */
.home-spaces {
    background : var(--dark);
    padding    : 8rem 1rem;
    color      : var(--light);
}
/* The Content Container */
.home-spaces-content {
    grid-column : 1 / -1;
    display               : grid;
    grid-template-columns : subgrid;
    grid-template-rows    : auto 1fr auto;
    gap                   : var(--gap-v) var(--gap-h);
    grid-template-areas   : "intro intro intro intro intro intro intro intro intro intro intro intro"
                            "map map map map map map map map map map map map"
                            "legend legend legend legend legend legend legend legend legend legend legend legend"
                            "button button button button button button button button button button button button";
}
/* Intro text */
.home-spaces-intro {
    font      : var(--serif-m);
    padding   : 0 0 4rem;
    grid-area : intro;
}
/* Section title */
.home-spaces-title {
    font          : var(--serif-l);
    margin-bottom : 3rem;
}
/* The Map */
.home-spaces-map {
    grid-area : map;
}
/* Map's Legend */
.home-spaces-legend {
    grid-area     : legend;
    align-self    : end;
    list-style    : none;
    counter-reset : legend;
}
.home-spaces-legend li {
    counter-increment : legend;
    margin-top : 0.25rem;
    display : flex;
    align-items: center;
    gap : 2rem;
}
.home-spaces-legend li::before {
    font : var(--sans-s);
    content : counter(legend);
    aspect-ratio: 1;
    width : 1rem;
    height: 1rem;
    display: inline-block;
    border: 1px solid currentColor;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
    line-height: calc(1rem - 2px);
}
/* Button */
.home-spaces-button {
    grid-area  : button;
    margin-top : 0.5rem;
}
/* Desktop Adjustments */
@media (width > 1100px) {

    .home-spaces-content {
        grid-template-rows  : auto 1fr auto;
        gap                 : var(--gap-v) var(--gap-h);
        grid-template-areas : "intro intro intro intro intro intro intro intro intro intro intro intro intro intro intro ."
                              "map map map map map map map map map . legend legend legend legend legend legend"
                              "map map map map map map map map map . button button button button button button";
    }
}
@media (width < 700px) {
    .home-spaces {
        padding : 6rem 1rem 3rem;
    }
    .home-spaces-content {
        grid-template-rows    : auto auto auto auto;
        grid-template-areas   : "intro intro intro intro intro intro intro intro intro intro intro intro"
                                ". map map map map map map map map map map ."
                                "legend legend legend legend legend legend legend legend legend legend legend legend"
                                "button button button button button button button button button button button button";
    }
}
/* Homepage opening section */
.home-events {
    background : var(--accent);
    color      : var(--light);
    padding    : 1rem;
    min-height : unset;
}
.home-events-intro {
    grid-column : 1 / -2;
    padding     : 4rem 0 2rem;
}
.home-events-text {
    font          : var(--serif-m);
    margin-bottom : 3rem;
}
/* Section title */
.home-events-title {
    font          : var(--serif-l);
    margin-bottom : 3rem;
}
.home-events-video-container {
    position : relative;
    background: var(--dark);
}
.home-events-video {
    display : block;
    width   : 100%;
}
.home-events-button {
    bottom    : 3rem;
    left      : 1rem;
    right     : 1rem;
    max-width : 100%;
    color     : var(--light);
}
@media (width > 1100px) {
    .home-events-intro {
        padding : 6rem 0 6rem;
    }
    .home-events-button {
        right     : unset;
        width     : 15rem;
    }
}
/* Homepage opening section */