/**
 * Neteuro Mega Hero Slider – frontend styles
 * Phase 2.2–4.3: sound, play/pause, slide time, pagination modes, segmented progress.
 *
 * Z-index hierarchy (within .nmh-slide / .nmh-hero):
 * 1  media (image / video / youtube)
 * 2  overlay background + overlay shell
 * 3  overlay content / blocked & click-to-play overlays
 * 4  slide time indicator
 * 5  pagination (dots / nav fraction / segments)
 * 6  arrows
 * 7  sound button
 * 8  play/pause button
 */

/* ------------------------------------------------------------------
 * 1. Root / layout
 * ------------------------------------------------------------------ */
.nmh-hero {
	position: relative;
	width: 100%;
	overflow: hidden;

	/* Overlay / content */
	--nmh-overlay-color: transparent;
	--nmh-overlay-opacity: 0;
	--nmh-content-max-width: 800px;
	--nmh-content-gap: 0.75rem;
	--nmh-title-spacing: 0px;
	--nmh-subtitle-spacing: 0px;

	/* Arrows */
	--nmh-arrow-size: 10px;
	--nmh-arrow-button-size: 44px;
	--nmh-arrow-offset: 16px;
	--nmh-arrow-bg: rgba(255, 255, 255, 0.3);
	--nmh-arrow-color: #1d2327;
	--nmh-arrow-bg-hover: rgba(255, 255, 255, 0.6);
	--nmh-arrow-color-hover: var(--nmh-arrow-color);
	--nmh-arrow-radius: 50%;
	--nmh-arrow-opacity: 1;

	/* Pagination */
	--nmh-dot-size: 10px;
	--nmh-dot-active-size: var(--nmh-dot-size);
	--nmh-dot-gap: 8px;
	--nmh-dot-offset: 16px;
	--nmh-dot-color: rgba(255, 255, 255, 0.5);
	--nmh-dot-active-color: #fff;
	--nmh-dot-opacity: 1;
	--nmh-dot-active-opacity: 1;
	--nmh-dot-radius: 50%;

	/* Sound */
	--nmh-sound-size: 44px;
	--nmh-sound-icon-size: 22px;
	--nmh-sound-offset-x: 24px;
	--nmh-sound-offset-y: 24px;
	--nmh-sound-bg: rgba(0, 0, 0, 0.55);
	--nmh-sound-color: #fff;
	--nmh-sound-radius: 999px;

	/* Play / Pause */
	--nmh-play-size: 44px;
	--nmh-play-icon-size: 22px;
	--nmh-play-offset-x: 24px;
	--nmh-play-offset-y: 24px;
	--nmh-play-bg: rgba(0, 0, 0, 0.55);
	--nmh-play-color: #fff;
	--nmh-play-radius: 999px;
	--nmh-play-opacity: 1;

	/* Progress */
	--nmh-progress-value: 0;
	--nmh-progress-width: 100%;
	--nmh-progress-height: 3px;
	--nmh-progress-track-color: rgba(255, 255, 255, 0.25);
	--nmh-progress-color: #fff;
	--nmh-progress-radius: 999px;
	--nmh-progress-track-opacity: 1;
	--nmh-progress-offset-x: 24px;
	--nmh-progress-offset-y: 16px;
	--nmh-progress-gap: 12px;
	--nmh-progress-fraction-color: #fff;
	--nmh-progress-separator-color: var(--nmh-progress-fraction-color, #fff);

	/* Nav fraction / segmented pagination */
	--nmh-nav-fraction-color: #fff;
	--nmh-nav-fraction-separator-color: var(--nmh-nav-fraction-color, #fff);
	--nmh-nav-fraction-gap: 4px;
	--nmh-nav-fraction-offset-x: 24px;
	--nmh-nav-fraction-offset-y: 16px;
	--nmh-segment-height: 3px;
	--nmh-segment-gap: 4px;
	--nmh-segment-track: rgba(255, 255, 255, 0.25);
	--nmh-segment-fill: #fff;
	--nmh-segment-radius: 999px;
	--nmh-segment-width: 100%;
	--nmh-segment-offset-x: 24px;
	--nmh-segment-offset-y: 16px;
	--nmh-segment-opacity: 1;
}

.nmh-swiper {
	width: 100%;
	height: var(--nmh-height, 70vh);
	min-height: var(--nmh-min-height, 320px);
}

.nmh-swiper .swiper-wrapper {
	height: 100%;
}

/* ------------------------------------------------------------------
 * 2. Slides / backgrounds / media
 * ------------------------------------------------------------------ */
.nmh-slide {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.nmh-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: var(--nmh-image-size, cover);
	background-position: var(--nmh-image-position, center center);
	background-repeat: no-repeat;
}

/* Ken Burns / image motion — only .nmh-bg, never the slide or overlay */
.nmh-image-motion {
	transform-origin: center center;
	backface-visibility: hidden;
}

.nmh-image-motion.is-animating {
	will-change: transform;
	animation-duration: var(--nmh-motion-duration, 5000ms);
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.nmh-image-motion.is-animating.nmh-motion-zoom-in {
	animation-name: nmh-zoom-in;
}

.nmh-image-motion.is-animating.nmh-motion-zoom-out {
	animation-name: nmh-zoom-out;
}

.nmh-image-motion.is-animating.nmh-motion-pan-left {
	animation-name: nmh-pan-left;
}

.nmh-image-motion.is-animating.nmh-motion-pan-right {
	animation-name: nmh-pan-right;
}

.nmh-image-motion.is-animating.nmh-motion-pan-up {
	animation-name: nmh-pan-up;
}

.nmh-image-motion.is-animating.nmh-motion-pan-down {
	animation-name: nmh-pan-down;
}

.nmh-image-motion.is-animating.nmh-motion-zoom-in-left {
	animation-name: nmh-zoom-in-left;
}

.nmh-image-motion.is-animating.nmh-motion-zoom-in-right {
	animation-name: nmh-zoom-in-right;
}

.nmh-image-motion.is-animating.nmh-motion-zoom-out-left {
	animation-name: nmh-zoom-out-left;
}

.nmh-image-motion.is-animating.nmh-motion-zoom-out-right {
	animation-name: nmh-zoom-out-right;
}

@keyframes nmh-zoom-in {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}
	to {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, 0, 0);
	}
}

@keyframes nmh-zoom-out {
	from {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1) translate3d(0, 0, 0);
	}
}

