/**
 * Hero center multimedia — fixed frame; media adapts inside, not the Hero layout.
 */

.hero-media-frame {
	position: relative;
	overflow: hidden;
}

.hero-media-frame .hero-media-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #101828;
}

.hero-media-poster,
.hero-media-poster-img,
.hero-media-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hero-media-poster {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero-media-poster--placeholder {
	background: linear-gradient(135deg, #1d2939, #344054);
}

/* Poster-first (Instagram / Facebook / Twitter): show featured image on load. */
.hero-media-frame--poster-first:not(.is-embed-active) .hero-media-stage {
	background: transparent;
}

.hero-media-frame--poster-first:not(.is-embed-active) .hero-media-poster {
	object-fit: cover;
}

.hero-media-video {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.hero-media-embed-host {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
}

.hero-media-embed-host[hidden] {
	display: none !important;
}

/* Landscape YouTube: letterboxed 16:9 via IFrame API player. */
.hero-media-frame--youtube:not(.hero-media-frame--vertical) .hero-media-embed-host--youtube-wide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000;
}

.hero-media-frame--youtube:not(.hero-media-frame--vertical) .hero-media-embed-host--youtube-wide .hero-media-embed-slot {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.hero-youtube-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero-media-embed-slot--fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero-youtube-player iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.hero-media-frame--youtube.is-embed-active .hero-youtube-player,
.hero-media-frame--youtube.is-playing .hero-youtube-player,
.hero-media-frame--youtube.is-embed-active .hero-youtube-player iframe,
.hero-media-frame--youtube.is-playing .hero-youtube-player iframe {
	pointer-events: auto;
}

/* Other non-vertical embeds (fallback). */
.hero-media-frame:not(.hero-media-frame--vertical):not(.hero-media-frame--youtube) .hero-media-embed-host:not(.hero-media-embed-host--social-wide) iframe.hero-media-embed {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	border: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

/* Vertical video: layered background (blurred cover) + contained foreground. */
.hero-media-frame--vertical .hero-media-stage {
	background: transparent;
}

.hero-media-frame--vertical.hero-media-frame--poster-first:not(.is-embed-active) .hero-media-stage {
	background: transparent;
}

/* Vertical poster-first: fill the foreground slot on load (not a tiny corner thumbnail). */
.hero-media-frame--vertical.hero-media-frame--poster-first:not(.is-embed-active):not(.is-playing) .hero-video-main .hero-media-poster.hero-video-main__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	aspect-ratio: unset;
	object-fit: cover;
	object-position: center center;
}

.hero-video-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero-video-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter: blur(36px) brightness(0.45) saturate(0.8);
	transform: scale(1.06);
	opacity: 0.9;
	pointer-events: none;
}

/* Soften side fill — keep focus on the foreground video. */
.hero-video-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(16, 24, 40, 0.72) 0%,
		rgba(16, 24, 40, 0.2) 18%,
		rgba(16, 24, 40, 0.2) 82%,
		rgba(16, 24, 40, 0.72) 100%
	);
}

