/* ==========================================================================
   FOLD FIT (Deann 10/7: "make sure everything above the fold stays above the
   fold"). On laptop-height desktop screens the header and hero tighten up and
   hero headings size by screen height as well as width, so each hero's
   heading, copy, buttons and media fit on the first screen.
   ========================================================================== */

/* Hero headings never outgrow the screen height */
@media (min-width: 1024px) {
    #inner-hero h1 {
        font-size: clamp(2.5rem, min(5.6vw, 8.6vh), 5.25rem);
    }
}

@media (min-width: 1024px) and (max-height: 900px) {
    /* Shorter header at the top of the page (the scrolled header has its own size) */
    .site-header:not(.mx-stuck) > .container > div {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .site-header:not(.mx-stuck) img {
        height: 72px;
    }

    /* Hero padding follows the shorter header */
    #inner-hero {
        padding-top: 124px;
        padding-bottom: 48px;
    }
    #hero {
        padding-top: 120px;
    }

    /* Hero media can't run past the fold */
    #inner-hero img,
    #inner-hero iframe {
        max-height: calc(100vh - 170px);
    }
    #inner-hero img {
        object-fit: cover;
    }

    /* Home: the video card shrinks with the screen so the line under it
       and the scroll cue stay on the first screen */
    [data-mx="hero-card"] {
        max-width: min(100%, calc((100vh - 365px) * 1.6));
        margin-inline: auto;
    }
    [data-mx="hero-title"] {
        font-size: clamp(2rem, min(8vw, 14vh), 6.5rem);
    }
    #hero .mt-12.flex.justify-center {
        margin-top: 24px;
    }
}