/* QLD Video Hero v2.1.47
   Layout container only — Presto Player owns all player UI, poster, and controls.
   NOTE: Presto uses shadow DOM. CSS selectors cannot reach .plyr, .plyr__controls,
   or .presto-player__muted-overlay from here. Fixes for those go through JS (frontend.js). */

.qvh-hero {
	position: relative;
	max-width: 1100px;
	width: 100%;
	/* Viewport-based height — stable even when parent padding/width settles late */
	height: calc(min(100vw - 40px, 1100px) * 0.5625);
	aspect-ratio: auto;
	margin: 0 auto;
	overflow: hidden;
	background: transparent;
	border-radius: 16px;
	contain: layout paint;
	min-height: 0;
}

/* Presto Player fills the hero at full width — absolute so mount cannot
   expand the 16:9 box (that was Whitehaven CLS 0.275). */
.qvh-hero > presto-player,
.qvh-hero > figure,
.qvh-hero > .wp-block-video,
.qvh-hero > .wp-block-presto-player-reusable-edit {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	--presto-player-border-radius: 16px;
	border-radius: 16px;
}

.qvh-hero presto-player {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	--presto-player-border-radius: 16px;
}

/* Presto wraps its output in a <figure> (wp-block-video) with default browser
   margins (1em 40px). Reset them so the player fills the full hero width. */
.qvh-hero figure,
.qvh-hero .wp-block-presto-player-reusable-edit,
.qvh-hero .wp-block-video {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	--presto-player-border-radius: 16px;
	border-radius: 16px;
	overflow: hidden;
}

/* Self-hosted <video> fills the hero */
.qvh-hero video,
.qvh-hero iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Poster is the stable first frame. It remains visible until playback starts. */
.qvh-poster {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	transition: opacity 0.3s ease;
}
.qvh-poster-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Matches Presto/Plyr's overlaid play button, scaled down on small screens. */
.qvh-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	padding: clamp( 12px, 3.2vw, 24px ) clamp( 18px, 5vw, 40px );
	background: #00b3ff;
	border: 0;
	border-radius: 2px;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.2 );
	transition: background 0.2s ease, transform 0.15s ease;
}
.qvh-play-btn svg {
	width: clamp( 22px, 5vw, 37px );
	height: clamp( 18px, 4.2vw, 31px );
	margin-left: 3px; /* optical centre for play triangle */
}
.qvh-play-btn:hover,
.qvh-play-btn:focus {
	background: #0099dd;
	transform: translate( -50%, -50% ) scale( 1.04 );
}
.qvh-poster--out {
	opacity: 0;
	pointer-events: none;
}

/* Appears when autoplay="1" is set.
   Plugin handles muted autoplay via Plyr; this button lets visitor enable sound
   without Presto's restart-on-unmute side effect. */
.qvh-unmute {
	position: absolute;
	bottom: 56px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px 7px 10px;
	background: rgba( 0, 0, 0, 0.65 );
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 50px;
	cursor: pointer;
	z-index: 10;
	transition: background 0.2s ease, opacity 0.35s ease, transform 0.35s ease;
	backdrop-filter: blur( 4px );
}
.qvh-unmute svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}
.qvh-unmute:hover {
	background: rgba( 0, 0, 0, 0.85 );
}
.qvh-unmute--off {
	opacity: 0;
	transform: translateY( 4px );
}

@media ( max-width: 600px ) {
	.qvh-unmute {
		bottom: 52px;
		right: 8px;
		font-size: 12px;
		padding: 6px 12px 6px 8px;
	}
}
/* Book Now CTA — clear of Plyr/Presto control bar (~48–56px). */
.qvh-book {
	position: absolute;
	bottom: clamp( 72px, 14vw, 96px );
	left: 50%;
	transform: translateX( -50% );
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 7px, 1.6vw, 11px ) clamp( 16px, 4vw, 28px );
	background: #00B3FF;
	color: #fff;
	font-size: clamp( 0.75rem, 2.4vw, 0.95rem );
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 50px;
	white-space: nowrap;
	max-width: calc( 100% - 24px );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.3 );
	transition: background 0.2s ease, opacity 3s ease, box-shadow 0.4s ease;
}
@media ( min-width: 783px ) {
	.qvh-book {
		padding: 12px 32px;
		font-size: 1rem;
		min-width: 180px;
	}
}
.qvh-book:hover,
.qvh-book:focus {
	background: #0099dd;
	color: #fff;
}
.qvh-book--scroll {
	cursor: pointer;
}