@keyframes nmh-pan-left {
	from {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(var(--nmh-motion-pan-x, 3%), 0, 0);
	}
	to {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(calc(var(--nmh-motion-pan-x, 3%) * -1), 0, 0);
	}
}

@keyframes nmh-pan-right {
	from {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(calc(var(--nmh-motion-pan-x, 3%) * -1), 0, 0);
	}
	to {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(var(--nmh-motion-pan-x, 3%), 0, 0);
	}
}

@keyframes nmh-pan-up {
	from {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, var(--nmh-motion-pan-y, 3%), 0);
	}
	to {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, calc(var(--nmh-motion-pan-y, 3%) * -1), 0);
	}
}

@keyframes nmh-pan-down {
	from {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, calc(var(--nmh-motion-pan-y, 3%) * -1), 0);
	}
	to {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, var(--nmh-motion-pan-y, 3%), 0);
	}
}

@keyframes nmh-zoom-in-left {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}
	to {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(calc(var(--nmh-motion-pan-x, 3%) * -1), 0, 0);
	}
}

@keyframes nmh-zoom-in-right {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}
	to {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(var(--nmh-motion-pan-x, 3%), 0, 0);
	}
}

@keyframes nmh-zoom-out-left {
	from {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(var(--nmh-motion-pan-x, 3%), 0, 0);
	}
	to {
		transform: scale(1) translate3d(0, 0, 0);
	}
}

