/*
 * Front-page hero proportions. This file loads after the existing theme and
 * slideshow styles. The option is shared by the image, video, classic Swiper,
 * and zoom/fade hero variants.
 */
.home .flex-hero-layout > .custom-header,
.home .flex-hero-layout > .embed-container {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
}

/* Fullheight means the visible viewport, including on short landscape screens. */
.home .flex-hero-layout.flex-hero-layout--fullscreen > .custom-header,
.home .flex-hero-layout.flex-hero-layout--fullscreen > .embed-container {
    height: 100vh;
    height: 100svh;
    aspect-ratio: auto;
}

/* Adapt to the viewport height without becoming too shallow or too tall.
 * Retain the existing `landscape` value so previously saved ACF selections work.
 */
.home .flex-hero-layout.flex-hero-layout--landscape > .custom-header,
.home .flex-hero-layout.flex-hero-layout--landscape > .embed-container {
    height: clamp(600px, 75vh, 900px);
    aspect-ratio: auto;
}

/* Ensure the single-image hero uses the same cover crop as both sliders. */
.home .flex-hero-layout > .custom-header .custom-header-media #wp-custom-header {
    position: relative;
    width: 100%;
    height: 100%;
}
.home .flex-hero-layout > .custom-header .custom-header-media #wp-custom-header > img {
    display: block;
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    padding: 0;
    object-fit: cover;
    transform: none;
}

/* Vimeo embeds must not set the hero height through their old 56.25% padding. */
.home .flex-hero-layout > .embed-container {
    background-position: center;
    background-size: cover;
}
.home .flex-hero-layout > .embed-container iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: translate(-50%, -50%);
}
/* Vimeo is 16:9. Keep it scaled to cover the adaptive-height area,
 * including when the viewport is narrow or very tall.
 */
.home .flex-hero-layout.flex-hero-layout--landscape > .embed-container iframe {
    width: max(100%, calc(clamp(600px, 75vh, 900px) * 1.7777778));
    height: max(100%, 56.25vw);
}
/* Cover a tall fullheight hero with a 16:9 Vimeo background (avoid letterboxing). */
.home .flex-hero-layout.flex-hero-layout--fullscreen > .embed-container iframe {
    width: max(100%, 177.77778vh);
    width: max(100%, 177.77778svh);
    height: max(100%, 56.25vw);
}

@media (max-width: 767px) {
    /* Always square on mobile, regardless of the desktop option and hero kind. */
    .home .flex-hero-layout.flex-hero-layout--fullscreen > .custom-header,
    .home .flex-hero-layout.flex-hero-layout--fullscreen > .embed-container,
    .home .flex-hero-layout.flex-hero-layout--landscape > .custom-header,
    .home .flex-hero-layout.flex-hero-layout--landscape > .embed-container {
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 0;
        aspect-ratio: 1 / 1;
    }

    /* The original theme swaps the mobile Vimeo section at 479px; use 767px. */
    .home .flex-hero-layout > .embed-container.desktop { display: none; }
    .home .flex-hero-layout > .embed-container.mobile { display: block; }

    /* Use the mobile video when provided, otherwise retain the desktop video. */
    .home .flex-hero-layout > .embed-container.mobile.has-square-video .iframe-large { display: none; }
    .home .flex-hero-layout > .embed-container.mobile.has-square-video .iframe-small { display: block; }
    .home .flex-hero-layout > .embed-container.mobile:not(.has-square-video) .iframe-large { display: block; }

    .home .flex-hero-layout > .embed-container.mobile iframe {
        width: 100%;
        height: 100%;
    }
    /* If there is no dedicated mobile video, crop the 16:9 embed to 1:1. */
    .home .flex-hero-layout > .embed-container.mobile:not(.has-square-video) .iframe-large {
        width: 177.77778%;
    }
}