/* -------------------------- Color Theme */

html:has(.building-color) {
    background-color: var(--dark);

    & main {
        background-color: var(--dark);
    }
}



.building-color {
    background-color: var(--dark);
    color: var(--cntrst);
}

.footer-slim {
    /* background-color: var(--dark); */
    background-color: unset;
    padding-bottom: var(--px);
    grid-row: 3 / 4;
    display: none;

    & .logo-s {
        grid-column: 2 / 3;
    }

    & .pages-menu {

        grid-column: 3 / -1;

        & .other-pages {
            display: flex;
            grid-column: 1;
        }

        & .rentals {
            grid-row: 1;
            grid-column: 3;
        }

        & .copyright {
            grid-column: -7 / -1;

            @media (width <=768px) {
                grid-column: 1 / -1;

            }
        }
    }

    /* & ::after {
        content: "";
        display: block;
        position: fixed;
        background: var(--mid);
        inset: 0;
        top: 0px;
        bottom: 0px;
        bottom: auto;
        height: calc(100% + 100vh);
        z-index: -1;
        top: 100vh;
    } */
}

.header-main {
    padding-top: 2lh;

    & .st2 {
        stroke: var(--white);
    }

    & .st0,
    .st1 {
        stroke: var(--white);
    }
}

/* ----------- Text Stroke */

.header-main,
summary,
figcaption,
.footer-slim {
    /* -webkit-text-stroke: .17em black; */
    /* paint-order: stroke fill; */
    text-shadow: .05rem .05rem .05rem black;
}

/* -------------------------- Layout */

.header-main {
    width: 100%;
    grid-row: 1;

    & #icon-x {
        display: none;
    }

    & .current-page {
        grid-column: span 5;
    }
}

main {
    grid-row: 1 / 4;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    /* gap: 1lh; */
}

article {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
}


/* ------ Image Blocks */

.tour {

    .block-fig {
        & img {
            max-height: 90dvh;
        }
    }

    > :last-child {
        & figcaption {
            padding-bottom: 5lh;
        }
    }

    figure>picture>img {
        max-height: 90dvh;
        width: 100%;
        object-fit: contain;
        object-position: left;
    }

    figcaption p:empty {
        display: none;
    }

    figcaption {
        padding: 1lh 0;
    }

    .block-fig {
        display: grid;
        grid-template-columns: subgrid;

        & picture,
        & figcaption {
            grid-row: 1;
            align-self: end;
        }
    }

    .block-fig--full {
        width: 100vw;

        & picture {
            grid-column: 1 / -1;
        }

        & picture img {
            max-height: unset;

        }
    }



    .block-fig--left {
        & picture {
            grid-column: 1 / -3;

        }
    }

    .block-fig--center {
        & picture {
            grid-column: 1 / -1;

        }

        & img {
            object-position: center;
        }

    }

    .block-fig--padded {
        & img {
            padding: 1lh;
            background-color: var(--off-black);
        }
    }

    .block-fig--right {
        & picture {
            grid-column: 1 / -1;
        }

        & img {
            object-position: right;
        }
    }

    .block-twoup {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        row-gap: 0px;

        & .twoup-img-wrapper {
            grid-column: 1 / -1;
            grid-row: 1;
            display: flex;
            gap: 0;
            max-width: 100vw;
            align-items: start;

            & img {
                /* max-height: 100%; */
                min-width: 0;
                max-height: unset;
                flex: 1;
            }
        }


        & figcaption {
            grid-column: 3 / -3;
            grid-row: 1;
            align-self: end;

        }
    }

}