/* The Home Categories Section */
.home-category {
    display             : grid;
    grid-template-areas : "containers";
}
@media (width <= 1100px) {
    .home-category {
        display             : grid;
        grid-template-areas : "title" "containers";
    }   
}
.home-category-title-container {
    grid-area : title;
    padding   : 1rem var(--side-spacer);
    position  : sticky;
    top       : 1.5rem;
    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 var(--side-spacer);
    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 <= 1100px) {

    .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 var(--side-spacer) 1rem;
    }

    .home-category-event-meta {
        align-self : end;
        padding    : var(--side-spacer);
    }

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

    .home-category-event-wrapper {
        padding : 0rem 0 2rem var(--side-spacer);
        width   : 90vw;
    }

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

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

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


}
@media (width > 1100px) {
    .home-category-title-container {
        display: none;
    }
}
/* Homepage opening section */
#home #spazi {
    min-height: unset;
}
.home-spaces {
    background : var(--dark);
    padding    : 8rem var(--side-spacer);
    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;
    align-content: start;
    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";
}
/* 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;
}
@media (width < 1100px) {
    .home-spaces {
        padding : 6rem var(--side-spacer) 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 var(--side-spacer);
    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%;
    aspect-ratio : 16/9;
    object-fit   : cover;
}
.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 */