/* Shared video behavior — responsive aspect-ratio wrapper, enqueued only when a page has a video. */
/*
 * The element's own DEFAULTS live in `loom.base`, the lowest cascade layer, so anything the
 * architect sets on the element (compiled into `loom.elements`) wins. Unlayered they would not:
 * unlayered CSS beats EVERY layer, which is why an icon's colour and size could be set in the
 * inspector, compiled correctly, and still never take effect. Only the element's own baseline
 * rule moves — the widget's internal machinery below stays unlayered so it keeps winning.
 */
@layer loom.base { .lm-video { display: block; position: relative; width: 100%; } }
.lm-video[data-aspect="16x9"] { aspect-ratio: 16 / 9; }
.lm-video[data-aspect="4x3"] { aspect-ratio: 4 / 3; }
.lm-video[data-aspect="1x1"] { aspect-ratio: 1 / 1; }
.lm-video[data-aspect="21x9"] { aspect-ratio: 21 / 9; }
.lm-video iframe, .lm-video video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000;
}
.lm-video-empty {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: var(--lm-color-surface, #f1f5f9); color: #64748b; font: 14px/1.4 system-ui, sans-serif; text-align: center; padding: 12px;
}