#progetto body {
    background : #F5F5F5;
}

/* 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 : 1fr;
    gap                   : var(--gap-v) var(--gap-h);
}

.progetto-inner-content-text,
.event-prices {
    grid-column : 1;
}

/* 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 addressfondazione addressfondazione addressfondazione"
                          "logo logo logo contacts contacts contacts"
                          ". . . social social social"
                          "buttons buttons buttons credits credits credits";
}

/* Make the footer black in some circumstances */

#progetto[data-status="introonly"] {
    .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 <= 700px) {

    .footer {
        grid-template-rows : auto auto auto auto auto auto;
        grid-template-areas : "logo logo"
                              "addressfondazione addressfondazione"
                              "contacts contacts"
                              "social social"
                              "credits credits"
                              "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;
    padding-top     : 3px;
}

/* Days Navigation */

.progetto-nav-days-container {
    position    : sticky;
    top         : var(--stickybars-distance);
    min-height  : unset;
    padding     : 0 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 {
    flex   : 1 1 auto;
    cursor : pointer;
    height : 1.5rem;
}

.progetto-nav-day:first-letter {
    text-transform : capitalize;
}

.progetto-nav-day[aria-selected]{
    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;
}

.progetto-program-day-title:first-letter {
    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;
    margin-bottom  : 1rem;
}

.progetto-entry

.progetto-entry:has(+ .progetto-program-category) {
    border-bottom  : unset;
    padding-bottom : none;
}

.progetto-entry-visible,
.progetto-entry-hidden {
    display               : grid;
    gap                   : var(--gap);
    grid-template-columns : 1fr 1fr;
    grid-template-areas   : "header header"
                            "titles notes"
                            "titles location";
}

summary.progetto-entry-visible {
    cursor : pointer;
}

summary.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-size      : 14px;
    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);
}

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

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

@media (width > 1800px) {
    .progetto-entry-visible,
    .progetto-entry-hidden {
        display               : grid;
        grid-template-columns : 1fr 1fr 1fr;
        gap                   : var(--gap) 2vw;
        grid-template-areas   : "header header header"
                                "titles notes location";
    }
    .progetto-entry-hidden {
        grid-template-areas : ". content content";
    }
}

/* Subtle adjustment on small-ish screens */

@media (width < 1100px) {

    /* Adjust the font sizes */
    .progetto-entry-location-title,
    .progetto-entry-hidden-title {
        font : var(--sans-sl);
    }
    .progetto-entry-location-text,
    .progetto-entry-notes,
    .progetto-entry-hidden-text {
        font-size : 14px;
        line-height: 16px;
    }

    .progetto-entry-hidden-block:not(:last-child) {
        margin-bottom : 0.5rem;
    }

    .progetto-program-content {
        padding-bottom : 5rem;
    }
}

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

    .progetto-entry-hidden {
        grid-template-columns : 1fr;
        grid-template-areas   : "content";
    }

    .progetto-entry-titles,
    .progetto-entry-notes,
    .progetto-entry-location {
        padding-top : 0.35rem;
    }

    .progetto-entry-hidden-content {
        padding-top : 0.85rem;
    }

}

/* 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            : calc(var(--stickybars-distance) + 1.5rem + 3px);
    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(var(--stickybars-distance) + 3rem + 6px);
    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-inner {
    grid-template-rows: 1fr;
    grid-template-areas: "navigation";
}

.sidebar-sticky-items {
    padding-bottom : 0;
}

.sidebar-navigation-item {
    pointer-events: all;
}

@media (width <= 1100px) {
    .sidebar {
        display : none;
    }

    .progetto-entry-times {
        font : var(--sans-s);
    }

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

    .progetto-map-card {
        top        : calc(var(--stickybars-distance) + 1.5rem + 3px);
        width     : 100%;
        max-width : 25rem;
    }

    .progetto-map-cards-inner {
        padding-right : var(--side-spacer);
        padding-top   : calc(1.5rem + 3px);
    }


}

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

/* JS Related Styles */

.progetto-program-day-container:not([aria-visible]) {
    display: none;
}