/* ── Timed reveal modes (book_cta="soft" or "story") ─────────────────────────
   When [data-book-cta] is set, button starts invisible and fades in 10s before
   the clip ends. Opacity-only (no translate/scale) so Lighthouse CLS stays clean. */

[data-book-cta] .qvh-book {
	opacity: 0;
	pointer-events: none;
}
[data-book-cta] .qvh-book.qvh-book--visible {
	opacity: 1;
	pointer-events: auto;
}

/* Option B — pulse via shadow only (scale would cause CLS) */
@keyframes qvh-cta-pulse {
	0%, 100% {
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.3 );
	}
	50% {
		box-shadow: 0 3px 18px rgba( 0, 179, 255, 0.6 );
	}
}
.qvh-book--pulse {
	animation: qvh-cta-pulse 2s ease-in-out infinite;
}

/* Option B — end of video: colour emphasis, no grow */
.qvh-book--ended {
	animation: none;
	background: linear-gradient( 135deg, #00B3FF, #007ACC ) !important;
	box-shadow: 0 3px 16px rgba( 0, 179, 255, 0.55 ) !important;
	transition: none;
}

@media ( max-width: 600px ) {
	.qvh-book {
		bottom: 78px;
		padding: 7px 16px;
		font-size: 0.78rem;
	}
}
@media ( max-width: 380px ) {
	.qvh-book {
		bottom: 74px;
		padding: 6px 14px;
		font-size: 0.72rem;
	}
}

/* When Book Now is showing, keep it above any leftover Presto play chrome. */
.qvh-hero.qvh-book-on .qvh-book {
	z-index: 9;
}

/* ── End-of-video screen (backdrop + headline + Book Now in one stack) ─── */
.qvh-end-screen {
	position: absolute;
	inset: 0;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp( 16px, 3vw, 24px );
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.45s ease;
	text-align: center;
	padding: 24px 20px;
	box-sizing: border-box;
}
.qvh-end-screen--visible {
	opacity: 1;
	pointer-events: auto;
}
.qvh-end-screen__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba( 0, 0, 0, 0.72 );
	pointer-events: none;
}
.qvh-end-screen--no-backdrop .qvh-end-screen__backdrop {
	display: none;
}
.qvh-end-screen__text {
	position: relative;
	z-index: 2;
	color: #fff;
	font-size: clamp( 1.2rem, 3.5vw, 1.75rem );
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
	max-width: 20em;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.65 );
}
.qvh-end-screen .qvh-book {
	position: relative !important;
	bottom: auto !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	z-index: 2;
	margin: 0;
	opacity: 1 !important;
	pointer-events: auto !important;
	padding: clamp( 12px, 2vw, 16px ) clamp( 28px, 5vw, 42px );
	font-size: clamp( 0.95rem, 2.2vw, 1.15rem );
	min-width: clamp( 180px, 40vw, 240px );
}
.qvh-end-screen__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.qvh-end-screen__close:hover,
.qvh-end-screen__close:focus {
	background: rgba( 0, 0, 0, 0.75 );
	border-color: rgba( 255, 255, 255, 0.65 );
	color: #fff;
	outline: none;
}
.qvh-end-screen__close:focus-visible {
	outline: 2px solid #00b3ff;
	outline-offset: 2px;
}

/* Legacy skip link (old cached HTML) */
.qvh-end-screen__skip {
	position: absolute;
	top: 12px;
	right: 14px;
	z-index: 4;
	background: none;
	border: none;
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 0.875rem;
	cursor: pointer;
	padding: 4px 8px;
	pointer-events: auto;
}
.qvh-end-screen__skip:hover { color: #fff; }

.qvh-hero.qvh-ended .qvh-book--ended {
	animation: none;
	background: linear-gradient( 135deg, #00B3FF, #007ACC ) !important;
	box-shadow: 0 4px 22px rgba( 0, 179, 255, 0.55 ) !important;
}

@media ( max-width: 600px ) {
	.qvh-end-screen__text { font-size: 1.15rem; }
	.qvh-end-screen .qvh-book {
		min-width: 160px;
		padding: 10px 22px;
		font-size: 0.88rem;
	}
}

/* Legacy class kept for old cached HTML */
.qvh-end-cta { display: none !important; }