/* Custom navigation for projects */
.header-navigation {
    display               : grid;
    padding               : 0 0.5rem 1rem;
    grid-template-columns : 1fr;
    height                : 100%;
    gap                   : var(--gap-v) var(--gap-h);
    grid-template-rows    : auto auto 1fr auto;
    grid-template-areas   : "primary"
                            "secondary"
                            "extra"
                            "buttons";
}
.header-navigation-buttons {
    padding-right : 0;
}
.header-navigation-secondary {
    grid-area : secondary;
}
/* The Style for the Open navigation */
.navigation-is-open {

    .header {
        width  : var(--sidebar-width);
        height : calc(100vh - (var(--side-spacer) * 2));
    }

}
/* The Intro Block */
.progetto-intro-container {
    background : var(--accent);
    color      : var(--light);
    padding    : var(--side-spacer);
    min-height : unset;
}
.progetto-intro-content {
    grid-area             : innergrid;
    font                  : var(--serif-m);
    padding               : 5rem 0 10rem;
    display               : grid;
    grid-template-columns : 15fr 2fr;
    gap                   : var(--gap-v) var(--gap-h);
}
.progetto-inner-content-text,
.event-prices {
    grid-column : 1;
}
.progetto-intro-content p:not(:last-child) {
    margin-bottom : 1rem;
}
/* Custom Footer for the project page */
.footer {
    /* Grid area is gonna be a bit wild */
    grid-template-rows : auto auto auto auto auto;
    grid-template-areas : "logo logo logo logo logo logo logo logo logo logo logo logo . . . . . . . . . . . ."
                          "logo logo logo logo logo logo logo logo logo logo logo logo addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione"
                          "logo logo logo logo logo logo logo logo logo logo logo logo contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts"
                          ". . . . . . . . . . . . social social social social social social social social social social social social"
                          "buttons buttons buttons buttons buttons buttons . . . . . . credits credits credits credits credits credits credits credits credits credits credits credits";
}
/* Make the footer black in some circumstances */
#progetto[data-events="0"] {
    .progetto-intro-container {
        border-bottom : 1px solid var(--light);
    }
}
.footer-logo small {
    font : var(--sans);
}
.footer-social {
    margin-top : 3rem;
}
.footer-buttons {
    align-self: end;
}
.footer-credits {
    justify-self: start;
    margin-top : 5rem;
}
@media (width <= 1100px) {

    .footer {
        grid-template-rows : auto auto auto auto;
        grid-template-areas : "logo logo logo logo logo logo logo logo addressfondazione addressfondazione addressfondazione addressfondazione"
                              "logo logo logo logo logo logo logo logo contacts contacts contacts contacts"
                              ". . . . . . . . social social social social"
                              "buttons buttons buttons buttons buttons buttons . . credits credits credits credits";
    }

}
@media (width <= 700px) {

    .footer {
        grid-template-rows : auto auto auto auto auto auto;
        grid-template-areas : "logo logo logo logo logo logo logo logo logo logo logo logo"
                              "addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione addressfondazione"
                              "contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts"
                              "social social social social social social social social social social social social"
                              "credits credits credits credits credits credits credits credits credits credits credits credits"
                              "buttons buttons buttons buttons buttons buttons buttons buttons buttons buttons buttons buttons";
    }

    .footer-credits {
        margin-top : 1rem;
    }

    .footer-social {
        margin-top : 1rem;
    }

}
/* Main Content Container */
.progetto-content {
    position           : relative;
    display            : grid;
    grid-template-rows : auto auto auto;
}
/* Days Navigation */
.progetto-nav-days-container {
    position   : sticky;
    top        : 0;
    min-height : unset;
    padding    : var(--side-spacer);
    grid-row   : 1;
    grid-column : 1;
    z-index: 10;
}
.progetto-nav-days {
    grid-area : innergrid;
    display   : flex;
    gap       : 0.25rem;
}
.progetto-nav-day {
    text-transform : capitalize;
    flex           : 1 1 auto;
}
.progetto-nav-day.in-view {
    pointer-events : none;
    background     : var(--accent);
    color          : var(--light);
}
/* Programma */
.progetto-program-container {
    min-height : unset;
    padding    : var(--side-spacer);
}
.progetto-program-content {
    grid-area      : innergrid;
    padding-bottom : 15rem;
}
.progetto-program-day-container {
    margin-top : 3rem;
}
.progetto-program-day-title {
    font           : var(--serif-l);
    margin-bottom  : 1rem;
    text-transform : capitalize;
}
.progetto-program-day-note {
    font : var(--sans-m);
}
.progetto-program-events-container {
    margin-top : 2rem;
}
/* Single Event Entry */
.progetto-entry {
    border-bottom  : 1px solid var(--dark);
    padding-bottom : 1rem;
}
.progetto-entry-visible,
.progetto-entry-hidden {
    display               : grid;
    grid-template-columns : 7fr 5fr 5fr;
    gap                   : var(--gap);
    grid-template-areas   : "header header header"
                            "titles notes location";
}
.progetto-entry-visible {
    cursor : pointer;
}
.progetto-entry-visible:hover {
    color : var(--accent);
}
.progetto-entry-header {
    grid-area             : header;
    display               : grid;
    grid-template-columns : auto 1fr;
    gap                   : var(--gap);
    align-items           : center;
}
.progetto-entry-number {
    display         : flex;
    text-align      : center;
    justify-content : center;
    align-items     : center;
    font            : var(--sans-s);
    border-radius   : 50%;
    aspect-ratio    : 1;
    width           : 1rem;
    height          : 1rem;
    border          : 1px solid currentColor;
}
.progetto-entry-times {
    font           : var(--sans-s);
    text-transform : uppercase;
}
.progetto-entry-titles {
    grid-area : titles;
    font : var(--serif);
    text-wrap: balance;
}
.progetto-entry-subtitle {
    color : var(--accent);
}
.progetto-entry-notes {
    grid-area  : notes;
    align-self : end;
    font       : var(--sans-s);
}
.progetto-entry-location {
    grid-area  : location;
    align-self : end;
}
.progetto-entry-location-title {
    font : var(--sans-s);
}
.progetto-entry-location-text {
    font : var(--sans);
}
.progetto-entry-hidden {
    grid-template-areas : ". content content";
}
.progetto-entry-hidden-content {
    grid-area   : content;
    padding-top : 1rem;
}
.progetto-entry-hidden-block:not(:last-child) {
    margin-bottom : 1rem;
}
.progetto-entry-hidden-title {
    font : var(--sans-s);
}
/* Subtle adjustment on small-ish screens */
@media (width > 1100px) and (width < 1300px) {
    .progetto-entry-visible {
        grid-template-columns : 1fr 1fr 2fr;
        grid-template-areas   : "header header header"
                                "titles titles location"
                                "titles titles notes";
    }

    .progetto-entry-hidden {
        grid-template-columns : 1fr 1fr 2fr;
        grid-template-areas   : "content content content";
    }
}
/* Subtle adjustment on small-ish screens */
@media (width < 700px){
    .progetto-entry-visible {
        grid-template-columns : 1fr 1fr;
        grid-template-areas   : "header header"
                                "titles location"
                                "titles notes";
    }

    .progetto-entry-hidden {
        grid-template-columns : 1fr 1fr;
        grid-template-areas   : "content content";
    }
}
@media (width < 450px){
    .progetto-entry-visible {
        grid-template-columns : 1fr;
        grid-template-areas   : "header"
                                "titles"
                                "location"
                                "notes";
    }

    .progetto-entry-hidden {
        grid-template-columns : 1fr;
        grid-template-areas   : "content";
    }
}
/* Category Divider */
.progetto-program-category {
    font           : var(--nav);
    background     : var(--dark);
    color          : var(--light);
    text-transform : uppercase;
    padding        : 0.33rem 0.5rem 0.187rem;
    display        : flex;
    position       : sticky;
    top            : 2.75rem;
    margin-bottom : 1rem;
}
/* Progetto Mappa */
.progetto-map-inside-container {
    background  : #E7E7E7;
    grid-row    : 1 / 3;
    grid-column : 1;
    min-height  : unset;
    padding     : var(--side-spacer);
}
.progetto-map-inside {
    grid-area             : innergrid;
    padding               : 7rem 0 5rem;
    display               : grid;
    grid-template-columns : 1fr;
    gap : 1rem 0;
}
.progetto-map {
    max-width: 30rem;
}
.map-icon {
    fill : var(--accent);
}
.map-icon-bg {
    fill : var(--accent);
}
.map-icon[aria-disabled] {
    --accent : #b8b8b8;
}
.progetto-map-places {
    list-style            : none;
    display               : grid;
    gap                   : 0.125rem 1rem;
    grid-template-columns : repeat(2, 1fr);
}
.progetto-map-place {
    display               : grid;
    grid-template-columns : auto 1fr;
    gap                   : 2rem;
    font                  : var(--sans);
}
.progetto-map-place[aria-disabled] {
    --accent : #b8b8b8;
}
.progetto-map-number {
    background      : var(--accent);
    border-radius   : 50%;
    font            : var(--sans-s);
    display         : flex;
    align-items     : center;
    justify-content : center;
    text-align      : center;
    color           : var(--light);
    width           : 1.125rem;
    height          : 1.125rem;
}
.progetto-map-outside-container {
    grid-row    : 1 / 3;
    grid-column : 1;
    position    : relative;
}
.progetto-map-mapbox {
    width  : 100vw;
    height : 100vh;
}
.progetto-map-marker {
    aspect-ratio : 1;
    width        : 1.5rem;
    height       : 1.5rem;
    border-radius: 50%;
    display : flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font : var(--sans-s);
    background: var(--accent);
    border: 1px solid var(--accent);
    color : var(--light);
    cursor : pointer;
}
.progetto-map-marker:hover {
    background   : var(--dark);
    border-color : var(--dark);
}
/* Map Mobile Adjustments */
@media (width > 1300px) {
    .progetto-map-inside {
        grid-template-columns : 1fr 1fr;
    }
    .progetto-map {
        justify-self : center;
    }
    .progetto-map-places {
        margin                : auto;
        grid-template-columns : 1fr;
    }
}
@media (width < 1100px) {
    .progetto-map {
        justify-self : center;
    }
    .progetto-map-places {
        margin                : auto;
        grid-template-columns : repeat(2,1fr);
    }
}
@media (width < 700px) {
    .progetto-map-places {
        grid-template-columns : 1fr;
    }
}
/* The Hidden Cards */
.progetto-map-cards {
    position       : absolute;
    top            : 0;
    left           : 0;
    bottom         : 0;
    pointer-events : none;
}
.progetto-map-cards-inner {
    height       : 100%;
    position     : relative;
    padding-left : var(--side-spacer);
}
.progetto-map-card {
    position   : sticky;
    top        : calc(4.3rem);
    width      : var(--sidebar-width);
    background : var(--light);
    padding    : 0.5rem;
    display    : none;
}
.progetto-map-card-inside {
    padding : 0;
}
.progetto-map-card.card-active {
    display        : block;
    pointer-events : all;
}
.progetto-map-card-room {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap : 0.5rem;
    background: var(--accent);
    color : var(--light);
    padding : 0.25rem 0.5rem;
    align-content: center;
}
.progetto-card-room-number {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-align: center;
    font : var(--sans-s);
    color : var(--accent);
    background: var(--light);
    aspect-ratio: 1;
}
.progetto-card-room-name {
    font : var(--nav);
    text-transform: uppercase;
    align-self: center;
    text-box-trim: trim-both;
    text-box-edge: cap;
}
.progetto-map-card-evento {
    padding : 0.5rem;
}
.progetto-card-header {
    grid-area: header;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap);
    align-items: center;
    margin-bottom : 0.5rem;
}
.progetto-card-number {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font: var(--sans-s);
    border-radius: 50%;
    aspect-ratio: 1;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--accent);
    color : var(--light);
    background: var(--accent);
}
.progetto-card-time {
    font: var(--sans-s);
    text-transform: uppercase;
}
.progetto-card-titles {
    grid-area: titles;
    font: var(--serif);
    text-wrap: balance;
}
.progetto-card-subtitle {
    color : var(--accent);
}
.progetto-card-buttons {
    margin-top : 1rem;
    display    : flex;
    gap        : 0.5rem;
}
.sidebar {
    pointer-events: none;
}
.sidebar-navigation-item {
    pointer-events: all;
}
@media (width <= 1100px) {
    .sidebar {
        display : none;
    }

    .progetto-nav-days-container {
        top : 1.75rem;
    }

    .progetto-map-cards {
        right : 0;
    }

    .progetto-map-card {
        top       : calc(4.2rem);
        width     : 100%;
        max-width : 25rem;
    }

    .progetto-map-cards-inner {
        padding-right : var(--side-spacer);
    }


}
.event-prices {
    margin-top : 3rem;
}
.accordion-title:hover {
    color: var(--dark);
}
.event-prices-tables {
    display               : grid;
    grid-template-columns : repeat(1,1fr);
    gap                   : var(--gap-v) 3rem;
    margin-bottom         : 2rem;
    grid-column           : 1 / -1;
}
@media (width > 700px) and (width < 1100px) {
    .event-prices-tables {
        grid-template-columns : repeat(3,1fr);
    }
}
@media (width > 1300px) {
    .event-prices-tables {
        grid-template-columns : repeat(3,1fr);
    }
}
.event-prices-table:only-child {
    grid-column : 1 / -1;
}
.event-prices-table-title {
    font : var(--sans-sl);
}
.event-prices-table-entry {
    border-bottom   : 1px solid currentColor;
    padding         : 0.25rem 0;
    display         : flex;
    justify-content : space-between;
}
.event-prices-table-entry:hover {
    background : var(--accent-light);
}
/* Text editing inside the prices tab is slightly different */
.event-tickets .event-tickets-text h2 {
    font          : var(--sans);
    margin-bottom : 0;
}
.event-tickets .event-tickets-text h2:not(:first-child) {
    margin-top : 2rem;
}
.accordion-text {
    grid-column: 1/-1;
}