/**
 * Tour video — play card, text link, player window and inline player.
 * Loaded on the homepage and the /tour page (functions.php).
 * Layout is flexbox only; colours from site-tokens.css; type in rem.
 *
 * @package MLS_Genie
 * @since   2.0.591
 */

/* ── Play card (poster + play button) ─────────────────────────────────────── */
.mlsg-hero-tour {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%
}

/* The phone copy sits inside the hero text; the side copy beside it. */
.mlsg-hero-tour--inline {
	display: none
}

.mlsg-tour-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 1px solid var(--site-white-alpha-12);
	border-radius: 16px;
	overflow: hidden;
	background: var(--site-navy-deep);
	box-shadow: 0 30px 80px var(--site-black-alpha-40);
	cursor: pointer;
	font-family: var(--site-font)
}

.mlsg-tour-card__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease
}

.mlsg-tour-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, var(--site-black-alpha-40) 100%)
}

.mlsg-tour-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background: var(--site-teal);
	color: var(--site-white);
	font-size: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 10px var(--site-teal-alpha-25), 0 16px 40px var(--site-black-alpha-40);
	transition: transform .2s ease
}

.mlsg-tour-card__play i {
	margin-left: 4px
}

.mlsg-tour-card__label {
	position: absolute;
	left: 20px;
	bottom: 16px;
	color: var(--site-white);
	font-size: 1.0625rem;
	font-weight: 700
}

.mlsg-tour-card__time {
	position: absolute;
	right: 16px;
	bottom: 14px;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--site-black-alpha-40);
	color: var(--site-white);
	font-size: .875rem;
	font-weight: 700
}

.mlsg-tour-card:hover .mlsg-tour-card__poster {
	transform: scale(1.03)
}

.mlsg-tour-card:hover .mlsg-tour-card__play {
	transform: scale(1.06)
}

.mlsg-tour-card:focus-visible {
	outline: 3px solid var(--site-sky-70);
	outline-offset: 4px
}

.mlsg-tour-card__meta {
	margin: 0;
	font-size: .9375rem;
	color: var(--site-text-on-dark)
}

/* ── Homepage hero: a wider video beside the text (flex) ───────────────────── */
.hero-inner.hero-inner--tour {
	display: flex;
	align-items: center;
	gap: 56px
}

.hero-inner--tour > .hero-content {
	flex: 1 1 0;
	min-width: 0
}

.hero-inner--tour > .mlsg-hero-tour--side {
	flex: 0 1 46%;
	max-width: 720px
}

@media (max-width: 1024px) {
	.hero-inner.hero-inner--tour {
		flex-direction: column;
		align-items: stretch;
		gap: 40px
	}
	.hero-inner--tour > .mlsg-hero-tour--side {
		flex: 0 0 auto;
		max-width: 640px
	}
}

/* ── "Watch the tour" text button in the hero ─────────────────────────────── */
.mlsg-tour-link {
	flex-basis: 100%;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--site-white);
	font-family: var(--site-font);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	align-self: flex-start
}

.mlsg-tour-link__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--site-white-alpha-35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .75rem
}

.mlsg-tour-link__icon i {
	margin-left: 2px
}

.mlsg-tour-link:hover .mlsg-tour-link__icon {
	background: var(--site-teal);
	border-color: var(--site-teal)
}

.mlsg-tour-link:focus-visible {
	outline: 3px solid var(--site-sky-70);
	outline-offset: 4px;
	border-radius: 999px
}

/* ── Player window (native <dialog>) ──────────────────────────────────────── */
.mlsg-video-dialog {
	margin: auto; /* the theme's reset removes the dialog's own centring */
	border: 0;
	padding: 0;
	background: transparent;
	width: min(1080px, 94vw);
	max-height: 94vh;
	overflow: visible;
	color: var(--site-white)
}

.mlsg-video-dialog::backdrop {
	background: color-mix(in srgb, var(--site-navy-deep) 88%, transparent)
}

.mlsg-video-dialog__inner {
	display: flex;
	flex-direction: column;
	gap: 18px
}

.mlsg-video-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px
}

.mlsg-video-dialog__title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--site-white)
}

.mlsg-video-dialog__close {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--site-white-alpha-35);
	background: transparent;
	color: var(--site-white);
	font-size: 1.125rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center
}

.mlsg-video-dialog__close:hover {
	background: var(--site-white-alpha-10)
}

.mlsg-video-dialog__close:focus-visible {
	outline: 3px solid var(--site-sky-70);
	outline-offset: 2px
}

.mlsg-video-dialog__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap
}

.mlsg-video-dialog__text {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--site-slate-65)
}

.mlsg-video-dialog__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap
}

.mlsg-video-dialog__link {
	font-size: 1rem;
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center
}

/* ── The video itself (window and /tour page) ─────────────────────────────── */
.mlsg-video-frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: var(--site-black);
	box-shadow: 0 40px 120px var(--site-black-alpha-40)
}

.mlsg-video-frame.has-start {
	position: relative
}

/* One-tap start on the /tour page: plays (full-screen on phones). */
.mlsg-video-start {
	display: none;
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer
}

.mlsg-video-start:hover .mlsg-tour-card__play {
	transform: scale(1.06)
}

.mlsg-video-start:focus-visible {
	outline: 3px solid var(--site-sky-70);
	outline-offset: -6px;
	border-radius: 16px
}

.mlsg-video-frame.has-start .mlsg-video-start {
	display: block
}

.mlsg-video-frame.is-started .mlsg-video-start {
	display: none
}

.mlsg-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--site-black)
}

/* ── Phones: the play card moves into the hero text ───────────────────────── */
@media (max-width: 768px) {
	.mlsg-hero-tour--inline {
		display: flex;
		margin: 4px 0 24px
	}
	.mlsg-hero-tour--side,
	.mlsg-tour-link {
		display: none
	}
	.mlsg-tour-card {
		border-radius: 12px
	}
	.mlsg-tour-card__play {
		width: 64px;
		height: 64px;
		margin: -32px 0 0 -32px;
		font-size: 1.375rem
	}
	.mlsg-video-dialog__title {
		font-size: 1.125rem
	}
	.mlsg-video-frame {
		border-radius: 10px
	}
}

/* Phones: the window fills the screen — just the video and a close button
   that always sits top right. Must match the phone query in mlsgenie-video.js. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
	.mlsg-video-dialog {
		width: 100vw;
		height: 100dvh;
		max-width: none;
		max-height: none;
		margin: 0;
		background: var(--site-black)
	}
	.mlsg-video-dialog::backdrop {
		background: var(--site-black)
	}
	.mlsg-video-dialog__inner {
		height: 100%;
		gap: 0
	}
	.mlsg-video-dialog__title,
	.mlsg-video-dialog__foot {
		display: none
	}
	.mlsg-video-dialog__head {
		position: absolute;
		top: max(12px, env(safe-area-inset-top));
		right: max(12px, env(safe-area-inset-right));
		z-index: 2
	}
	.mlsg-video-dialog__close {
		background: var(--site-black-alpha-40);
		border-color: var(--site-white-alpha-35)
	}
	.mlsg-video-dialog .mlsg-video-frame {
		flex: 1 1 auto;
		min-height: 0;
		aspect-ratio: auto;
		border-radius: 0;
		box-shadow: none
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlsg-tour-card__poster,
	.mlsg-tour-card__play {
		transition: none
	}
	.mlsg-tour-card:hover .mlsg-tour-card__poster,
	.mlsg-tour-card:hover .mlsg-tour-card__play {
		transform: none
	}
}