/* VIDEO-FIT (registry #46, modules/video-fit.php): pasted videos fit the post on every screen. */
.spk-video { width: 100%; max-width: 100%; margin: 12px 0; border-radius: 14px; overflow: hidden; background: #000; }
.spk-video iframe,
.spk-video .cmplz-blocked-content-container { display: block; width: 100% !important; max-width: 100% !important; height: 100% !important; border: 0; }

/* Long YouTube videos: a 16:9 box as wide as the post. */
.spk-video--wide { aspect-ratio: 16 / 9; }

/* YouTube Shorts and TikTok are filmed upright: 9:16, not wider than a phone screen. */
.spk-video--short,
.spk-video--tiktok { aspect-ratio: 9 / 16; width: min(100%, 340px); margin-left: auto; margin-right: auto; }

/* The duplicate pasted-link paragraph is removed server-side (video-fit.php), not hidden here,
   so a sentence that ends in a link is never hidden by mistake. */

/* Complianz's click-to-play notice inside the frame: readable on a dark video background. */
.spk-video .cmplz-blocked-content-notice { max-width: 90%; }

/* Before consent Complianz swaps the player for a placeholder and pins a pixel height on it,
   which would turn the upright box back into a wide strip: let the aspect ratio win. */
.spk-video.spk-video { height: auto !important; }
.spk-video > .cmplz-blocked-content-container { height: 100% !important; }
.spk-video .cmplz-blocked-content-container { background-size: cover !important; background-position: center !important; }
/* Complianz's TikTok placeholder is a white logo card: use a dark video frame instead. */
.spk-video--tiktok .cmplz-blocked-content-container { background: #111 !important; }

/* The frame's height comes from its aspect ratio, which percentage heights cannot follow,
   so the player is pinned to all four edges instead. */
/* The frame must be the player's positioning box. Two site-wide feed-card rules fight that:
   ".elementor-element-lcard * { position: static }" and ".ast-oembed-container * { position:
   absolute; height: 100% }" (Customizer CSS); without this the player covers the whole card. */
:is(#bbpress-forums, *) .spk-video.spk-video { position: relative !important; top: auto !important; left: auto !important; width: 100%; height: auto !important; z-index: 2; }
/* z-index 2: feed cards carry a full-card "open the post" link on top; the video frame (player
   or the Watch-on button) must sit above it, like the site's own embed rule. */
:is(#bbpress-forums, *) .spk-video.spk-video--short,
:is(#bbpress-forums, *) .spk-video.spk-video--tiktok { width: min(100%, 340px); }
/* :is(#bbpress-forums, *) borrows an id's weight to beat the site-wide
   "#bbpress-forums iframe { height: auto !important; aspect-ratio: 16/9 }" rule (Customizer CSS)
   while still matching players outside the forum markup (the Spark feed). */
:is(#bbpress-forums, *) .spk-video.spk-video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }

/* Feed cards are flex columns that measure the post body at its narrow text width; with an
   upright player that under-counts the height and the player slides under the Like/Comment/
   Share bar. A body holding a player is measured at full width and never shrinks. */
/* lccon = the post body widget in the Spark feed card (loop template 817). Astra wraps long
   YouTube players in .ast-oembed-container, so match any depth inside it. */
.elementor-element-lccon:has(.spk-video),
.elementor-element:has(> .spk-video) { flex-shrink: 0 !important; align-self: stretch !important; width: 100% !important; height: auto !important; }

/* Paid posts: for a viewer who has not paid, the paid-content gate (snippet-09) replaces the
   player with "members only" chips; drop the black video frame around them. */
.spk-video:not(:has(iframe, .cmplz-blocked-content-container)) { aspect-ratio: auto !important; background: none !important; width: auto !important; }

/* "Watch on YouTube / TikTok" button (video-fit.php): sits UNDER the player. An empty frame
   (about:blank, consent script blocked or not yet run) is see-through and lets taps through,
   so the button shows and works; a loaded player is opaque and covers it. When Complianz's own
   "Tap to play" notice is there, that notice is the way to play, so the button hides. */
.spk-video .spk-video-fallback { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; text-decoration: none !important; background: #000; }
/* The video's own thumbnail, uncovered (owner: no dark overlay), and a provider-style play
   button on top, like a normal YouTube / TikTok embed before play. */
.spk-video .spk-video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* !important + id weight: the feed card's "* { position: static }" and background resets
   stripped the red button down to a bare white triangle (walkthrough, 2026-10-14). */
:is(#bbpress-forums, *) .spk-video .spk-video-fallback-play { position: relative !important; z-index: 1; display: block !important; width: 68px !important; height: 48px !important; border-radius: 14px !important; background: #ff0033 !important; box-shadow: 0 2px 10px rgba(0,0,0,.35); transition: transform 150ms ease; }
:is(#bbpress-forums, *) .spk-video .spk-video-fallback-play::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
:is(#bbpress-forums, *) .spk-video .spk-video-fallback-play--tiktok { width: 60px !important; height: 60px !important; border-radius: 50% !important; background: rgba(0,0,0,.55) !important; }
:is(#bbpress-forums, *) .spk-video .spk-video-thumb { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.spk-video .spk-video-fallback:hover .spk-video-fallback-play { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .spk-video .spk-video-fallback-play { transition: none; } }
.spk-video .spk-video-fallback:focus-visible { outline: 3px solid #ff8a00; outline-offset: -3px; }
:is(#bbpress-forums, *) .spk-video.spk-video iframe { z-index: 1; }
:is(#bbpress-forums, *) .spk-video.spk-video iframe:is([src="about:blank"], :not([src])) { background: transparent; pointer-events: none; }
/* Our play button replaces Complianz's "Tap to play" notice (one tap plays, in place). */
.spk-video .cmplz-blocked-content-notice { display: none !important; }
.spk-video .spk-video-fallback { z-index: 2; cursor: pointer; }
/* Hide the button once a real player is in the frame (consent given, src loaded). */
.spk-video:has(iframe:not([src="about:blank"]):not(.spk-video-player)[src]) .spk-video-fallback { display: none; }

/* Feed cards force "* { position: static }" and some older posts keep Astra's own
   .ast-oembed-container around the player inside our frame (pre-release QA 2026-10-14): the
   button shrank to a strip at the top and a second, dead copy of the video filled the rest.
   Pin the button to the whole frame and stack Astra's wrapper exactly under it. */
:is(#bbpress-forums, *) .spk-video.spk-video > .spk-video-fallback { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
:is(#bbpress-forums, *) .spk-video.spk-video > .ast-oembed-container,
:is(#bbpress-forums, *) .spk-video.spk-video > .cmplz-placeholder-parent { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; z-index: 1 !important; }