/* 1B.7E: hero image scale + stage buttons + video modal. */

.yepx-hero-media-stage {
	--yepx-media-scale: 100;
	--yepx-media-scale-m: 100;
}

.yepx-hero-media-stage > .yepx-hero-photo,
.yepx-hero-media-stage > .yepx-hero__device {
	width: calc(var(--yepx-media-scale, 100) * 1%);
	max-width: 100%;
	margin-inline: auto;
}

.yepx-hero-media-stage[style*="--yepx-media-width:"] > .yepx-hero-photo {
	max-width: var(--yepx-media-width, 100%);
}

.yepx-slider__media-scale {
	width: 100%;
}

.yepx-hero .yepx-slider__eyebrow {
	text-transform: none;
	letter-spacing: 0;
}

.yepx-hero .yepx-hero-yt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.yepx-hero .yepx-hero-yt-btn .yepx-icon,
.yepx-hero .yepx-hero-yt-btn .yepx-icon--play,
.yepx-hero .yepx-btn__icon .yepx-icon,
.yepx-hero .yepx-btn__icon .yepx-icon--play {
	width: 0.85em;
	height: 0.85em;
	flex: 0 0 auto;
	fill: currentColor;
	stroke: none;
}

.yepx-hero .yepx-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 1.55em;
	height: 1.55em;
	border-radius: 50%;
	background: var(--yepx-btn-icon-bg, rgba(255, 255, 255, 0.22));
	flex: 0 0 auto;
	line-height: 0;
}

.yepx-hero .yepx-btn--secondary {
	background: #e8f4f8;
	color: #0b2c3d;
	border: 1px solid #b7d3de;
}

.yepx-hero .yepx-hero-stage-btn,
.yepx-hero .yepx-hero-textblock {
	position: absolute;
	left: calc(var(--yepx-float-x, 50) * 1%);
	top: calc(var(--yepx-float-y, 80) * 1%);
	z-index: 3;
	pointer-events: auto;
}

.yepx-hero .yepx-hero-textblock {
	max-width: 42%;
	padding: 0.35rem 0.5rem;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 10px;
	font-size: 0.875rem;
	color: #0b2c3d;
}

.yepx-hero .yepx-hero-stage-btn[data-vis="desktop_only"],
.yepx-hero .yepx-hero-textblock[data-vis="desktop_only"] {
	display: inline-flex;
}

.yepx-hero .yepx-hero-stage-btn[data-vis="mobile_only"],
.yepx-hero .yepx-hero-textblock[data-vis="mobile_only"] {
	display: none;
}

.yepx-hero-modal[hidden]:not(.is-closing) {
	display: none !important;
}

.yepx-hero-modal:not([hidden]) {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	min-height: 100svh;
	z-index: var(--yepx-z-modal, 10050);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	isolation: isolate;
	overflow: visible;
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.yepx-hero-modal__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(8, 16, 24, 0.72);
}

.yepx-hero-modal__dialog {
	position: relative;
	z-index: 1;
	overflow: visible;
	pointer-events: auto;
}

.yepx-hero-modal__panel {
	position: relative;
	width: min(1040px, calc(100vw - 2rem));
	max-width: 1100px;
	background: #0b1c24;
	border-radius: 20px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
	pointer-events: auto;
}

.yepx-hero-modal__close {
	position: absolute;
	top: -12px;
	right: -12px;
	z-index: 3;
	min-height: 44px;
	min-width: 44px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #0b2c3d;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	pointer-events: auto;
}

.yepx-hero-modal__close:focus-visible {
	outline: 3px solid var(--yepx-color-focus);
	outline-offset: 3px;
}

.yepx-hero-modal__video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 72vh;
	background: #000;
}

.yepx-hero-modal__video[hidden] {
	display: none !important;
}

.yepx-hero-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.yepx-hero-modal__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.yepx-hero-modal:not(.is-yepx-yt) .yepx-hero-modal__frame:empty {
	display: none;
}

html.is-yepx-modal,
body.is-yepx-modal {
	overflow: hidden;
}

@media (max-width: 767px) {
	.yepx-hero-media-stage > .yepx-hero-photo,
	.yepx-hero-media-stage > .yepx-hero__device {
		width: calc(var(--yepx-media-scale-m, var(--yepx-media-scale, 100)) * 1%);
		border-radius: var(--yepx-media-radius-m, var(--yepx-media-radius));
	}

	.yepx-hero .yepx-hero-stage-btn,
	.yepx-hero .yepx-hero-textblock {
		left: calc(var(--yepx-float-mx, var(--yepx-float-x, 50)) * 1%);
		top: calc(var(--yepx-float-my, var(--yepx-float-y, 80)) * 1%);
	}

	.yepx-hero .yepx-hero-stage-btn[data-vis="desktop_only"],
	.yepx-hero .yepx-hero-textblock[data-vis="desktop_only"] {
		display: none !important;
	}

	.yepx-hero .yepx-hero-stage-btn[data-vis="mobile_only"],
	.yepx-hero .yepx-hero-textblock[data-vis="mobile_only"],
	.yepx-hero .yepx-hero-stage-btn[data-vis="both"],
	.yepx-hero .yepx-hero-textblock[data-vis="both"] {
		display: inline-flex !important;
	}

	.yepx-hero .yepx-hero-textblock[data-vis="mobile_only"],
	.yepx-hero .yepx-hero-textblock[data-vis="both"] {
		display: block !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yepx-hero-modal__panel {
		transition: none;
	}
}