@keyframes nmh-zoom-out-right {
	from {
		transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(calc(var(--nmh-motion-pan-x, 3%) * -1), 0, 0);
	}
	to {
		transform: scale(1) translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nmh-image-motion,
	.nmh-image-motion.is-animating {
		animation: none !important;
		transform: none !important;
		will-change: auto !important;
	}

	.nmh-content-animation,
	.nmh-content-animation.is-content-animating,
	.nmh-content-animation.is-content-animating .nmh-title,
	.nmh-content-animation.is-content-animating .nmh-subtitle,
	.nmh-content-animation.is-content-animating .nmh-btn {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
		will-change: auto !important;
	}
}

.nmh-bg--youtube-thumb {
	/* Thumbnail uses --nmh-image-position from youtube_position mapping */
}

.nmh-youtube {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

.nmh-youtube iframe {
	width: 100%;
	height: 100%;
	border: 0;
	/* Full-bleed cover; YouTube iframe cannot use object-position reliably */
}

.nmh-local-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--nmh-video-fit, cover);
	object-position: var(--nmh-video-position, center center);
	z-index: 1;
}

/* ------------------------------------------------------------------
 * 3. Overlay / content positioning
 * ------------------------------------------------------------------ */
.nmh-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	padding: 2rem;
	box-sizing: border-box;
	pointer-events: none;
}

.nmh-overlay-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--nmh-overlay-color, transparent);
	opacity: var(--nmh-overlay-opacity, 0);
	pointer-events: none;
}

.nmh-overlay-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: inherit;
	width: 100%;
	max-width: var(--nmh-content-max-width, 800px);
	gap: var(--nmh-content-gap, 0.75rem);
	text-align: center;
	box-sizing: border-box;
}

.nmh-overlay .nmh-btn {
	pointer-events: auto;
}

/* Horizontal: align-items on overlay; Vertical: justify-content on overlay */
.nmh-overlay.nmh-content-left {
	align-items: flex-start;
}

.nmh-overlay.nmh-content-center {
	align-items: center;
}

.nmh-overlay.nmh-content-right {
	align-items: flex-end;
}

.nmh-overlay.nmh-content-top {
	justify-content: flex-start;
}

.nmh-overlay.nmh-content-middle {
	justify-content: center;
}

.nmh-overlay.nmh-content-bottom {
	justify-content: flex-end;
}

/* Inner stack alignment follows slide horizontal placement */
.nmh-overlay.nmh-content-left .nmh-overlay-content {
	align-items: flex-start;
}

.nmh-overlay.nmh-content-center .nmh-overlay-content {
	align-items: center;
}

.nmh-overlay.nmh-content-right .nmh-overlay-content {
	align-items: flex-end;
}

/* ------------------------------------------------------------------
 * Content entrance animations (Phase 3.3)
 * Targets .nmh-overlay-content only — never Ken Burns (.nmh-bg) or overlay bg.
 * Runtime class .is-content-animating is toggled by JS (separate from .is-animating).
 * Without JS / without runtime class, content remains fully visible (BC + a11y).
 * ------------------------------------------------------------------ */
.nmh-content-animation.is-content-animating:not(.nmh-content-stagger) {
	will-change: transform, opacity;
	animation-duration: var(--nmh-content-animation-duration, 800ms);
	animation-delay: var(--nmh-content-animation-delay, 200ms);
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
}

.nmh-content-animation.is-content-animating.nmh-content-animation-fade:not(.nmh-content-stagger) {
	animation-name: nmh-content-fade;
}

.nmh-content-animation.is-content-animating.nmh-content-animation-fade-up:not(.nmh-content-stagger) {
	animation-name: nmh-content-fade-up;
}

.nmh-content-animation.is-content-animating.nmh-content-animation-fade-down:not(.nmh-content-stagger) {
	animation-name: nmh-content-fade-down;
}

