/**
 * Video Testimonials — peek carousel + lightbox.
 *
 * Loads on top of Splide's own splide-core.css (registered by Mainsail
 * Core's Plugin::register_shared_carousel_assets()). Same font-family
 * convention as Featured Properties/Communities Equinox presentations:
 * only weight/size/spacing are set here, never font-family, so a
 * Customizer font change propagates automatically.
 */

.mainsail-vt {
	overflow: hidden;
	padding: clamp(60px, 5vw, 80px) 20px;
}

.mainsail-vt__inner {
	max-width: 1400px;
	margin: 0 auto;
}

/* ---- Heading ---- */

.mainsail-vt__head {
	margin-bottom: clamp(24px, 3vw, 40px);
	text-align: center;
}

.mainsail-vt__heading {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mainsail-vt__eyebrow {
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 1.96px;
	text-transform: uppercase;
}

.mainsail-vt__title {
	font-family: var(--global-heading-font-family, "Cormorant", serif);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
}

@media (min-width: 744px) {
	.mainsail-vt__title {
		font-size: 40px;
	}
}

@media (min-width: 1024px) {
	.mainsail-vt__title {
		font-size: 48px;
	}
}

/* ---- Carousel / cards ---- */

.mainsail-vt__carousel {
	position: relative;
	/* Clip peeking slides at THIS 1400px-capped container's edge, not the
	   full-bleed section's — otherwise the peek grows past ~10% (and the
	   crop moves) on viewports wider than the container. */
	overflow: hidden;
}

/* This 75%-of-.mainsail-vt__carousel width (rather than Splide's own
   `padding`/`fixedWidth`/`autoWidth` options — see script.js for why)
   is what actually produces the "one big centered slide, neighbors
   peeking at the edges" effect: Splide only ever sees a plain, full-
   width-of-its-own-container perPage:1 carousel and has no awareness
   that a peek is happening at all. Below 1024px it goes full-width —
   no peek on narrow screens. */
.mainsail-vt__splide {
	position: relative;
	width: 75%;
	margin: 0 auto;
	overflow: visible;
}

/* Decorative stand-ins for the missing DOM neighbor at the very first/
   last real slide (type:'slide' has no clones — see script.js). Same
   scale/positioning as a real peek neighbor, just toggled by JS
   instead of being a natural consequence of DOM adjacency. */
.mainsail-vt__peek-stub {
	position: absolute;
	top: 0;
	width: 100%;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.72);
	transition: opacity 0.3s ease;
}

.mainsail-vt__peek-stub.is-shown {
	opacity: 1;
	pointer-events: auto;
}

.mainsail-vt__peek-stub--start {
	right: calc(100% + 24px);
	transform-origin: right center;
}

.mainsail-vt__peek-stub--end {
	left: calc(100% + 24px);
	transform-origin: left center;
}

@media (max-width: 1023px) {
	.mainsail-vt__peek-stub {
		display: none;
	}
}

@media (max-width: 1023px) {
	.mainsail-vt__splide {
		width: 100%;
	}
}

.mainsail-vt__splide .splide__track {
	overflow: visible;
}

.mainsail-vt__splide .splide__slide {
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.mainsail-vt__card {
	position: relative;
	display: block;
	cursor: pointer;
}

.mainsail-vt__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #111;
}

.mainsail-vt__splide .splide__slide.mainsail-vt__slide--focused .mainsail-vt__media {
	box-shadow: -15px 20px 48px -11px rgba(0, 0, 0, 0.5);
}

/* Hover overlay — a bottom-weighted black gradient (transparent at top,
   ~70% black at the bottom), shown only on hover/focus. */
.mainsail-vt__media::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 80%;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 1;
}

.mainsail-vt__card:hover .mainsail-vt__media::before,
.mainsail-vt__card:focus-visible .mainsail-vt__media::before {
	opacity: 1;
}

.mainsail-vt__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Play button — same circular chrome as the nav arrows below (black
   border/icon, same size), but with a transparent fill instead of
   white so the poster image shows through it (the fill override lives
   further down, after the shared .mainsail-vt__play, .mainsail-vt__arrow
   rule it needs to beat). */
.mainsail-vt__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: auto;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.mainsail-vt__play svg {
	display: block;
}

.mainsail-vt__name {
	display: block;
	margin-top: 20px;
	text-align: center;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 1.96px;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Peek effect — the focused/center slide sits at full scale with its
   play button and name visible; the prev/next slides are only scaled
   down (kept at full color/opacity, not dimmed), and scaled from the
   edge closest to the focused slide (not their own center) so the
   shrunk image pulls in snug against it rather than shrinking in
   place, matching the reference. Cropped to a sliver by this section's
   own overflow:hidden.

   Keyed off .mainsail-vt__slide--focused (assigned in script.js the
   instant a move is requested), not Splide's own .is-active (which it
   only assigns once a move finishes) — otherwise this scale/opacity
   transition doesn't even start until the position slide is already
   done, reading as two separate, jerky steps instead of one motion. */
.mainsail-vt__splide .splide__slide:not(.mainsail-vt__slide--focused) {
	transform: scale(0.72);
}

/* .mainsail-vt__slide--peek-prev/--peek-next (set in script.js from
   plain DOM adjacency to the focused slide), not Splide's own .is-prev/
   .is-next: those reflect the numeric direction Splide thinks a move
   travelled, which is wrong immediately after one of our manual wrap
   jumps — see script.js's setFocusedSlide comment. */
.mainsail-vt__splide .splide__slide.mainsail-vt__slide--peek-prev {
	transform-origin: right center;
}

.mainsail-vt__splide .splide__slide.mainsail-vt__slide--peek-next {
	transform-origin: left center;
}

