.vid-pop {
	--vid-pop-itm-h: 428; /* { readonly: true } */
	--vid-pop-itm-h-mbl: 200; /* { readonly: true } */
	
	--vid-pop-itm-h-clc: calc((var(--vid-pop-itm-h-mbl) * 1px) + (var(--vid-pop-itm-h) - var(--vid-pop-itm-h-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
}

.vid-bx .pop {
	background-color: hsl(from var(--black) h s l / 0.8);
	backdrop-filter: blur(5px);
}

.ply-btn {
	padding: 1em;
	font-size: 1rem;
	border-radius: 50%;

	&.iso {
		position: absolute;
		bottom: 1.11rem;
		left: 2rem;
	}
}

/* Design token "Color Palette/video overlay": 30% veil over video posters
   (lt: #FFFFFF4D, dk: #0000004D). Families consume var(--vid-ovl) for veils. */
:root {
	--vid-ovl: hsl(0 0% 100% / 0.3);
}

[data-colors="primary-dark"],
[data-colors="alternate-dark"] {
	--vid-ovl: hsl(0 0% 0% / 0.3);
}

/* Design play affordance (Figma "Play" instance, strokeWeight 4, fills bound to
   Color Palette/txt): open white ring + bare white glyph on the poster — not a
   filled badge. Promoted from videos-v2.css so every VideoPopup poster matches. */
.vid-popup .ply-btn.btn-clr {
	--background: transparent;
	--text-color: var(--dk-txt);
	border: 0.25rem solid var(--dk-txt);
}

.ft {
    position: absolute;
    top: 0;
    right: clamp(var(--sp-vp-min), var(--sp-vp), var(--sp-vp-max));
    font-size: 2rem;
    z-index: 1;
}

.pop ul li {
	position: relative;
	
	> div {
		width: 100%;
	}
	
	video {
	    object-fit: contain;
	    margin-inline: auto;
	    max-height: var(--vid-pop-itm-h-clc);
	   
	}
	
	figure {
		aspect-ratio: initial;
		max-height: var(--vid-pop-itm-h-clc);
		width: 100%;
	}
}