/* 1B.7H slider device layers + fit + modal motion. Header/nav 1b7d untouched. */

.yepx-hero {
	--yepx-slider-bp: 768;
	--yepx-slider-tmax: 1024;
	--yepx-modal-ms: 240ms;
}

.yepx-hero-media-stage > .yepx-hero-photo,
.yepx-hero-media-stage > .yepx-hero__device,
.yepx-hero-media-stage .yepx-slider__img {
	object-fit: var(--yepx-media-fit, cover);
	object-position: var(--yepx-media-object-pos, var(--yepx-media-x, 50%) var(--yepx-media-y, 50%));
}

.yepx-hero-media-stage[data-orient="landscape"] > .yepx-hero-photo,
.yepx-hero-media-stage > .yepx-hero-photo[data-orient="landscape"],
.yepx-slider__media-scale[data-orient="landscape"] {
	aspect-ratio: 16 / 9;
}

.yepx-hero-media-stage[data-orient="portrait"] > .yepx-hero-photo,
.yepx-hero-media-stage > .yepx-hero-photo[data-orient="portrait"],
.yepx-slider__media-scale[data-orient="portrait"] {
	aspect-ratio: 3 / 4;
}

.yepx-slider__copy--tab {
	display: none;
}

.yepx-hero .yepx-float-card[data-vis="tablet_only"],
.yepx-hero .yepx-hero-stage-btn[data-vis="tablet"],
.yepx-hero .yepx-hero-textblock[data-vis="tablet"],
.yepx-hero .yepx-float-card[data-vis="tablet-only"] {
	display: none;
}

@media (max-width: 1024px) and (min-width: 769px) {
	.yepx-hero-media-stage > .yepx-hero-photo,
	.yepx-hero-media-stage > .yepx-hero__device {
		width: calc(var(--yepx-media-scale-t, var(--yepx-media-scale, 100)) * 1%);
	}

	.yepx-hero-media-stage .yepx-slider__img,
	.yepx-hero-media-stage > .yepx-hero__device img {
		object-fit: var(--yepx-media-fit-t, var(--yepx-media-fit, cover));
		object-position: var(--yepx-media-object-pos-t, var(--yepx-media-x-t, var(--yepx-media-x, 50%)) var(--yepx-media-y-t, var(--yepx-media-y, 50%)));
		transform: scale(calc(var(--yepx-media-scale-t, var(--yepx-media-scale, 100)) / 100));
	}

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

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

	.yepx-hero .yepx-float-card[data-vis="tablet_only"],
	.yepx-hero .yepx-float-card[data-vis="desktop_tablet"],
	.yepx-hero .yepx-float-card[data-vis="tablet_mobile"],
	.yepx-hero .yepx-float-card[data-vis="both"],
	.yepx-hero .yepx-hero-stage-btn[data-vis="tablet"],
	.yepx-hero .yepx-hero-stage-btn[data-vis="desktop_tablet"],
	.yepx-hero .yepx-hero-stage-btn[data-vis="tablet_mobile"],
	.yepx-hero .yepx-hero-stage-btn[data-vis="both"] {
		display: flex;
	}
}

@media (max-width: 768px) {
	.yepx-hero-media-stage:not([data-orient-m="portrait"]) {
		aspect-ratio: 1200 / 675;
	}

	.yepx-hero-media-stage[data-orient-m="portrait"] {
		aspect-ratio: 3 / 4;
	}

	.yepx-hero-media-stage .yepx-slider__img,
	.yepx-hero-media-stage > .yepx-hero__device img {
		object-fit: var(--yepx-media-fit-m, cover);
		object-position: var(--yepx-media-object-pos-m, var(--yepx-media-x-m, 50%) var(--yepx-media-y-m, 50%));
	}

	.yepx-hero .yepx-float-card[data-vis="tablet_only"],
	.yepx-hero .yepx-float-card[data-vis="desktop_tablet"],
	.yepx-hero .yepx-hero-stage-btn[data-vis="tablet"],
	.yepx-hero .yepx-hero-stage-btn[data-vis="desktop_tablet"] {
		display: none !important;
	}
}

/* Modal open/close. No page loader. */
.yepx-hero-modal,
.yepx-lead-modal {
	transition: visibility var(--yepx-modal-ms, 240ms) ease, opacity var(--yepx-modal-ms, 240ms) ease;
}

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

.yepx-hero-modal.is-closing,
.yepx-lead-modal.is-closing {
	display: flex !important;
	visibility: visible;
	opacity: 0;
	pointer-events: none;
}

.yepx-lead-modal.is-closing {
	display: grid !important;
}

.yepx-hero-modal:not([hidden]) .yepx-hero-modal__backdrop,
.yepx-lead-modal:not([hidden]) .yepx-lead-modal__backdrop {
	opacity: 1;
	transition: opacity var(--yepx-modal-ms, 240ms) ease;
}

.yepx-hero-modal.is-closing .yepx-hero-modal__backdrop,
.yepx-lead-modal.is-closing .yepx-lead-modal__backdrop {
	opacity: 0;
}

.yepx-hero-modal:not([hidden]) .yepx-hero-modal__dialog,
.yepx-lead-modal:not([hidden]) .yepx-lead-modal__dialog {
	transform: scale(1) translateY(0);
	opacity: 1;
	transition: transform var(--yepx-modal-ms, 240ms) ease, opacity var(--yepx-modal-ms, 240ms) ease;
}

.yepx-hero-modal:not([hidden]):not(.is-open) .yepx-hero-modal__dialog,
.yepx-lead-modal:not([hidden]):not(.is-open) .yepx-lead-modal__dialog,
.yepx-hero-modal.is-closing .yepx-hero-modal__dialog,
.yepx-lead-modal.is-closing .yepx-lead-modal__dialog {
	transform: scale(0.96) translateY(10px);
	opacity: 0;
}

.yepx-hero-modal.is-open .yepx-hero-modal__dialog,
.yepx-lead-modal.is-open .yepx-lead-modal__dialog {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.yepx-hero-modal:not([hidden]),
.yepx-lead-modal:not([hidden]) {
	z-index: var(--yepx-z-modal, 10050);
}

@media (prefers-reduced-motion: reduce) {
	.yepx-hero-modal,
	.yepx-lead-modal,
	.yepx-hero-modal__backdrop,
	.yepx-lead-modal__backdrop,
	.yepx-hero-modal__dialog,
	.yepx-lead-modal__dialog,
	.yepx-hero-modal__panel,
	.yepx-lead-modal__panel {
		transition: none !important;
	}
}