.nmh-content-animation.is-content-animating.nmh-content-animation-fade-left:not(.nmh-content-stagger) {
	animation-name: nmh-content-fade-left;
}

.nmh-content-animation.is-content-animating.nmh-content-animation-fade-right:not(.nmh-content-stagger) {
	animation-name: nmh-content-fade-right;
}

.nmh-content-animation.is-content-animating.nmh-content-animation-zoom-in:not(.nmh-content-stagger) {
	animation-name: nmh-content-zoom-in;
}

.nmh-content-animation.is-content-animating.nmh-content-animation-zoom-out:not(.nmh-content-stagger) {
	animation-name: nmh-content-zoom-out;
}

/* Stagger: animate title / subtitle / button independently */
.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-btn {
	will-change: transform, opacity;
	animation-duration: var(--nmh-content-animation-duration, 800ms);
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
}

.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-title {
	animation-delay: var(--nmh-content-animation-delay, 200ms);
}

.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-subtitle {
	animation-delay: calc(var(--nmh-content-animation-delay, 200ms) + var(--nmh-content-stagger-delay, 150ms));
}

.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-btn {
	animation-delay: calc(var(--nmh-content-animation-delay, 200ms) + (var(--nmh-content-stagger-delay, 150ms) * 2));
}

.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade .nmh-btn {
	animation-name: nmh-content-fade;
}

.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-up .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-up .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-up .nmh-btn {
	animation-name: nmh-content-fade-up;
}

.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-down .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-down .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-down .nmh-btn {
	animation-name: nmh-content-fade-down;
}

.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-left .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-left .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-left .nmh-btn {
	animation-name: nmh-content-fade-left;
}

.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-right .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-right .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-right .nmh-btn {
	animation-name: nmh-content-fade-right;
}

.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-in .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-in .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-in .nmh-btn {
	animation-name: nmh-content-zoom-in;
}

.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-out .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-out .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-out .nmh-btn {
	animation-name: nmh-content-zoom-out;
}

