/*
 * Home template only: the interactive hero showcase.
 *
 * Everything else the home page needs (animations, tabs, cost calculator,
 * dropdowns) already lives in style.css / components.css / utilities.css.
 */

.vs-hero-tab-btn,
.vs-hero-tab-pane {
    transition: all 0.3s ease-in-out;
}

.vs-hero-tab-pane.hidden {
    display: none;
}

.vs-hero-media-frame {
    width: min(100%, 1200px);
    height: 720px;
}

.vs-hero-media-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vs-hero-presence-frame {
    height: auto;
    aspect-ratio: 16 / 9;
}

/*
 * The presence stage is authored at a fixed 1200x675 canvas and scaled down to
 * fit the available width; home.js sets --vs-hero-scale on resize.
 */
.vs-hero-scaled-shell {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    --vs-hero-scale: 1;
}

.vs-hero-scaled-stage {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1200px;
    height: 675px;
    transform-origin: top left;
    transform: scale(var(--vs-hero-scale));
}

.vs-hero-media-frame .vs-participant-tile video {
    height: 6rem;
}

@media (max-width: 767px) {
    .vs-hero-media-frame:not(.vs-hero-scaled-shell) {
        height: auto;
    }

    .vs-hero-presence-frame video {
        height: auto;
    }
}

/*
 * The <img> tags now carry intrinsic width/height so the browser can reserve
 * space before the bytes arrive. Those attributes also act as presentational
 * hints, which would pin a fixed pixel height on images that used to size
 * themselves from their width; height:auto drops the hint while keeping the
 * aspect ratio the UA derives from the same attributes. Sits below any
 * Tailwind height class, so h-9/h-full still win.
 */
img {
    height: auto;
}