/**
 * Featured Video Embed - frontend styles
 *
 * Content left / video right, with red corner brackets framing the video.
 * The dark variant (.fve--dark, which also carries the theme's .dark-bg class)
 * uses white text; the light variant uses the theme's regular text colors.
 * On mobile the video stacks above the content.
 */

.wp-block-critical-hit-featured-video-embed {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4rem);
	/* Always full window width, breaking out of any content container. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

@media (min-width:1082px) {
	.wp-block-critical-hit-featured-video-embed {
		padding-top:12.5rem;
		padding-bottom:12.5rem;
	}
}

.home .wp-block-critical-hit-featured-video-embed {
	margin-bottom:12.5rem;
}

@media (max-width:1081px) {
	.home .wp-block-critical-hit-featured-video-embed {
		margin-bottom:6rem;
	}
}

@media (max-width:781px) {
	.home .wp-block-critical-hit-featured-video-embed {
		margin-bottom:4rem;
	}
}

/* Default backgrounds; an inline style from block settings overrides these. */
.featured-video-embed.fve--dark {
	background-color: var(--wp--color--black, #121824);
	color: #fff;
}

.featured-video-embed.fve--light {
	background-color: var(--wp--color--light-gray, #f7f7f7);
	color: #333;
}

/* Dark variant: white body text (headings are covered by the .dark-bg rules). */
.featured-video-embed.fve--dark .fve-content,
.featured-video-embed.fve--dark .fve-content p,
.featured-video-embed.fve--dark .fve-content li {
	color: #fff;
}

.featured-video-embed.fve--dark .fve-content p.margin-none {
	margin-bottom:0
}

@media (min-width:1082px) {
	.featured-video-embed.fve--dark .fve-content p.large{
		font-size:1.75rem;
		line-height:1.5;
	}	
}

/* --- Background image + overlay ------------------------------------------- */

.featured-video-embed .fve-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.featured-video-embed .fve-bg .fve-bg__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-video-embed .fve-bg .fve-bg__overlay {
	position: absolute;
	inset: 0;
}

/* --- Layout ---------------------------------------------------------------- */

.featured-video-embed .fve-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	max-width: 1640px;
	margin: 0 auto;
}

.featured-video-embed .fve-content {
	flex: 1 1 55%;
	min-width: 0;
}

.featured-video-embed .fve-content > *:last-child {
	margin-bottom: 0;
}

.featured-video-embed .fve-media {
	flex: 1 1 45%;
	min-width: 0;
}

/* Check list style used by the block's starter template. */
.featured-video-embed ul.fve-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.featured-video-embed ul.fve-check-list li {
	padding: 0.3em 0 0.3em 2.75em;
	margin-bottom: 1rem;
	background: url(/wp-content/uploads/check-icon-green.svg) left center no-repeat;
	background-size: 1.75em;
}

.featured-video-embed ul.fve-check-list li:last-child {
	margin-bottom: 0;
}

/* --- Video frame with red corner brackets ---------------------------------- */

/* Padding creates the offset between the brackets and the video edges. */
.featured-video-embed .fve-frame {
	position: relative;
	padding: clamp(16px, 1.6vw, 24px);
}

.featured-video-embed .fve-bracket {
	position: absolute;
	width: clamp(40px, 4vw, 64px);
	height: clamp(40px, 4vw, 64px);
	pointer-events: none;
}

.featured-video-embed .fve-bracket--tl {
	top: 0;
	left: 0;
	border-top: 8px solid #c40a05;
	border-left: 8px solid #c40a05;
}

.featured-video-embed .fve-bracket--tr {
	top: 0;
	right: 0;
	border-top: 8px solid #c40a05;
	border-right: 8px solid #c40a05;
}

.featured-video-embed .fve-bracket--bl {
	bottom: 0;
	left: 0;
	border-bottom: 8px solid #c40a05;
	border-left: 8px solid #c40a05;
}

.featured-video-embed .fve-bracket--br {
	bottom: 0;
	right: 0;
	border-bottom: 8px solid #c40a05;
	border-right: 8px solid #c40a05;
}

/* --- Player ---------------------------------------------------------------- */

.featured-video-embed .fve-player {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	margin: 0;
	border: 0;
	background: #000;
	overflow: hidden;
	border-radius:0;
}

.featured-video-embed button.fve-player {
	cursor: pointer;
}

.featured-video-embed .fve-player .fve-thumbnail,
.featured-video-embed .fve-player iframe,
.featured-video-embed .fve-player video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.featured-video-embed .fve-player iframe{
	border-radius:0;
}

.featured-video-embed .fve-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 23%;
	height: auto;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform 200ms ease;
}

.featured-video-embed button.fve-player:hover .fve-play,
.featured-video-embed button.fve-player:focus-visible .fve-play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* --- Mobile: video stacks above the content -------------------------------- */

@media only screen and (max-width: 781px) {
	.featured-video-embed .fve-inner {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.featured-video-embed .fve-content,
	.featured-video-embed .fve-media {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.featured-video-embed .fve-play {
		transition: none;
	}
}