/* A full opening screen shared by every image/GIF hero. */
body.hero-page {
    --hero-viewport: 100vh;
    --hero-landing-viewport: 100vh;
    display: block;
    min-height: var(--hero-viewport);
    padding: 0 0 12vh;
}

@supports (height: 100lvh) {
    body.hero-page {
        /* Reserve a full opening screen even when mobile controls collapse. */
        --hero-landing-viewport: 100lvh;
    }
}

@supports (height: 100dvh) {
    body.hero-page {
        --hero-viewport: 100dvh;
    }
}

@supports (height: 100svh) {
    @media (max-width: 700px), (pointer: coarse) {
        body.hero-page {
            /* Keep content in place as mobile browser controls collapse. */
            --hero-viewport: 100svh;
        }
    }
}

body.hero-page .page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    width: 100%;
    height: var(--hero-viewport);
    min-height: 0;
    margin: 0;
    padding: 0;
}

body.hero-page .page-hero > img {
    display: block;
    /* Contain the complete image in 90% of the viewport. Landscape images
       fill the width and portraits fill the height, capped by the other
       dimension. The browser also honors embedded image orientation. */
    width: 90%;
    height: 90%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: contain;
    transform: none;
}

body.hero-page .page-hero-opening {
    margin-bottom: max(0px, calc(var(--hero-landing-viewport) - var(--hero-viewport)));
}

/* Fit the opening image below the caption while keeping it fully visible. */
body.hero-page:has(.page-heading) .page-hero-opening {
    height: max(12rem, calc(var(--hero-viewport) - var(--page-content-top) - var(--page-heading-gap)));
    /* Keep the caption's bottom gap inside the opening screen's footprint. */
    margin-bottom: max(0px, calc(var(--hero-landing-viewport) - var(--hero-viewport) + var(--page-heading-gap)));
}

body.hero-page:has(.page-heading) .page-hero-opening > img {
    height: 100%;
}

/* Keep the abstract's document available after its opening GIF. */
body.hero-page > .pdf-viewer {
    width: 90%;
    margin: 5vh auto;
}

/* A lone image has no following content to scroll to. */
html:has(body.hero-single-page) {
    overflow: hidden;
    overscroll-behavior: none;
}

body.hero-page.hero-single-page {
    height: var(--hero-viewport);
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
    overflow: clip;
}

body.hero-page.hero-single-page .page-hero-opening {
    height: max(0px, calc(var(--hero-viewport) - var(--page-content-top, 0px) - var(--page-heading-gap, 0px)));
    margin-bottom: 0;
}