@keyframes nmh-content-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes nmh-content-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes nmh-content-fade-down {
	from {
		opacity: 0;
		transform: translate3d(0, -30px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes nmh-content-fade-left {
	from {
		opacity: 0;
		transform: translate3d(30px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes nmh-content-fade-right {
	from {
		opacity: 0;
		transform: translate3d(-30px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes nmh-content-zoom-in {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes nmh-content-zoom-out {
	from {
		opacity: 0;
		transform: scale(1.08);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.nmh-title {
	margin: 0 0 var(--nmh-title-spacing, 0);
	color: #fff;
	font-size: 2rem;
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	max-width: 100%;
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

.nmh-subtitle {
	margin: 0 0 var(--nmh-subtitle-spacing, 0);
	color: #fff;
	font-size: 1rem;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	max-width: 600px;
	width: 100%;
	box-sizing: border-box;
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

/* ------------------------------------------------------------------
 * 4. Button
 * ------------------------------------------------------------------ */
.nmh-btn {
	display: inline-block;
	padding: 0.6em 1.2em;
	background: #fff;
	background-color: #fff;
	color: #1d2327;
	text-decoration: none;
	border-radius: 4px;
	border: 0 solid transparent;
	font-weight: 600;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
	box-sizing: border-box;
}

.nmh-btn:hover {
	opacity: 0.95;
}

/* ------------------------------------------------------------------
 * 5. Arrows
 * ------------------------------------------------------------------ */
.nmh-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--nmh-arrow-button-size, 44px);
	height: var(--nmh-arrow-button-size, 44px);
	z-index: 6;
	cursor: pointer;
	background: var(--nmh-arrow-bg, rgba(255, 255, 255, 0.3));
	border: none;
	border-radius: var(--nmh-arrow-radius, 50%);
	opacity: var(--nmh-arrow-opacity, 1);
	transition: background 0.2s, opacity 0.2s;
	box-sizing: border-box;
}

.nmh-arrow:hover {
	background: var(--nmh-arrow-bg-hover, rgba(255, 255, 255, 0.6));
}

.nmh-arrow::after {
	content: '';
	position: absolute;
	top: 50%;
	width: var(--nmh-arrow-size, 10px);
	height: var(--nmh-arrow-size, 10px);
	border-top: 2px solid var(--nmh-arrow-color, #1d2327);
	border-right: 2px solid var(--nmh-arrow-color, #1d2327);
}

.nmh-arrow:hover::after {
	border-top-color: var(--nmh-arrow-color-hover, var(--nmh-arrow-color, #1d2327));
	border-right-color: var(--nmh-arrow-color-hover, var(--nmh-arrow-color, #1d2327));
}

.nmh-arrow-prev {
	left: var(--nmh-arrow-offset, 16px);
}

.nmh-arrow-prev::after {
	left: 50%;
	margin-left: calc(var(--nmh-arrow-size, 10px) * -0.4);
	transform: translateY(-50%) rotate(-135deg);
}

.nmh-arrow-next {
	right: var(--nmh-arrow-offset, 16px);
}

.nmh-arrow-next::after {
	right: 50%;
	margin-right: calc(var(--nmh-arrow-size, 10px) * -0.6);
	transform: translateY(-50%) rotate(45deg);
}

/* ------------------------------------------------------------------
 * 6. Pagination (scoped to .nmh-hero / .nmh-pagination)
 * ------------------------------------------------------------------ */
.nmh-pagination {
	position: absolute;
	bottom: var(--nmh-dot-offset, 16px);
	left: 0;
	width: 100%;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: var(--nmh-dot-gap, 8px);
	box-sizing: border-box;
	padding: 0 72px;
}

.nmh-hero .nmh-pagination .swiper-pagination-bullet {
	width: var(--nmh-dot-size, 10px);
	height: var(--nmh-dot-size, 10px);
	background: var(--nmh-dot-color, rgba(255, 255, 255, 0.5));
	opacity: var(--nmh-dot-opacity, 1);
	cursor: pointer;
	border-radius: var(--nmh-dot-radius, 50%);
	transition: background 0.2s, width 0.2s, height 0.2s, opacity 0.2s;
}

.nmh-hero .nmh-pagination .swiper-pagination-bullet:hover,
.nmh-hero .nmh-pagination .swiper-pagination-bullet-active {
	background: var(--nmh-dot-active-color, #fff);
	opacity: var(--nmh-dot-active-opacity, 1);
	width: var(--nmh-dot-active-size, var(--nmh-dot-size, 10px));
	height: var(--nmh-dot-active-size, var(--nmh-dot-size, 10px));
}

/* Navigation fraction */
.nmh-nav-fraction {
	position: absolute;
	bottom: var(--nmh-nav-fraction-offset-y, 16px);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: var(--nmh-nav-fraction-gap, 4px);
	color: var(--nmh-nav-fraction-color, #fff);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
}

.nmh-nav-fraction--left {
	left: var(--nmh-nav-fraction-offset-x, 24px);
}

.nmh-nav-fraction--center {
	left: 50%;
	transform: translateX(-50%);
}

.nmh-nav-fraction--right {
	right: var(--nmh-nav-fraction-offset-x, 24px);
}

.nmh-nav-fraction-separator {
	color: var(--nmh-nav-fraction-separator-color, var(--nmh-nav-fraction-color, #fff));
	opacity: 0.8;
}

/* Segmented progress (story-style) */
.nmh-segmented-progress {
	position: absolute;
	bottom: var(--nmh-segment-offset-y, 16px);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: var(--nmh-segment-gap, 4px);
	width: var(--nmh-segment-width, 100%);
	max-width: calc(100% - (var(--nmh-segment-offset-x, 24px) * 2));
	box-sizing: border-box;
	opacity: var(--nmh-segment-opacity, 1);
	pointer-events: none;
}

.nmh-segmented-progress--left {
	left: var(--nmh-segment-offset-x, 24px);
}

.nmh-segmented-progress--center {
	left: 50%;
	transform: translateX(-50%);
}

.nmh-segmented-progress--right {
	right: var(--nmh-segment-offset-x, 24px);
}

.nmh-segment {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 0;
	min-width: 0;
	height: var(--nmh-segment-height, 3px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--nmh-segment-radius, 999px);
	background: var(--nmh-segment-track, rgba(255, 255, 255, 0.25));
	overflow: hidden;
	font: inherit;
	color: inherit;
	pointer-events: auto;
	cursor: pointer;
	display: block;
	box-sizing: border-box;
}

span.nmh-segment {
	cursor: default;
	pointer-events: none;
}

.nmh-segment:focus {
	outline: none;
}

.nmh-segment:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.nmh-segment__fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--nmh-segment-fill, #fff);
	border-radius: inherit;
	transform-origin: left center;
	transform: scaleX(0);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.nmh-segment__fill {
		will-change: auto;
	}
}

/* ------------------------------------------------------------------
 * 6b. Progress indicator
 * ------------------------------------------------------------------ */
.nmh-progress {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: var(--nmh-progress-gap, 12px);
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: var(--nmh-progress-offset-x, 24px);
	padding-right: var(--nmh-progress-offset-x, 24px);
	pointer-events: none;
}

.nmh-progress--top {
	top: var(--nmh-progress-offset-y, 16px);
}

.nmh-progress--bottom {
	bottom: var(--nmh-progress-offset-y, 16px);
}

.nmh-progress-bar {
	flex: 1 1 auto;
	min-width: 0;
	width: var(--nmh-progress-width, 100%);
	max-width: 100%;
	height: var(--nmh-progress-height, 3px);
	border-radius: var(--nmh-progress-radius, 999px);
	background: var(--nmh-progress-track-color, rgba(255, 255, 255, 0.25));
	opacity: var(--nmh-progress-track-opacity, 1);
	overflow: hidden;
}

.nmh-progress-bar__fill {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--nmh-progress-color, #fff);
	transform-origin: left center;
	transform: scaleX(var(--nmh-progress-value, 0));
	will-change: transform;
}

.nmh-progress-fraction {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	color: var(--nmh-progress-fraction-color, #fff);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.nmh-progress-separator {
	color: var(--nmh-progress-separator-color, var(--nmh-progress-fraction-color, #fff));
	opacity: 0.8;
}

.nmh-progress--mode-fraction {
	justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
	.nmh-progress-bar__fill {
		will-change: auto;
	}
}

/* ------------------------------------------------------------------
 * 7. Sound toggle
 * ------------------------------------------------------------------ */
.nmh-sound-toggle-wrap {
	position: absolute;
	z-index: 7;
	pointer-events: none;
}

.nmh-sound-toggle-wrap[hidden] {
	display: none !important;
}

.nmh-hero .nmh-sound-toggle {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nmh-sound-size, 44px);
	height: var(--nmh-sound-size, 44px);
	padding: 0;
	margin: 0;
	border: none;
	border-color: transparent !important;
	border-radius: var(--nmh-sound-radius, 999px);
	background-color: var(--nmh-sound-bg, rgba(0, 0, 0, 0.55)) !important;
	color: var(--nmh-sound-color, #fff) !important;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s, color 0.2s, transform 0.15s, opacity 0.2s;
}

.nmh-hero .nmh-sound-toggle:hover {
	background-color: var(--nmh-sound-bg-hover, rgba(0, 0, 0, 0.72)) !important;
	color: var(--nmh-sound-color-hover, var(--nmh-sound-color, #fff)) !important;
}

.nmh-hero .nmh-sound-toggle:focus,
.nmh-hero .nmh-sound-toggle:active,
.nmh-hero .nmh-sound-toggle:focus-visible {
	background-color: var(--nmh-sound-bg, rgba(0, 0, 0, 0.55)) !important;
	color: var(--nmh-sound-color, #fff) !important;
}

.nmh-hero .nmh-sound-toggle:focus {
	outline: none;
}

.nmh-hero .nmh-sound-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.nmh-hero .nmh-sound-toggle:hover:focus,
.nmh-hero .nmh-sound-toggle:hover:active,
.nmh-hero .nmh-sound-toggle:hover:focus-visible {
	background-color: var(--nmh-sound-bg-hover, rgba(0, 0, 0, 0.72)) !important;
	color: var(--nmh-sound-color-hover, var(--nmh-sound-color, #fff)) !important;
}

.nmh-hero .nmh-sound-toggle svg,
.nmh-hero .nmh-sound-toggle svg * {
	color: inherit;
}

.nmh-sound-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.nmh-sound-icon[hidden] {
	display: none !important;
}

.nmh-sound-svg {
	width: var(--nmh-sound-icon-size, 22px);
	height: var(--nmh-sound-icon-size, 22px);
	display: block;
}

.nmh-sound-top-left {
	top: var(--nmh-sound-offset-y, 24px);
	left: var(--nmh-sound-offset-x, 24px);
}

.nmh-sound-top-center {
	top: var(--nmh-sound-offset-y, 24px);
	left: 50%;
	transform: translateX(-50%);
}

.nmh-sound-top-right {
	top: var(--nmh-sound-offset-y, 24px);
	right: var(--nmh-sound-offset-x, 24px);
}

.nmh-sound-center-left {
	top: 50%;
	left: var(--nmh-sound-offset-x, 24px);
	transform: translateY(-50%);
}

.nmh-sound-center-right {
	top: 50%;
	right: var(--nmh-sound-offset-x, 24px);
	transform: translateY(-50%);
}

.nmh-sound-bottom-left {
	bottom: var(--nmh-sound-offset-y, 24px);
	left: var(--nmh-sound-offset-x, 24px);
}

.nmh-sound-bottom-center {
	bottom: var(--nmh-sound-offset-y, 24px);
	left: 50%;
	transform: translateX(-50%);
}

.nmh-sound-bottom-right {
	bottom: var(--nmh-sound-offset-y, 24px);
	right: var(--nmh-sound-offset-x, 24px);
}

/* ------------------------------------------------------------------
 * 7b. Play / Pause
 * ------------------------------------------------------------------ */
.nmh-play-pause-wrap {
	position: absolute;
	z-index: 8;
	pointer-events: none;
	opacity: var(--nmh-play-opacity, 1);
}

.nmh-hero .nmh-play-pause {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nmh-play-size, 44px);
	height: var(--nmh-play-size, 44px);
	padding: 0;
	margin: 0;
	border: none;
	border-color: transparent !important;
	border-radius: var(--nmh-play-radius, 999px);
	background-color: var(--nmh-play-bg, rgba(0, 0, 0, 0.55)) !important;
	color: var(--nmh-play-color, #fff) !important;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s, color 0.2s, transform 0.15s, opacity 0.2s;
}

.nmh-hero .nmh-play-pause:hover {
	background-color: var(--nmh-play-bg-hover, rgba(0, 0, 0, 0.72)) !important;
	color: var(--nmh-play-color-hover, var(--nmh-play-color, #fff)) !important;
}

.nmh-hero .nmh-play-pause:focus,
.nmh-hero .nmh-play-pause:active,
.nmh-hero .nmh-play-pause:focus-visible {
	background-color: var(--nmh-play-bg, rgba(0, 0, 0, 0.55)) !important;
	color: var(--nmh-play-color, #fff) !important;
}

.nmh-hero .nmh-play-pause:focus {
	outline: none;
}

.nmh-hero .nmh-play-pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.nmh-hero .nmh-play-pause:hover:focus,
.nmh-hero .nmh-play-pause:hover:active,
.nmh-hero .nmh-play-pause:hover:focus-visible {
	background-color: var(--nmh-play-bg-hover, rgba(0, 0, 0, 0.72)) !important;
	color: var(--nmh-play-color-hover, var(--nmh-play-color, #fff)) !important;
}

.nmh-hero .nmh-play-pause svg,
.nmh-hero .nmh-play-pause svg * {
	color: inherit;
}

.nmh-play-pause-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.nmh-play-pause-icon[hidden] {
	display: none !important;
}

.nmh-play-pause-svg {
	width: var(--nmh-play-icon-size, 22px);
	height: var(--nmh-play-icon-size, 22px);
	display: block;
}

.nmh-play-pause-top-left {
	top: var(--nmh-play-offset-y, 24px);
	left: var(--nmh-play-offset-x, 24px);
}

.nmh-play-pause-top-center {
	top: var(--nmh-play-offset-y, 24px);
	left: 50%;
	transform: translateX(-50%);
}

.nmh-play-pause-top-right {
	top: var(--nmh-play-offset-y, 24px);
	right: var(--nmh-play-offset-x, 24px);
}

.nmh-play-pause-center-left {
	top: 50%;
	left: var(--nmh-play-offset-x, 24px);
	transform: translateY(-50%);
}

.nmh-play-pause-center-right {
	top: 50%;
	right: var(--nmh-play-offset-x, 24px);
	transform: translateY(-50%);
}

.nmh-play-pause-bottom-left {
	bottom: var(--nmh-play-offset-y, 24px);
	left: var(--nmh-play-offset-x, 24px);
}

.nmh-play-pause-bottom-center {
	bottom: var(--nmh-play-offset-y, 24px);
	left: 50%;
	transform: translateX(-50%);
}

.nmh-play-pause-bottom-right {
	bottom: var(--nmh-play-offset-y, 24px);
	right: var(--nmh-play-offset-x, 24px);
}

/* ------------------------------------------------------------------
 * 8. TV mode / blocked overlays / hide overlay
 * ------------------------------------------------------------------ */
.nmh-yt-play-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);
	pointer-events: auto;
}

.nmh-yt-play-btn {
	padding: 0.6em 1.2em;
	background: #fff;
	color: #1d2327;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	pointer-events: auto;
	transition: opacity 0.2s;
}

.nmh-yt-play-btn:hover {
	opacity: 0.9;
}

.nmh-hero[data-hide-overlay="1"] .nmh-overlay {
	display: none !important;
}

.nmh-tv-mode .nmh-youtube iframe {
	pointer-events: none !important;
}

.nmh-yt-blocked-message {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	color: #fff;
	font-size: 1rem;
}

/* ------------------------------------------------------------------
 * 9. Empty state
 * ------------------------------------------------------------------ */
.nmh-hero--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--nmh-min-height, 320px);
	height: var(--nmh-height, 70vh);
	background: #1d2327;
	color: #fff;
	box-sizing: border-box;
}

.nmh-empty-state {
	max-width: 28rem;
	padding: 2rem;
	text-align: center;
	box-sizing: border-box;
}

.nmh-empty-state__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.nmh-empty-state__text {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.8;
	line-height: 1.45;
}

/* ------------------------------------------------------------------
 * 10. Responsive polish
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.nmh-overlay {
		padding: 1.25rem;
	}

	.nmh-overlay-content {
		max-width: 100%;
	}

	.nmh-title {
		font-size: 1.5rem;
	}

	.nmh-arrow-prev {
		left: max(8px, var(--nmh-arrow-offset, 16px));
	}

	.nmh-arrow-next {
		right: max(8px, var(--nmh-arrow-offset, 16px));
	}

	.nmh-pagination {
		padding: 0 56px;
	}

	.nmh-sound-bottom-center,
	.nmh-sound-top-center {
		/* keep centered; offset still applies via CSS vars */
	}
}