/* ─── Video widget (lite facade + background band) ─────────────────────
   Aggregator sheet — the component loader enqueues ONLY <name>.css, so the
   two variant sheets are @imported here to ride the same request (this is
   their only load path in gated mode):
     lite-video.css       .hzo-lite-video — click-to-load facade
     video-background.css .hzo-section--video band + .hzo-video-toggle
   Behavior: video.js (lite + background subsystems only — mode="player" is
   deliberately JS-free and uses native <video controls>).
   Shortcode: video.php [hzo_video].
   @imports must precede all rules — keep them first. */
@import './lite-video.css?ver=1787769613';
@import './video-background.css?ver=1787769613';

/* ─── Self-hosted player frame (mode="player", PF-032) ──────────────────
   .hzo-embed sets its child <video> to object-fit: cover, which is correct for
   ambient/decorative media and wrong for a player: cropping a commercial cuts
   off content the client paid to have in frame. --player letterboxes instead
   and paints the letterbox bars a real black rather than the frame's --bg-alt,
   so the pillarbox reads as part of the video rather than as a layout gap.
   Opt back into cropping with fit="cover" on the shortcode. */
.hzo-embed--player { background: #000; }
.hzo-embed--player > video { object-fit: contain; }

/* Reduced-motion: kill every transition this component animates (belt &
   braces on top of the variant sheets' own blocks — per the convention,
   the aggregator ends with a transition-kill). */
@media (prefers-reduced-motion: reduce) {
    .hzo-lite-video > img,
    .hzo-lite-video__play,
    .hzo-video-toggle { transition: none; }
}