/* Pardee site-wide video catch-all — the poster facade that replaces a raw YouTube / Vimeo iframe in
   post content. Clicking it opens the shared theater modal, whose own
   styles stay in bb-modules/assets/css/pardee-video-modal.css (globals-locked, untouched).

   Self-contained on purpose: these blocks render on the LEGACY theme templates too, where the 2026
   kit's `.pardee-video__play` disc is not guaranteed to be in the cascade. Tokens fall back to the
   literal brand values so the facade looks right either way. */

.pp-vfacade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 1.5rem;
	background: var(--pp-ink, #00121c);
	border-radius: var(--r-md, 8px);
	overflow: hidden;
}

.pp-vfacade .pp-vfacade__btn {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* (0,3,0) so it beats the article body's `.pp-prose .pardee-postbody img` (0,2,1), whose 40px block
   margin would otherwise push this absolutely positioned still down and out of its own frame. */
.pp-vfacade .pp-vfacade__btn .pp-vfacade__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.pp-vfacade .pp-vfacade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	right: auto;      /* the 2026 kit centres its own play disc with inset:0 + margin:auto — both     */
	bottom: auto;     /* together with this translate push the disc off-centre, so neutralise them    */
	margin: 0;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 246, 240, .94);
	color: var(--pp-ink-mid, #0d2b38);
	transition: transform .2s ease, background-color .2s ease;
	pointer-events: none;
}

.pp-vfacade .pp-vfacade__play svg {
	width: 26px;
	height: 26px;
	margin-left: 3px;
	fill: currentColor;
}

/* The glyph is painted on its own element. Beaver Builder's global button style claims every element
   inside a <button> in builder content (`.fl-builder-content button:not(.fl-content-ui-button) *`,
   (0,3,1); the `.fl-page`-prefixed twin is (0,3,1) as well), so the disc's own colour has to be stated
   at (0,4,0) and the fill has to be a colour rather than `currentColor`, which would resolve against
   that claim. */
.fl-builder-content .pp-vfacade .pp-vfacade__btn .pp-vfacade__play,
.fl-builder-content .pp-vfacade .pp-vfacade__btn .pp-vfacade__play svg {
	color: var(--pp-ink-mid, #0d2b38);
	fill: var(--pp-ink-mid, #0d2b38);
}

.pp-vfacade .pp-vfacade__btn:hover .pp-vfacade__play {
	transform: translate(-50%, -50%) scale(1.06);
	background: var(--pp-cream, #fff6f0);
}

.pp-vfacade .pp-vfacade__btn:focus-visible {
	outline: 3px solid var(--pp-clay, #c96f4a);
	outline-offset: -3px;
}

/* ── The legacy "video block" play button ───────────────────────────────────────────────────────
   The theme's ACF `content_blocks` video block (theme content-blocks/video.php, ~23 published posts)
   prints an <img> with an `.video-trigger` anchor over it. Its only styling lives in the theme's
   legacy app.css, which the 2026 article template does not load — so the control would render as a bare
   white arrow floating BELOW the photo. These rules put the
   play disc back over the image in the 2026 language; where the legacy stylesheet IS loaded they say
   the same thing at a higher specificity, so the block looks the same on both templates. */

.video-thumbnail .thumbnail-wrapper {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.video-thumbnail .thumbnail-wrapper > img {
	display: block;
	width: 100%;
	height: auto;
}

.video-thumbnail .thumbnail-wrapper .video-trigger {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 246, 240, .94);
	color: var(--pp-ink-mid, #0d2b38);
	transition: transform .2s ease, background-color .2s ease;
}

.video-thumbnail .thumbnail-wrapper .video-trigger svg {
	width: 26px;
	height: 26px;
	margin-left: 3px;
	fill: currentColor;
}

.video-thumbnail .thumbnail-wrapper .video-trigger:hover {
	transform: translate(-50%, -50%) scale(1.06);
	background: var(--pp-cream, #fff6f0);
}

.video-thumbnail .thumbnail-wrapper .video-trigger:focus-visible {
	outline: 3px solid var(--pp-clay, #c96f4a);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.video-thumbnail .thumbnail-wrapper .video-trigger { width: 52px; height: 52px; }
	.video-thumbnail .thumbnail-wrapper .video-trigger svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	.video-thumbnail .thumbnail-wrapper .video-trigger { transition: none; }
	.video-thumbnail .thumbnail-wrapper .video-trigger:hover { transform: translate(-50%, -50%); }
}

@media (max-width: 600px) {
	.pp-vfacade .pp-vfacade__play { width: 52px; height: 52px; }
	.pp-vfacade .pp-vfacade__play svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-vfacade .pp-vfacade__play { transition: none; }
	.pp-vfacade .pp-vfacade__btn:hover .pp-vfacade__play { transform: translate(-50%, -50%); }
}