/**
 * dp Wistia video — click-to-load facade, inline player, shared modal
 */

.dp-wistia-video {
	--dp-wistia-accent: var(--dp-color-gold-primary, #c89a2b);
	--dp-wistia-navy: var(--dp-color-navy-deep, #0b2748);
	--dp-wistia-placeholder: var(--dp-color-video-placeholder, #736147);
	--dp-wistia-aspect-w: 16;
	--dp-wistia-aspect-h: 9;
	margin-block: var(--dp-gap-content-sm, 1rem);
}

.dp-wistia-video:not(.dp-wistia-video--editor-preview) {
	max-width: 56rem;
}

.dp-wistia-video--empty {
	align-items: center;
	aspect-ratio: var(--dp-wistia-aspect-w) / var(--dp-wistia-aspect-h);
	background: var(--dp-wistia-placeholder);
	border-radius: var(--dp-radius-sm, 0.25rem);
	color: var(--dp-color-white, #fff);
	display: flex;
	justify-content: center;
	padding: 1.5rem;
	text-align: center;
}

.dp-wistia-video__stage {
	aspect-ratio: var(--dp-wistia-aspect-w) / var(--dp-wistia-aspect-h);
	position: relative;
}

.dp-wistia-video__facade {
	background: var(--dp-wistia-placeholder);
	border-radius: var(--dp-radius-sm, 0.25rem);
	height: 100%;
	inset: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 2;
}

.dp-wistia-video.is-inline-ready .dp-wistia-video__facade {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.dp-wistia-video.is-loading .dp-wistia-video__play {
	opacity: 0;
	pointer-events: none;
}

.dp-wistia-video.is-loading .dp-wistia-video__spinner {
	opacity: 1;
}

.dp-wistia-video__spinner {
	border: 3px solid rgb(255 255 255 / 35%);
	border-radius: 50%;
	border-top-color: var(--dp-color-white, #fff);
	height: 2.75rem;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 2.75rem;
	z-index: 3;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-wistia-video__spinner {
		animation: dp-wistia-spin 0.75s linear infinite;
	}
}

@keyframes dp-wistia-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.dp-wistia-video__poster {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.dp-wistia-video__poster--placeholder {
	background: linear-gradient(
		145deg,
		var(--dp-wistia-placeholder) 0%,
		var(--dp-wistia-navy) 100%
	);
	height: 100%;
	width: 100%;
}

.dp-wistia-video__play {
	align-items: center;
	background: rgb(4 24 47 / 55%);
	border: 0;
	border-radius: 999px;
	color: var(--dp-color-white, #fff);
	cursor: pointer;
	display: inline-flex;
	height: 4.5rem;
	justify-content: center;
	left: 50%;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 4.5rem;
}

.dp-wistia-video__play:hover,
.dp-wistia-video__play:focus-visible {
	background: rgb(4 24 47 / 72%);
	outline: 3px solid var(--dp-wistia-accent);
	outline-offset: 3px;
}

.dp-wistia-video__play-icon {
	border-color: transparent transparent transparent var(--dp-color-white, #fff);
	border-style: solid;
	border-width: 0.85rem 0 0.85rem 1.35rem;
	height: 0;
	margin-inline-start: 0.2rem;
	width: 0;
}

.dp-wistia-video__duration {
	background: rgb(4 24 47 / 78%);
	border-radius: 0.25rem;
	bottom: 0.75rem;
	color: var(--dp-color-white, #fff);
	font-family: var(--dp-font-ui, ui-sans-serif, system-ui, sans-serif);
	font-size: var(--dp-text-body-sm, 0.875rem);
	font-weight: 600;
	line-height: 1;
	padding: 0.35rem 0.55rem;
	position: absolute;
	right: 0.75rem;
}

.dp-wistia-video__title {
	font-family: var(--dp-font-ui, ui-sans-serif, system-ui, sans-serif);
	font-size: var(--dp-text-body-lg, 1.125rem);
	font-weight: 700;
	line-height: 1.35;
	margin-block: 0.75rem 0;
}

.dp-wistia-video__player {
	border-radius: var(--dp-radius-sm, 0.25rem);
	height: 100%;
	inset: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.dp-wistia-video__player .wistia_embed {
	height: 100% !important;
	width: 100% !important;
}

.dp-wistia-video-dialog__player .wistia_embed,
.dp-wistia-video-dialog__player .wistia_embed > div,
.dp-wistia-video-dialog__player iframe {
	display: block;
	max-width: 100% !important;
	width: 100% !important;
}

html:has(.dp-wistia-video-dialog.is-open),
body.dp-wistia-video-open {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

.dp-wistia-video-dialog {
	border: 0;
	inset: 0;
	margin: 0;
	max-width: none;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	position: fixed;
	width: 100%;
	z-index: 100010;
	--dp-wistia-aspect-w: 16;
	--dp-wistia-aspect-h: 9;
	--dp-wistia-modal-max-height: 85dvh;
}

.dp-wistia-video-dialog[hidden] {
	display: none;
}

.dp-wistia-video-dialog.is-open {
	pointer-events: auto;
}

.dp-wistia-video-dialog.has-modal-title {
	--dp-wistia-modal-max-height: calc(85dvh - 4.5rem);
}

.dp-wistia-video-dialog__backdrop {
	background: rgb(4 24 47 / 72%);
	inset: 0;
	position: absolute;
}

.dp-wistia-video-dialog__panel {
	align-items: center;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0;
	left: 50%;
	max-height: min(92dvh, 56rem);
	max-width: min(56rem, calc(100vw - 2rem));
	overflow: visible;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
}

.dp-wistia-video-dialog.has-modal-title .dp-wistia-video-dialog__panel {
	gap: 0.75rem;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-wistia-video-dialog.is-open .dp-wistia-video-dialog__panel {
		animation: dp-wistia-dialog-in 0.22s ease;
	}
}

@keyframes dp-wistia-dialog-in {
	from {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 0.75rem));
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

.dp-wistia-video-dialog__frame {
	max-width: min(56rem, calc(100vw - 2rem));
	position: relative;
	width: fit-content;
}

.dp-wistia-video-dialog__close {
	background: var(--dp-wistia-navy, #0b2748);
	border: 2px solid rgb(255 255 255 / 85%);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgb(4 24 47 / 45%);
	color: var(--dp-color-white, #fff);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	transform: none;
	z-index: 3;
}

.dp-wistia-video-dialog__close > span {
	display: block;
	font-weight: 700;
	line-height: 1;
	margin-top: -0.05em;
}

.dp-wistia-video-dialog__close:hover,
.dp-wistia-video-dialog__close:focus-visible {
	background: var(--dp-color-navy-deep, #0b2748);
	color: var(--dp-color-gold-bright, #ebc45e);
	outline: 2px solid var(--dp-color-gold-bright, #ebc45e);
	outline-offset: 2px;
}

.dp-wistia-video-dialog__header {
	color: var(--dp-color-white, #fff);
	text-align: center;
}

.dp-wistia-video-dialog:not(.has-modal-title) .dp-wistia-video-dialog__header {
	display: none !important;
	height: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	visibility: hidden;
}

.dp-wistia-video-dialog__title {
	color: inherit;
	font-family: var(--dp-font-ui, ui-sans-serif, system-ui, sans-serif);
	font-size: clamp(1.15rem, 2.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	text-shadow: 0 1px 12px rgb(4 24 47 / 65%);
}

.dp-wistia-video-dialog__meta {
	color: rgb(255 255 255 / 88%);
	font-size: var(--dp-text-body-sm, 0.875rem);
	margin: 0.35rem 0 0;
	text-shadow: 0 1px 8px rgb(4 24 47 / 55%);
}

.dp-wistia-video-dialog__meta:empty {
	display: none;
}

.dp-wistia-video-dialog__player {
	background: #000;
	border-radius: var(--dp-radius-sm, 0.25rem);
	box-shadow: 0 24px 48px rgb(4 24 47 / 35%);
	box-sizing: border-box;
	margin-inline: auto;
	max-width: min(56rem, calc(100vw - 2rem));
	overflow: hidden;
	position: relative;
	width: min(
		min(56rem, calc(100vw - 2rem)),
		calc(
			var(--dp-wistia-modal-max-height) * var(--dp-wistia-aspect-w) /
				var(--dp-wistia-aspect-h)
		)
	);
}

.dp-wistia-video-dialog__player.is-loading {
	aspect-ratio: var(--dp-wistia-aspect-w) / var(--dp-wistia-aspect-h);
	height: auto;
	max-height: var(--dp-wistia-modal-max-height);
}

.dp-wistia-video-dialog__player:not(.is-loading) {
	aspect-ratio: unset;
	height: auto;
	max-height: none;
}

.dp-wistia-video-dialog__player.is-loading::after {
	border: 3px solid rgb(255 255 255 / 35%);
	border-radius: 50%;
	border-top-color: var(--dp-color-white, #fff);
	content: "";
	height: 2.75rem;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 2.75rem;
	z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-wistia-video-dialog__player.is-loading::after {
		animation: dp-wistia-dialog-spin 0.75s linear infinite;
	}
}

@keyframes dp-wistia-dialog-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.dp-wistia-video-dialog__description {
	color: var(--dp-color-body, #59616b);
	font-size: var(--dp-text-body-md, 1rem);
	line-height: var(--dp-line-height-body, 1.7);
	max-height: 12rem;
	overflow-y: auto;
}

.dp-wistia-video-dialog__description:empty {
	display: none;
}