.mainsail-vt__splide .splide__slide.mainsail-vt__slide--focused .mainsail-vt__play,
.mainsail-vt__splide .splide__slide.mainsail-vt__slide--focused .mainsail-vt__name {
	opacity: 1;
}

.mainsail-vt__card:hover .mainsail-vt__play,
.mainsail-vt__card:focus-visible .mainsail-vt__play {
	opacity: 1;
}

/* ---- Prev/Next — a normal-flow row below the cards (not overlaid on
   top of them), horizontally padded to line up with the active card's
   own edges (100% - 75% slide width = 25%, split evenly). ---- */

.mainsail-vt__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 32px;
	padding: 0 12.5%;
}

/* Shared circular chrome for the play button and both nav arrows — one
   family of controls, same size (56px base scaled 1.3x = ~73px). */
.mainsail-vt__play,
.mainsail-vt__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 73px;
	height: 73px;
	border-radius: 50%;
	border: 1px solid #000;
	background: #fff;
	color: #000;
	padding: 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.mainsail-vt__play {
	background: transparent;
	/* White border/icon in both states — unlike the arrows, the play
	   button has no separate hover/focus invert to fight (its only
	   other state is the card-hover opacity reveal), so one rule covers
	   "normal and hover both". */
	border-color: #fff;
	color: #fff;
}

.mainsail-vt__arrow {
	cursor: pointer;
	outline: none;
}

/* Not a real ":visited" state — buttons don't have one. Kadence (the
   locked parent theme) applies its own blue background-color to every
   <button>'s plain :focus state globally; since this IS a real <button>,
   that rule reaches it and otherwise wins because we had nothing of our
   own targeting plain :focus to compete with it (only :hover/
   :focus-visible below). Reset back to the idle colors here so it
   doesn't leak through on click; :focus-visible below still applies its
   own invert on top for keyboard focus, since it's a strict subset of
   :focus and comes later in source order. */
.mainsail-vt__arrow:focus {
	background-color: #fff;
	color: #000;
}

.mainsail-vt__arrow:hover,
.mainsail-vt__arrow:focus-visible {
	background-color: #000;
	color: #fff;
}

/* ---- Lightbox ----
   A native <dialog> (opened via .showModal()) rather than a plain div —
   its Escape-to-close ("cancel") handling is done by the browser's own
   input pipeline, not a JS keydown listener, so it still works when
   focus is inside a cross-origin YouTube/Vimeo <iframe>, which a
   document-level keydown listener can never observe. Resets dialog's
   UA-stylesheet border/padding/background/sizing since this is fully
   custom-positioned. */

.mainsail-vt__lightbox {
	border: 0;
	padding: 0;
	max-width: none;
	max-height: none;
	background: transparent;
	color: inherit;
}

.mainsail-vt__lightbox[open] {
	position: fixed;
	inset: 0;
	/* dialog's UA stylesheet sets width/height: fit-content, not auto — so
	   without this, inset:0 only anchors a tiny content-sized box at the
	   top-left instead of stretching it to cover the viewport. */
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mainsail-vt__lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.mainsail-vt__lightbox-panel {
	position: relative;
	z-index: 1;
	width: min(1100px, 92vw);
}

.mainsail-vt__lightbox-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.mainsail-vt__lightbox-media video,
.mainsail-vt__lightbox-media iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Inside the panel's own bounds (top-right corner of the video, not
   floating above it) — positioning it above the panel via a negative
   top offset put it outside the lightbox's visible area entirely on
   shorter viewports: the panel is vertically centered, so on a browser
   window not tall enough to leave ~84px of headroom above it, the
   button rendered at a negative y position, invisible and unreachable.
   Confirmed live at 1440x650 (a realistic laptop browser height): the
   old position measured at y:-32px. A dark, semi-transparent circular
   background keeps the white icon visible against any video content
   behind it, now that it overlaps the video instead of sitting in the
   backdrop above. */
.mainsail-vt__lightbox-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	/* Kadence (the locked parent theme) gives every real <button> 18px of
	   left/right padding by default — never reset here before. With
	   width fixed at 36px, that consumed the button's entire horizontal
	   space, squeezing the SVG icon down to computed width:0 (confirmed
	   live: 0px width, 22px height — the padding ate the row-axis space
	   a flex child needs, while the column axis stayed unaffected). The
	   button was never actually invisible; its icon was. */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	outline: none;
}

/* Kadence (the locked parent theme) applies its own blue background to
   every real <button>'s plain :focus state globally (same root cause
   already found and fixed for the nav arrows) — this button is
   autofocused by the browser the instant the lightbox opens (native
   <dialog> default behavior), so without this reset it shows that blue
   background, with Kadence's own square corners, right away instead of
   the dark circular one. */
.mainsail-vt__lightbox-close:focus {
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

body.mainsail-vt-lightbox-open {
	overflow: hidden;
}

/* Below 1023px, .mainsail-vt__splide goes full-width (see above) — no
   peek, so the nav row's edge-alignment padding isn't needed either,
   just its own tightened-up spacing. */
@media (max-width: 1023px) {
	.mainsail-vt__nav {
		padding: 0 clamp(12px, 4vw, 60px);
	}
}

@media (max-width: 640px) {
	.mainsail-vt__nav {
		margin-top: 24px;
		padding: 0 8px;
	}

	.mainsail-vt__play,
	.mainsail-vt__arrow {
		width: 57px;
		height: 57px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-vt__splide .splide__slide,
	.mainsail-vt__play,
	.mainsail-vt__name,
	.mainsail-vt__arrow {
		transition: none;
	}
}