/** * Video Cover Block — Frontend Styles v2 */ /* ── Wrapper ──────────────────────────────────────────────────────── */ .video-cover { position: relative; overflow: hidden; box-sizing: border-box; } /* * Full-width: instead of 100vw (which includes scrollbar and causes * horizontal overflow), we rely on the theme's own alignfull handling * via a left/right margin stretch. overflow:hidden on or the * theme wrapper is the correct fix — but we also add: */ .video-cover.alignfull { /* Stretch to the edges of the nearest positioned ancestor. Works for FSE block themes which wrap content in a constrained div. */ margin-left: calc( -1 * var(--wp--style--root--padding-left, 0px) ); margin-right: calc( -1 * var(--wp--style--root--padding-right, 0px) ); width: auto; /* let margins do the work, not width */ max-width: none; } /* ── Video background ─────────────────────────────────────────────── */ .video-cover__bg { position: absolute; inset: 0; z-index: 0; } .video-cover__video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-cover.has-parallax .video-cover__bg { top: -15%; bottom: -15%; } /* ── Overlay ──────────────────────────────────────────────────────── */ .video-cover__overlay { position: absolute; inset: 0; z-index: 1; background-color: var(--vc-overlay-color, #000); opacity: var(--vc-overlay-opacity, 0.4); pointer-events: none; } /* ── Content bar — pinned to bottom ──────────────────────────────── */ .video-cover__content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 2rem; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 2rem; } /* Heading — left */ .video-cover__content > .wp-block-heading { flex: 1 1 auto; min-width: 0; margin: 0; } /* Buttons — right */ .video-cover__content > .wp-block-buttons { flex: 0 0 auto; margin: 0; } /* ── Mobile stack ─────────────────────────────────────────────────── */ @media ( max-width: 600px ) { .video-cover__content { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .video-cover__content > .wp-block-heading, .video-cover__content > .wp-block-buttons { width: 100%; } } /* ── Reduced motion ───────────────────────────────────────────────── */ @media ( prefers-reduced-motion: reduce ) { .video-cover.has-parallax .video-cover__bg { top: 0; bottom: 0; transform: none !important; } }