.bankera-social-video {
	--bankera-video-ratio: 16 / 9;
	margin: 1.5rem auto;
	inline-size: min(100%, var(--bankera-video-max, 800px));
}
.bankera-social-video--portrait { --bankera-video-ratio: 9 / 16; max-inline-size: 25rem; }
.bankera-social-video--square { --bankera-video-ratio: 1; }
.bankera-social-video__preview, .bankera-social-video__inline {
	position: relative;
	display: grid;
	place-content: center;
	gap: 1rem;
	inline-size: 100%;
	aspect-ratio: var(--bankera-video-ratio);
	min-block-size: 200px;
	overflow: hidden;
	border-radius: var(--bankera-radius-lg);
	background: var(--bankera-surface-alt);
	color: var(--bankera-heading);
	text-align: center;
	text-decoration: none;
}
.bankera-social-video__cover { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg, var(--bankera-surface-alt), var(--bankera-surface)); color: var(--bankera-primary); pointer-events: none; }
.bankera-social-video__cover svg { inline-size: min(65%, 22rem); block-size: auto; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .24; }
.bankera-social-video__preview img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.bankera-social-video__preview img[hidden] { display: none; }
.bankera-social-video__play, .bankera-social-video__label { position: relative; z-index: 1; }
.bankera-social-video__play { display: grid; place-items: center; margin: auto; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--bankera-primary); color: var(--bankera-on-primary); }
.bankera-social-video__label { background: var(--bankera-surface); padding: .5rem 1rem; border-radius: var(--bankera-radius-md); }
.bankera-social-video figcaption { margin-block-start: .5rem; font-size: .875rem; }
.bankera-social-video__preview:focus-visible, .bankera-video-dialog button:focus-visible { outline: 2px solid var(--bankera-focus); outline-offset: 3px; }
.bankera-video-dialog {
	--bankera-video-ratio: 16 / 9;
	--bankera-video-scale: 1.777778;
	inline-size: min(var(--bankera-video-max, 800px), calc(100% - 2rem));
	max-inline-size: calc(100% - 2rem);
	max-block-size: calc(100dvh - 2rem);
	padding: 1rem;
	margin: auto;
	border: 1px solid var(--bankera-border);
	border-radius: var(--bankera-radius-lg);
	background: var(--bankera-surface);
	color: var(--bankera-heading);
	box-shadow: var(--bankera-shadow-lg);
}
.bankera-video-dialog[data-ratio="portrait"] { --bankera-video-ratio: 9 / 16; --bankera-video-scale: .5625; }
.bankera-video-dialog[data-ratio="square"] { --bankera-video-ratio: 1; --bankera-video-scale: 1; }
.bankera-video-dialog::backdrop { background: var(--bankera-overlay, rgba(0, 0, 0, .75)); }
.bankera-video-dialog__close { display: block; margin-inline-start: auto; margin-block-end: .5rem; min-inline-size: 2.75rem; min-block-size: 2.75rem; background: var(--bankera-surface-alt); color: var(--bankera-heading); border: 1px solid var(--bankera-border); border-radius: var(--bankera-radius-md); cursor: pointer; }
.bankera-video-dialog__source { display: block; margin-block-start: .5rem; font-size: .875rem; }
.bankera-video-dialog__frame { inline-size: min(100%, calc((100dvh - 10rem) * var(--bankera-video-scale))); min-inline-size: min(200px, 100%); margin-inline: auto; aspect-ratio: var(--bankera-video-ratio); min-block-size: 200px; }
.bankera-video-dialog__frame iframe, .bankera-social-video__inline iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }
.bankera-social-video__inline { display: block; }
.bankera-video-x { inline-size: 100%; block-size: 100%; overflow: auto; }
.bankera-video-x iframe { max-inline-size: 100%; }
@media print { .bankera-video-dialog { display: none; } }