/* The Home Categories Section */
.home-category {
    display             : grid;
    grid-template-areas : "containers";
    position            : relative;
}
.home-category-title-container {
    grid-area : containers;
    padding   : 3px var(--side-spacer);
    position  : sticky;
    top       : 2rem;
    z-index   : var(--z-titles);
    align-self: start;
}
.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        : calc(1.5rem + 3px) 1rem 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;
    position  : relative;
}
/* 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      : rgba(0,0,0,0.5);
    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;
    display              : grid;
    align-items          : center;
    grid-template-columns: var(--grid-home-category);
    gap                  : var(--side-spacer);
    grid-template-areas  : ". content";
    z-index              : 1;
    padding : var(--side-spacer);
}
.home-category-event-content-inner {
    grid-area     : content;
    padding-bottom: 17vh;
    max-width     : 35rem;
    justify-self  : center;
    width         : 100%;
}
.home-category-event-information {
    width: 100%;
}
.home-category-event-title {
    font           : var(--serif-l-fluid-home);
    letter-spacing : -1%;
    color          : var(--light);
    text-wrap      : balance;
}
.home-category-event-subtitle {
    font      : var(--sans-m);
    color     : var(--light);
    margin-top: 0.5rem;
    max-width : 25rem;
}
/* The list of shows and the extra button */
.home-category-event-meta {
    grid-area : meta;
    color     : var(--light);
    width     : 100%;
    margin-top: 2rem;

}
.home-category-event-progetto {
    padding-bottom : 1rem;
}
/* The Grid Version of the category */
.home-category-grid {
    background : #F5F5F5;
}
.home-category-grid .home-category-events-container {
    padding    : 6rem var(--side-spacer);
    min-height : unset;
}
.home-category-events-grid-container {
    grid-template-columns: var(--grid-home-category);
    gap                  : 0 2rem;
    grid-template-areas  : ". content";
    display              : grid;
}
.home-category-events-grid {
    grid-area            : content;
    justify-content      : start;
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem , 1fr));
    gap                  : 4rem 2rem;
}
.home-category-grid-item-title {
    color         : var(--accent);
    font          : var(--serif-m);
    margin-bottom : 0.5rem;
}
/* The Buttons Container */
.home-category-event-buttons {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 0.5rem;
}
/* Buttons are stacked vertically on the grid items */
.home-category-grid-item .home-category-event-buttons {
    grid-template-columns : 1fr;
}
/* Mobile Version of the category on the homepage */
@media (width <= 1100px) {

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

    }

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

    .home-category-events-grid-container {
        grid-template-columns  : 1fr;
        grid-template-areas : "content";
    }

    .home-category-events-grid {
        gap : 4rem;
    }

    .home-category-grid-item-title {
        font: var(--serif-l);
    }

    .home-category-event-content {
        grid-area             : content;
        grid-column           : 1;
        display               : grid;
        grid-template-areas   : "content content";
        gap                   : 0.5rem;
        padding               : 0 var(--side-spacer) 10rem;
        grid-template-columns : 1fr;
        align-content         : end;
    }

    .home-category-event-content-inner {
        padding-bottom: 0;
        max-width     : unset;
        justify-self  : start;
        width         : 100%;
    }

    .home-category-event-information {
        align-self : start;
        padding    : 0;
    }

    .home-category-event-subtitle {
        font      : var(--sans-l);
        margin-top: 0.35rem;
    }


    .home-category-event-meta {
        padding    : var(--side-spacer);
        margin-top : 1.5rem;
        padding    : 0;
        max-width  : unset;
    }

    .home-category-event-meta .event-date-container {
        margin-bottom : 0.5rem;
    }

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

}
@media (width > 1100px) {
    .home-category-title-container {
        display: none;
    }
    .home-category-events-grid {
        padding : 0 5vw;
    }
}
@media (width < 450px) {
    .home-category-events-grid {
        grid-template-columns: 1fr;
    }
}
@media (width <= 500px) {
    .home-category-event-buttons {
        grid-template-columns: 1fr;
    }
}
/* Compact the links on the sidebar if the screen is not tall enough */
@media (height < 800px) {
    .home-category-link {
        font : var(--serif-xs);
    }
    .home-category-link a {
        padding-top    : 0.75rem;
        padding-bottom : 0.75rem;
    }
}
/* Homepage opening section */
.home-spaces {
    background           : var(--dark);
    padding              : 8rem var(--side-spacer);
    color                : var(--light);
    grid-template-columns: var(--grid-home-category);
    gap                  : var(--side-spacer);
    display              : grid;
    gap                  : 0 2rem;
    grid-template-areas  : ". content";
}
/* The Content Container */
.home-spaces-content {
    grid-area             : content;
    display               : grid;
    grid-template-columns : 1fr;
    grid-template-rows    : auto auto 1fr auto auto;
    align-content         : start;
    gap                   : var(--gap-v) var(--gap-h);
    grid-template-areas : "title"
                          "intro"
                          "map"
                          "legend";
}
/* Intro text */
.home-spaces-text {
    font      : var(--serif-m);
    padding   : 0 0 4rem;
    grid-area : intro;
}
/* Section title */
.home-spaces-title {
    font          : var(--serif-l);
    margin-bottom : 3rem;
    grid-area : title;
}
/* The Map */
.home-spaces-map {
    grid-area : map;
    max-width : 35rem;
}
.home-spaces-map .map-icon-bg {
    fill : var(--dark);
    stroke : var(--light);
    stroke-width : 1px;
}
.map-icon {
    cursor : pointer;
}
.home-spaces-map .map-icon:hover .map-icon-bg,
.home-spaces-map .map-icon.hovered .map-icon-bg {
    fill : var(--accent);
}
/* Map's Legend */
.home-spaces-legend-wrapper {
    grid-area : legend;
    align-self: end;
}
.home-spaces-legend {
    list-style : none;
}
.home-spaces-legend li a {
    display    : flex;
    align-items: center;
    gap        : 2rem;
}
.home-spaces-legend li a span:first-child {
    position : relative;
}
.home-spaces-legend svg {
    fill    : currentColor;
    width   : 1.25rem;
    display : block;
}
.home-spaces-legend svg:first-child {
    position: relative;
    z-index : 1;
}
.home-spaces-legend svg:last-child {
    position: absolute;
    inset   : 0;
    z-index : 0;
    opacity: 0;
    fill : var(--accent);
}
.home-spaces-legend li.hovered svg,
.home-spaces-legend li:hover svg {
    opacity : 1;
}
/* Button */
.home-spaces-buttons {
    grid-area : button;
    display   : grid;
    gap       : 0.5rem;
    margin-top: 1.5rem;
}
@media (width <= 1100px) {
    .home-spaces {
        grid-template-areas  : "content content";
        padding : var(--side-spacer) var(--side-spacer) 3rem;
    }

    /* Make the title a sticky bar */
    .home-spaces-title {
        background    : var(--light);
        padding       : calc(0.25rem + 1px) 0.5rem calc(0.25rem - 1px);
        font          : var(--nav);
        color         : var(--dark);
        text-transform: uppercase;
        position      : sticky;
        top           : calc(2rem + 3px);
        margin-bottom : 1rem;
    }

}
@media (width > 1100px) {
    .home-spaces-content { padding: 0 5vw; }
}
@media (width > 800px) and (width <= 1100px) {
    .home-spaces-content {
        grid-template-columns : 3fr 2fr;
        gap : 0 2rem;
        grid-template-areas   : "title title"
                                "intro intro"
                                "map legend";
    }
}
@media (width > 1300px) {
    .home-spaces-content {
        grid-template-columns : 3fr 2fr;
        gap : 0 2rem;
        grid-template-areas   : "title title"
                                "intro intro"
                                "map legend";
    }
}
/* Homepage opening section */
.home-events {
    background           : var(--accent);
    color                : var(--light);
    padding              : 8rem var(--side-spacer);
    color                : var(--light);
    grid-template-columns: var(--grid-home-category);
    gap                  : var(--side-spacer);
    display              : grid;
    gap                  : 0 2rem;
    grid-template-areas  : "content content";
    position             : relative;
}
.home-events-intro {
    grid-area: content;
}
.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;
    cursor       : pointer;
}
.home-events-video-container::after {
    content : "";
    position: absolute;
    inset: 0;
    background: black;
    opacity: .3;
    pointer-events: none;
}
.home-events-video-play {
    position: absolute;
    top : 50%;
    left : 50%;
    width : 3rem;
    height : 3rem;
    z-index: 1;
    transform : translate(-50%,-50%);
    pointer-events: none;
}
.home-events-video-play circle {
    fill : var(--accent);
}
.home-events-video-container.playing::after { display : none }
.home-events-video-container.playing .home-events-video-play { display : none }
.home-events-button {
    bottom    : 3rem;
    left      : 1rem;
    right     : 1rem;
    max-width : 100%;
    color     : var(--light);
}
@media (width > 1100px) {
    .home-events {
        grid-template-areas: ". content";
    }
    .home-events-intro {
        padding: 0 5vw;
    }
    .home-events-button {
        right     : unset;
        width     : 15rem;
    }
}
@media (width <= 1100px) {
    
    .home-events {
        padding : var(--side-spacer);
    }

    .home-events-text {
        margin-top : 2rem;
    }

    /* Make the title a sticky bar */
    .home-events-title {
        background     : var(--light);
        padding        : calc(0.25rem + 1px) 0.5rem calc(0.25rem - 1px);
        font           : var(--nav);
        color          : var(--dark);
        text-transform : uppercase;
        position       : sticky;
        top            : calc(2rem + 3px);
        margin-bottom  : unset;
    }
}
/* Homepage opening section */
#home .sidebar-inner {
    grid-template-rows: 1fr;
    grid-template-areas: "navigation";
}
@media (width <= 1100px) {
    #home .sidebar { display : none; }
}
/* The Special Project Banner */
.progetto-banner-wrapper {
    position       : absolute;
    inset          : 0 0 0 auto;
    z-index        : var(--z-banner);
    padding-right  : var(--side-spacer);
    pointer-events : none;
}
/* The Inner Spacer */
.progetto-banner-inner-wrapper {
    height             : 100%;
    display            : grid;
    grid-template-rows : 1fr auto auto calc(100% - 100dvh);
    position           : relative;
    width              : var(--sidebar-width);
}
.progetto-banner-header {
    position             : sticky;
    top                  : var(--side-spacer);
    display              : grid;
    padding              : 0 0 0 0.5rem;
    grid-template-columns: 1fr auto auto;
    align-items          : center;
    align-self           : end;
    font-weight          : 500;
}
.progetto-banner-header-icon {
    width  : 1.5rem;
    height : 1.5rem;
}
.progetto-banner-header-icon svg {
    fill : var(--light);
}
.progetto-banner-header,
.progetto-banner-content {
    color         : var(--light);
    background    : var(--accent);
    pointer-events: all;
}
.progetto-banner-content {
    margin-bottom : var(--side-spacer);
}
.progetto-banner-content-description {
    padding : 1rem 0.5rem;
}
.progetto-banner-content-link {
    padding : 0.5rem;
    display: block;
}
/* Mobile Adjustments */
@media (width <= 1100px) {

    .progetto-banner-wrapper {
        inset : 0 0 auto 0;
        padding : 2.5rem var(--side-spacer) 0;
    }

    .progetto-banner-inner-wrapper {
        width : 100%;
    }

    .progetto-banner-content {
        margin-bottom : unset;
    }

    .progetto-banner-header {
        position: static;
    }

}