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

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

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




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

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



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

.header-main,
figcaption,
.footer-slim {
    -webkit-text-stroke: .13em black;
    paint-order: stroke fill;
    text-shadow: .05rem .05rem .04rem black;
}


p {
    margin: 0 auto;
    max-width: 65ch;


}

p:nth-of-type(2) {
    text-indent: 0;
}

p+p {
    text-indent: 1lh;
}


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

.header-main {
    width: 100%;
    grid-row: 1;
    padding-top: calc(var(--px) * 2);

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




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

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

    @media (width <=768px) {
        & .current-page-title {
            display: block;
        }

        & .comma {
            display: none;
        }
    }
}



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: 85vh;
        }
    }

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

    figure>picture>img {
        max-height: 85vh;
        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;
        }
    }

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

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

  }

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

            & picture {
                min-width: 0;
                flex: 1;
            }

            & img {
                width: 100%;
                max-height: unset;
            }
        }



    }

}