/* VideoPopupScroller — component styles.
   Contract §C escape hatch only: poster scrim, play-badge scale, "Play Video" label. */

.vid-pop-scrl {

	/* Design token "Color Palette/video overlay" (lt mode): #FFFFFF at 30%. */
	--vid-pop-scrl-scrm: hsl(0 0% 100% / 0.3);
	--vid-pop-scrl-ply-lbl-off: 4.75rem;

	/* Extra .vid-popup level outranks VideoPopup.css's own .vid-popup .fg-img-btn rule. */
	.vid-popup {

		.fg-img-btn {
			padding: 0;

			/* Comp posters share one crop box regardless of source image shape. */
			img {
				aspect-ratio: 16 / 10;
				object-fit: cover;
			}
		}
	}

	/* Panel cards clip the poster themselves, so it must not carry its own radius. */
	.crd .vid-popup .fg-img-btn {
		border-radius: 0;

		picture {
			border-radius: 0;
		}
	}

	/* noCard: no panel chrome — the poster keeps VideoPopup's own radius and the
	   caption sits on the section ground. Play affordance reads smaller without the card. */
	.no-bg {
		--vid-pop-scrl-ply-lbl-off: 4.15rem;

		.ply-btn:has(svg) {
			font-size: 1.8rem;
		}
	}

	/* noCard: the poster button still carries .crd, which makes box-shadow.css put a
	   drop-shadow filter on the whole list — that shadowed the caption text too.
	   Drop the list filter and keep the shadow on the poster alone. */
	&:has(.no-bg) [data-role="list"] {
		filter: none;
	}

	.no-bg .vid-popup .fg-img-btn {
		box-shadow: var(--bx-sdw-crd-x) var(--bx-sdw-crd-y) var(--bx-sdw-crd-blr) hsl(from var(--black) h s l / var(--bx-sdw-crd-o)) !important;
	}

	.vid-pop-scrl-scrm {
		position: absolute;
		inset: 0;
		z-index: 1;
		background-color: var(--vid-pop-scrl-scrm);
		pointer-events: none;
	}

	/* playBelow: the Play button sits under the poster, so the veil is scoped to the
	   poster button itself instead of the whole (now taller) .rlt box. */
	.vid-popup:has(.vid-ply-btm) .fg-img-btn::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--vid-pop-scrl-scrm);
		border-radius: inherit;
		pointer-events: none;
	}

	/* Comp play affordance: open white ring + white glyph, no filled badge. */
	.ply-btn.btn-clr {
		--background: transparent;
		--text-color: var(--dk-txt);
		border: 0.25rem solid var(--dk-txt);
	}

	.ply-btn:has(svg) {
		font-size: 2rem;
	}

	.vid-ply-lbl {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
		transform: translate(-50%, calc(-50% + var(--vid-pop-scrl-ply-lbl-off)));
		color: var(--btn-pry-txt);
		pointer-events: none;
	}

}