/* -- Video Popup ------------------------------------------- */

.vid-popup {


    /* Design (Figma 15301-27835): the Play CTA sits inset from the poster's
       bottom-left corner — 27px in, 24px up at the 1920 comp (px / 18 = rem). */
    --vid-popup-ply-ins-h: 1.5rem; /* { friendly: 'Video Popup Play Button Left Inset' } */
    --vid-popup-ply-ins-v: 1.33rem; /* { friendly: 'Video Popup Play Button Bottom Inset' } */

    /* -- Foreground image button ----------------------- */

    .fg-img-btn {
        display: block;
        border: none;
        cursor: pointer;

        picture {
            display: block;
        }

        img {
            display: block;
            width: 100%;
            height: auto;
            transition: transform 0.4s ease;
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover img { transform: scale(1.04); }
        }
    }

    /* -- Play CTA -------------------------------------- */
    /* A .btn v1 span (not a nested <button> — the poster itself is the control),
       pinned to the poster's bottom-left. Insets add the poster padding so they
       read from the image edge, not the button box. */

    .vid-ply {
        position: absolute;
        left: calc(var(--vid-popup-fg-pd) + var(--vid-popup-ply-ins-h));
        bottom: calc(var(--vid-popup-fg-pd) + var(--vid-popup-ply-ins-v));
        z-index: 1;
    }

}

/* -- Embedded player (YouTube) ---------------------------- */
/* Lives in the popover, outside .vid-popup's scope. The iframe has no
   intrinsic size, so it needs the player ratio explicitly. */

.pop .vid-embed {
    aspect-ratio: 16 / 9;
    border: 0;
    height: auto;
    /* ui-scroll's max-height would squash the ratio on short viewports — cap
       the WIDTH by the available height instead so 16:9 always holds. */
    max-height: none;
    width: min(100%, calc(78dvh * 16 / 9));
    margin-inline: auto;
}