/* Subtract only the space reserved for the header; overlay headers need no offset. */
[data-image-height-root] {
    --image-viewport-height: max(0px, calc(100vh - var(--site-header-offset, 0px)));
    /* Invalid defaults leave each template's original CSS fallback available for explicit modes. */
    --template-image-height: initial;
    --template-secondary-image-height: initial;
    --template-image-width: initial;
    --template-flow-height: initial;
    --template-flow-min-height: initial;
    --template-space-unit: 1px;
}

@supports (height: 100dvh) {
    [data-image-height-root] {
        --image-viewport-height: max(0px, calc(100dvh - var(--site-header-offset, 0px)));
    }
}

/* Template defaults scale without saving measured sample-image heights into page data. */
@media (min-width: 481px) {
    [data-image-height-root]:not([data-image-height]) {
        --template-image-height: calc(var(--template-image-height-desktop) * 100vw / 1440);
        --template-secondary-image-height: calc(var(--template-secondary-image-height-desktop) * 100vw / 1440);
        --template-image-width: calc(var(--template-image-width-desktop) * 100vw / 1440);
        --template-flow-height: auto;
        --template-flow-min-height: 0px;
        --template-space-unit: calc(100vw / 1440);
    }
}

@media (max-width: 480px) {
    [data-image-height-root]:not([data-image-height]):not([data-mobile-image-height]),
    [data-image-height-root][data-mobile-image-height="default"] {
        --template-image-height: calc(var(--template-image-height-mobile) * 100vw / 390);
        --template-secondary-image-height: calc(var(--template-secondary-image-height-mobile) * 100vw / 390);
        --template-image-width: calc(var(--template-image-width-mobile) * 100vw / 390);
        --template-flow-height: auto;
        --template-flow-min-height: 0px;
        --template-space-unit: calc(100vw / 390);
    }
}

/* Pixel/viewport settings crop into a frame. Natural sizing has its own rules below. */
@media (min-width: 481px) {
    [data-image-height]:not(:where([data-image-height="natural"])) {
        --image-height: var(--image-height-desktop);
    }

    [data-image-height]:not(:where([data-image-height="natural"]))[data-image-height-frame],
    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-frame],
    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-image],
    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-scroll],
    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-scroll] > figure {
        height: var(--image-height) !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    [data-image-height]:not(:where([data-image-height="natural"]))[data-image-height-flow],
    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-flow] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    [data-image-height]:not(:where([data-image-height="natural"]))[data-image-height-frame],
    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-frame],
    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-image] {
        aspect-ratio: auto !important;
    }

    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-image] {
        display: block;
        object-fit: cover;
    }

    [data-image-height]:not(:where([data-image-height="natural"])) [data-image-height-scroll] {
        align-items: flex-start;
    }

    /* Keep collage photos in normal flow so taller images cannot be clipped. */
    .section-gallery-collage-01[data-image-height]:not(:where([data-image-height="natural"])) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .section-gallery-collage-01[data-image-height]:not(:where([data-image-height="natural"])) > img {
        position: relative;
        inset: auto;
        width: 100%;
    }

    .section-gallery-collage-01[data-image-height]:not(:where([data-image-height="natural"])) > img:nth-of-type(2) {
        width: calc(100% - 11.111111vw);
        margin: 5.555556vw;
    }

    .section-related-rooms-01[data-image-height]:not(:where([data-image-height="natural"])) {
        --section-related-rooms-01-image-height: var(--image-height);
    }
}

/* The runtime measures the uploaded photo, never a saved template/sample ratio.
   Scoped to the effective mode so mobile overrides and resets restore original CSS. */
[data-image-height-root][data-image-height-natural="true"][data-image-height-frame],
[data-image-height-natural="true"] [data-image-height-frame],
[data-image-height-natural="true"] [data-image-height-image] {
    height: var(--image-natural-height, auto) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

[data-image-height-natural="true"] [data-image-height-image] {
    object-fit: contain !important;
}

[data-image-height-natural="true"][data-image-height-flow],
[data-image-height-natural="true"] [data-image-height-flow],
[data-image-height-natural="true"] [data-image-height-scroll],
[data-image-height-natural="true"] [data-image-height-scroll] > figure {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Show the whole photo instead of the intentional 1920px center crop.
   Keep the sticker plane unchanged: photo-reference coordinates handle its offset. */
.section-hero-02[data-image-height-natural="true"] > img[data-image-height-image],
.slide-03[data-image-height-natural="true"] > .slide-03-track {
    left: 0;
    right: auto;
    width: 100%;
    max-width: 100%;
    transform: none;
}

.slide-03[data-image-height-natural="true"] > .slide-03-track {
    height: var(--image-natural-primary-height);
}

section.section-hero-02[data-image-height-root][data-image-height-natural="true"] {
    height: var(--image-natural-height) !important;
}

section.section-hero-02[data-image-height-root][data-image-height-natural="true"] > img[data-image-height-image] {
    height: var(--image-natural-height) !important;
}

.section-gallery-collage-01[data-image-height-natural="true"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.section-gallery-collage-01[data-image-height-natural="true"] > img {
    position: relative;
    inset: auto;
    width: 100%;
}

.section-gallery-collage-01[data-image-height-natural="true"] > img:nth-of-type(2) {
    width: calc(100% - 11.111111vw);
    margin: 5.555556vw;
}

@media (max-width: 480px) {
    :is(.room-01, .special-01)[data-image-height-root][data-image-height-natural="true"],
    .intro-04[data-image-height-natural="true"] .intro-04-visual {
        height: auto !important;
    }

    .intro-04[data-image-height-natural="true"] .intro-04-visual > .template-background {
        height: var(--image-natural-primary-height);
    }

    .section-gallery-collage-01[data-image-height-natural="true"] {
        grid-template-columns: 1fr;
    }

    .section-gallery-collage-01[data-image-height-natural="true"] > img:nth-of-type(2) {
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 480px) {
    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) {
        --image-height: var(--image-height-mobile, var(--image-height-desktop));
    }

    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"])[data-image-height-frame],
    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-frame],
    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-image],
    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-scroll],
    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-scroll] > figure {
        height: var(--image-height) !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"])[data-image-height-flow],
    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-flow] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"])[data-image-height-frame],
    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-frame],
    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-image] {
        aspect-ratio: auto !important;
    }

    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-image] {
        display: block;
        object-fit: cover;
    }

    :is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) [data-image-height-scroll] {
        align-items: flex-start;
    }

    /* Keep collage photos in normal flow so taller images cannot be clipped. */
    .section-gallery-collage-01:is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .section-gallery-collage-01:is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) > img {
        position: relative;
        inset: auto;
        width: 100%;
    }

    .section-gallery-collage-01:is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) > img:nth-of-type(2) {
        width: calc(100% - 11.111111vw);
        margin: 5.555556vw;
    }

    .section-related-rooms-01:is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) {
        --section-related-rooms-01-image-height: var(--image-height);
    }

    /* Mobile captions belong below the image, including when a custom height is set. */
    .room-01:is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]),
    .special-01:is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) {
        height: auto !important;
    }

    .section-gallery-collage-01:is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) {
        grid-template-columns: 1fr;
    }

    .section-gallery-collage-01:is([data-image-height]:not(:where([data-image-height="natural"])):not([data-mobile-image-height]), [data-mobile-image-height="fixed"], [data-mobile-image-height="responsive"], [data-mobile-image-height="viewport"]) > img:nth-of-type(2) {
        width: 100%;
        margin: 0;
    }
}