/* Custom style for the regesto page */
#regesto {
    overflow-y: scroll;
}
#regesto .filters {
    margin-top : 1rem;
}
#regesto,.regesto {
    min-height : 100%;
}
.regesto-list {
    margin-top : 1rem;
    position : relative;
    &::before {
        content    : "";
        position   : absolute;
        top        : 0;
        left       : 0;
        right      : 0;
        height     : 1px;
        background : var(--text);
    }
}
/* The Single List item inside the regesto */
.regesto-item {
    border-bottom         : 1px solid var(--text);
    position              : relative;
    padding               : 1rem var(--padding-side);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : 0 var(--gap);
    align-items           : baseline;
    transition-property   : height;
}
.regesto-item.hidden {
    display : none;
}
@media (width > 700px) {    
    .regesto-item:hover [class*='regesto-item'] {
        opacity: .5;
    }
}
.regesto-item:hover .regesto-hover-container {
    display: grid;
}
.regesto-item-category,
.regesto-item-size,
.regesto-item-year,
.regesto-item-location {
    font           : var(--font-small);
    text-transform : uppercase;
    grid-row       : 1;
    overflow       : hidden;
    text-overflow  : ellipsis;
    text-wrap      : nowrap;
}
.regesto-item-title {
    font          : var(--font-bold);
    grid-row      : 1;
    grid-column   : 1 / 5;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}
.regesto-item-category {
    grid-column : 5/8;
    padding-right : 3rem;
}
.regesto-item-size {
    grid-column  : 7/8;
    justify-self : end;
}
.regesto-item-year {
    grid-column : 9/10;
    justify-self : end;
}
.regesto-item-location {
    grid-column  : 10/13;
    justify-self : end;
    max-width    : 100%;
}
.regesto-item-link {
    position       : absolute;
    inset          : 0;
    font-size      : 0;
    color          : transparent;
    text-transform : uppercase;
}
/* The hidden content */
.regesto-hover-container {
    position              : absolute;
    inset                 : calc(100% + 1px) 0 auto;
    padding               : 0 var(--padding-side);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    grid-template-areas   : ". . . . content content content content content . . .";
    display               : none;
    z-index               : 9999;
    pointer-events        : none;
}
@media (width < 1400px) {
    .regesto-hover-container {
        grid-template-areas : ". . . . content content content content content content content .";
    }
}
@media (width < 900px) {
    .regesto-hover-container {
        grid-template-areas : ". . . content content content content content content content content content";
    }
}
.regesto-hover-inner {
    grid-area             : content;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    background            : var(--accent);
    min-height            : calc(21rem + 6px);
}
@media (width > 1900px) {
    .regesto-hover-inner {
        min-height : calc(27rem + 8px);
    }
}
/* The Hover card has different styles */
.regesto-hover-style-image .regesto-hover-inner {
    grid-template-areas : "image image";
}
.regesto-hover-style-text .regesto-hover-inner {
    grid-template-areas : "text text";
}
.regesto-hover-style-both .regesto-hover-inner {
    grid-template-areas : "image text";
}
.regesto-hover-style-image .regesto-hover-text { display : none; }
.regesto-hover-style-text .regesto-hover-picture { display : none; }
.regesto-hover-picture {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center;
    grid-area       : image;
}
.regesto-hover-text {
    padding   : 1rem;
    width     : 100%;
    grid-area : text;
}
.regesto-hover-spec {
    margin-bottom : 1rem;
}
.regesto-hover-spec-title {
    font           : var(--font-small);
    text-transform : uppercase;
}
.regesto-hover-spec-text {
    font : var(--font);
}
/* We need to hide a few things on small screens */
@media (width < 950px) {
    .regesto-item-category,
    .regesto-item-location {
        display : none;
    }

    .regesto-item-title { grid-column: 1 / 8; }
    .regesto-item-size { grid-column: 9 / 11; }
    .regesto-item-year { grid-column: 11 / 13; }
}
@media (width <= 700px) {

    .regesto-item-category {
        display       : block;
        justify-self  : end;
        grid-column   : 1 / -1;
        grid-row      : 3;
        opacity       : 0;
        padding-right : 0;
    }
    .regesto-item-location {
        display      : block;
        justify-self : end;
        grid-column  : 1 / -1;
        grid-row     : 2;
        opacity      : 0;
    }

    .regesto-item-title {
        grid-column: 1 / 6;
        align-self: baseline;
    }
    .regesto-item-year { grid-column: 8 / 9; }
    .regesto-item-size {
        grid-column: 6 / 8;
        text-align: center;
        justify-self: center;
    }

    .regesto-item {
        padding     : 0.5rem var(--padding-side);
        align-items : end;
        overflow    : hidden;
        height      : 2rem;
        grid-template-rows: 1rem;
        grid-auto-rows: auto;
    }

    .regesto-item-link {
        position    : static;
        grid-column : 1 / -1;
        grid-row    : 4;
        color       : var(--text);
        font        : var(--font-small);
        opacity     : 0;
        display     : none;
    }

    .regesto-hover-container {
        position            : static;
        display             : grid;
        grid-column         : 1 / -1;
        padding             : 0;
        margin-top          : 0.25rem;
        grid-template-areas : "content content content content content content content content";
        opacity             : 0;
        z-index             : 0;
    }

    .regesto-hover-inner {
        background            : unset;
        grid-template-columns : 1fr;
        gap                   : var(--padding-side);
        min-height            : unset;
    }

    .regesto-hover-style-image .regesto-hover-inner {
        grid-template-areas : "image";
    }

    .regesto-hover-style-text .regesto-hover-inner {
        grid-template-areas : "text";
    }

    .regesto-hover-style-both .regesto-hover-inner {
        grid-template-areas : "image""text";
    }

    .regesto-hover-text {
        padding : 0;
    }

    .regesto-hover-picture {
        height : auto;
    }

    .item-is-expanded {
        height : auto;
    }

    .item-is-expanded * {
        opacity : 1;
    }

    .item-is-expanded .regesto-item-link {
        display : block;
    }

    .item-is-expanded .regesto-item-title {
        white-space : unset;
        overflow    : unset;
        grid-row    : 1 / 4;
        align-self  : start;
    }

}