.hero-video-bg--placeholder {
	background: linear-gradient(135deg, #1d2939, #344054);
}

.hero-video-main {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.hero-video-main .hero-video-main__media,
.hero-video-main .hero-media-poster,
.hero-video-main .hero-media-video {
	position: relative;
	inset: auto;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center center;
	opacity: 1;
}

.hero-video-main .hero-media-video {
	z-index: 2;
}

/* Native MP4/MOV: autoplay in foreground; hide duplicate poster over the video. */
.hero-media-frame--vertical.hero-media-frame--autoplay .hero-video-main .hero-media-poster {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.hero-media-frame--vertical.hero-media-frame--autoplay:not(.is-video-loading) .hero-video-main .hero-media-video {
	opacity: 1;
}

.hero-media-frame--vertical.hero-media-frame--native.is-video-loading .hero-video-main .hero-media-video {
	opacity: 0;
}

/* Foreground vertical slot: height-led (avoids collapsed iframe) + wider max width. */
.hero-media-frame--vertical .hero-video-main__embed,
.hero-media-frame--vertical .hero-video-main .hero-video-main__media {
	height: 100%;
	width: auto;
	max-width: min(70%, 540px);
	max-height: 100%;
	aspect-ratio: 9 / 16;
}

.hero-video-main__embed {
	position: relative;
	inset: auto;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: transparent;
	flex-shrink: 0;
}

/* Instagram: crop profile / footer chrome inside the embed. */
.hero-media-frame--vertical[data-hero-provider="instagram"] .hero-video-main__embed iframe.hero-media-embed {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
	transform: scale(1.52) translateY(-2.5%);
	transform-origin: center 52%;
}

.hero-media-frame--vertical.is-embed-active .hero-video-main .hero-media-poster,
.hero-media-frame--vertical.is-playing .hero-video-main .hero-media-poster {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.hero-media-frame--vertical.is-embed-active .hero-video-main__embed,
.hero-media-frame--vertical.is-embed-active .hero-video-main__embed[hidden] {
	display: flex !important;
	visibility: visible;
}

.hero-media-frame--vertical.is-embed-active .hero-video-main__embed iframe.hero-media-embed {
	pointer-events: auto;
}

.hero-media-frame--vertical:not(.is-embed-active) .hero-video-main__embed[hidden] {
	display: none !important;
}

/* X / Twitter: widgets.js embed scaled to fit the hero (no scroll). */
.hero-media-embed-host--twitter-widgets {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: transparent;
}

.hero-media-embed-host--twitter-widgets .hero-twitter-widgets-fit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero-media-embed-host--twitter-widgets .hero-twitter-widgets-mount {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	transform-origin: center center;
	will-change: transform;
}

.hero-media-embed-host--twitter-widgets .hero-twitter-widgets-mount .twitter-tweet {
	margin: 0 auto !important;
}

/* Vertical layout: same centered slot as Instagram / native vertical video. */
.hero-media-frame--vertical[data-hero-provider="twitter"] .hero-media-embed-host--twitter-widgets.hero-video-main__embed {
	height: 100%;
	width: 100%;
	max-width: min(85%, 560px);
	max-height: 100%;
	aspect-ratio: unset;
}

.hero-media-frame--vertical.is-embed-active[data-hero-provider="twitter"] .hero-media-embed-host--twitter-widgets.hero-video-main__embed,
.hero-media-frame--vertical.is-embed-active[data-hero-provider="twitter"] .hero-media-embed-host--twitter-widgets.hero-video-main__embed[hidden] {
	display: flex !important;
	visibility: visible;
}

/* Twitter: loading overlay hides raw blockquote links while widgets.js hydrates. */
.hero-media-frame.is-twitter-loading .hero-media-video-loader {
	opacity: 1;
	visibility: visible;
}

.hero-media-frame.is-twitter-loading .hero-twitter-widgets-fit {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	width: 550px;
	max-width: 550px;
	left: 50%;
	top: 0;
	transform: translateX( -50% );
	overflow: hidden;
}

.hero-media-frame.is-twitter-loading:not(.is-embed-active) .hero-media-poster,
.hero-media-frame.is-twitter-loading:not(.is-embed-active) .hero-video-main .hero-media-poster {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
}

.hero-media-frame.is-twitter-loading .hero-media-embed-host--twitter-widgets {
	display: flex !important;
	visibility: visible;
}

/* Facebook (standard layout): letterboxed 16:9 inside the hero frame. */
.hero-media-frame:not(.hero-media-frame--vertical) .hero-media-embed-host--social-wide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000;
}

.hero-media-frame:not(.hero-media-frame--vertical).is-embed-active .hero-media-embed-host--social-wide {
	display: flex !important;
}

.hero-media-frame:not(.hero-media-frame--vertical) .hero-media-embed-host--social-wide .hero-media-embed-slot {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.hero-media-frame:not(.hero-media-frame--vertical) .hero-media-embed-host--social-wide .hero-media-embed-slot iframe.hero-media-embed {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	border: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(1.15);
	transform-origin: center center;
}

.hero-media-frame--social.is-embed-active .hero-media-embed-host--social-wide .hero-media-embed-slot iframe.hero-media-embed {
	pointer-events: auto;
}

/* Keep embed contained — do not bleed into side columns */
.hero-col.hero-center {
	overflow: hidden;
	min-width: 0;
}

.hero-col.hero-center .hero-media-frame {
	isolation: isolate;
}

.hero-media-frame.is-playing .hero-media-poster {
	opacity: 0;
	pointer-events: none;
}

.hero-media-frame.is-playing .hero-media-video {
	opacity: 1;
}

.hero-media-frame.is-playing .hero-media-play-overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.hero-media-frame.is-embed-active .hero-media-poster {
	opacity: 0;
	pointer-events: none;
}

.hero-media-frame.is-embed-active .hero-media-embed-host:not([hidden]) {
	visibility: visible;
}

.hero-media-frame.is-embed-active .hero-media-play-overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Featured-image fallback when embed fails or video is unavailable */
.hero-media-frame.is-poster-fallback .hero-media-embed-host,
.hero-media-frame.is-poster-fallback .hero-youtube-player,
.hero-media-frame.is-poster-fallback .hero-youtube-player iframe,
.hero-media-frame.is-poster-fallback .hero-media-video {
	display: none !important;
	visibility: hidden !important;
}

.hero-media-frame.is-poster-fallback .hero-media-poster,
.hero-media-frame.is-poster-fallback .hero-video-main .hero-media-poster,
.hero-media-frame.is-poster-fallback .hero-media-poster--placeholder {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	z-index: 3;
}

.hero-media-frame.is-poster-fallback .hero-video-bg {
	opacity: 1;
}

.hero-media-frame--autoplay:not(.is-embed-active):not(.is-playing):not(.is-poster-fallback) .hero-media-embed-host {
	visibility: hidden;
	pointer-events: none;
}

/* Local video (MP4/MOV): loading state until the file can play. */
.hero-media-video-loader {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	background: rgba(16, 24, 40, 0.5);
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hero-media-frame:not(.is-video-loading) .hero-media-video-loader {
	opacity: 0;
	visibility: hidden;
}

.hero-media-video-loader__gif {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.hero-media-video-loader__spinner {
	display: block;
	width: 48px;
	height: 48px;
	border: 4px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: hero-media-video-spin 0.75s linear infinite;
}

@keyframes hero-media-video-spin {
	to {
		transform: rotate(360deg);
	}
}

.hero-media-video-loader .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hero-media-frame--native:not(.is-video-loading) .hero-media-video {
	opacity: 1;
}

.hero-media-frame--native.is-video-loading .hero-media-video {
	opacity: 0;
}

/* Local video: unmute control (autoplay starts muted). */
.hero-media-audio-toggle {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 24, 40, 0.72);
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.hero-media-frame--native.is-playing .hero-media-audio-toggle,
.hero-media-frame--native.is-video-ready .hero-media-audio-toggle {
	opacity: 1;
	visibility: visible;
}

.hero-media-audio-toggle:hover,
.hero-media-audio-toggle:focus-visible {
	background: rgba(16, 24, 40, 0.9);
	transform: scale(1.05);
}

.hero-media-audio-toggle__icon {
	display: none;
	align-items: center;
	justify-content: center;
}

.hero-media-audio-toggle[aria-pressed="true"] .hero-media-audio-toggle__icon--muted,
.hero-media-audio-toggle[aria-pressed="false"] .hero-media-audio-toggle__icon--unmuted {
	display: flex;
}

/* Hero media is autoplay-only — no custom play overlay. */
.hero-media-play-overlay {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.hero-media-play-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(16, 24, 40, 0.35);
	cursor: pointer;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.hero-media-play-overlay:hover,
.hero-media-play-overlay:focus-visible {
	background: rgba(16, 24, 40, 0.5);
}

.hero-media-play-icon {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	position: relative;
}

.hero-media-play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #101828;
}

/* Center Hero: poster image without multimedia uses same absolute fill as video */
.hero-center .hero-image.hero-media-frame .hero-media-poster-img,
.hero-center .hero-image:not(.hero-media-frame) img {
	max-height: none;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
	position: absolute;
	inset: 0;
}

.hero-center .hero-image:not(.hero-media-frame) img {
	position: absolute;
	inset: 0;
}

/* Archive list — persisted Hero video in category rows */
.hero-media-frame--archive {
	width: 280px;
	height: 158px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #f2f4f7;
}

.hero-media-frame--archive .hero-media-stage {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero-media-frame--archive .hero-media-poster,
.hero-media-frame--archive .hero-media-poster--placeholder,
.hero-media-frame--archive .hero-media-video,
.hero-media-frame--archive .hero-media-embed-host {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero-media-frame--archive .hero-media-poster,
.hero-media-frame--archive .hero-media-video {
	object-fit: cover;
	object-position: center center;
}

.hero-media-frame--archive .hero-media-embed-host iframe.hero-media-embed,
.hero-media-frame--archive .hero-media-embed-slot iframe.hero-media-embed {
	width: 100%;
	height: 100%;
	border: 0;
}

.hero-media-frame--archive .hero-youtube-player,
.hero-media-frame--archive .hero-youtube-player iframe {
	width: 100%;
	height: 100%;
}

.hero-media-frame--archive.is-poster-fallback .hero-media-embed-host,
.hero-media-frame--archive.is-poster-fallback .hero-media-video {
	display: none !important;
}

.hero-media-frame--archive.is-poster-fallback .hero-media-poster,
.hero-media-frame--archive.is-poster-fallback .hero-media-poster--placeholder {
	opacity: 1 !important;
	visibility: visible !important;
}

.hero-media-frame--archive:not(.is-embed-active):not(.is-playing) .hero-media-poster,
.hero-media-frame--archive:not(.is-embed-active):not(.is-playing) .hero-media-poster--placeholder {
	opacity: 1;
}

.hero-media-frame--archive .hero-media-audio-toggle,
.hero-media-frame--archive .hero-media-video-loader {
	display: none !important;
}

/* Single article — persisted Hero video header */
.single-entry-thumbnail--video {
	margin: 0 0 1.5rem;
}

.hero-media-frame--single {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	background: #101828;
}

.hero-media-frame--single .hero-media-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.hero-media-frame--single.hero-media-frame--vertical .hero-media-stage {
	aspect-ratio: 9 / 16;
	max-height: min( 80vh, 720px );
	margin-inline: auto;
	max-width: 405px;
}

.hero-media-frame--single.is-poster-fallback .hero-media-embed-host,
.hero-media-frame--single.is-poster-fallback .hero-media-video {
	display: none !important;
}

.hero-media-frame--single.is-poster-fallback .hero-media-poster,
.hero-media-frame--single.is-poster-fallback .hero-media-poster--placeholder {
	opacity: 1 !important;
	visibility: visible !important;
}