/**
 * Click-to-load video facade for framed-media feature blocks.
 * Added 2026-06-25 (see inc/video-embed.php). Renders a 16:9 poster + play button
 * inside the same framed slot as the block image; iframe is injected on click.
 */

.hrc-video-embed {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
	background-color: #000;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Legacy fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
	.hrc-video-embed::before {
		content: "";
		display: block;
		padding-top: 56.25%;
	}
	.hrc-video-embed.hrc-video-embed--portrait::before {
		padding-top: 177.78%;
	}
}

/* Portrait / vertical (9:16) video — constrained + centred so it fits any panel.
   !important overrides the per-block landscape width/margin rules below. */
.hrc-video-embed.hrc-video-embed--portrait {
	aspect-ratio: 9 / 16;
	width: 100% !important;
	max-width: 340px !important;
	margin-top: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.hrc-video-embed::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.12);
	transition: background 0.2s ease;
}

.hrc-video-embed:hover::after,
.hrc-video-embed:focus-visible::after {
	background: rgba(0, 0, 0, 0.04);
}

.hrc-video-embed:focus-visible {
	outline: 3px solid #ff8030;
	outline-offset: 2px;
}

.hrc-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hrc-video-embed__btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 2;
	line-height: 0;
}

.hrc-video-embed__icon {
	width: 68px;
	height: 48px;
	display: block;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

.hrc-video-embed__shape {
	fill: #212121;
	fill-opacity: 0.85;
	transition: fill 0.2s ease, fill-opacity 0.2s ease;
}

.hrc-video-embed:hover .hrc-video-embed__shape,
.hrc-video-embed:focus-visible .hrc-video-embed__shape {
	fill: #ff8030;
	fill-opacity: 1;
}

/* Playing state: drop overlay + button, solid black behind the iframe. */
.hrc-video-embed.is-playing {
	cursor: default;
	background-color: #000;
}

.hrc-video-embed.is-playing::after,
.hrc-video-embed.is-playing .hrc-video-embed__btn {
	display: none;
}

/* -----------------------------------------------------------------------
 * Per-block sizing — match each block's image frame so nothing shifts.
 * Scoped by the parent container (not the image class) to avoid the theme's
 * img-specific selectors and opacity:0 fade-in rules.
 * -------------------------------------------------------------------- */

/* left-content-right-image: full width, 20px radius, overlap pull-up. */
.left-content-right-image .right-image .hrc-video-embed {
	width: 100%;
	border-radius: 20px;
	margin-top: -100px;
}
.left-content-right-image .right-image.disable-overlay .hrc-video-embed {
	margin-top: 0;
}

/* accordion-image-cta: matches .side-image width. */
.accordion-image-cta .right-column .hrc-video-embed {
	width: calc(100% - 80px);
}

/* two-column-content-cta: matches .image-main max width. */
.two-column-content-cta .image .hrc-video-embed {
	width: 100%;
	max-width: 559.872px;
}

/* centered-heading-two-column: image sits in .left-column at calc(100% - 100px). */
.centered-heading-two-column .left-column .hrc-video-embed {
	width: 100%;
	max-width: calc(100% - 100px);
}

/* call-to-action: screenshot sits flush at the section bottom — round top corners only. */
.call-to-action .hrc-video-embed {
	width: 100%;
	border-radius: 10px 10px 0 0;
}

/* support: freeform image slot — keep the default 16:9 framed treatment. */
.support-block__image .hrc-video-embed {
	width: 100%;
}

@media (max-width: 991px) {
	.left-content-right-image .right-image .hrc-video-embed {
		margin-top: 0;
	}
}