/*
 * CaryTamura Virtual Staging page (/virtual-staging/, Page 5663).
 *
 * SCOPE. Loaded on this page only (functions.php, is_page()), after
 * page-hero.css. It tunes the page's CT Page Hero band to the live hero, lays
 * out the intro (.ct-vs-intro), the two before/after bands (.ct-vs-band, each
 * holding one .ct-vs-compare that virtual-staging.js turns into a slider),
 * the before/after gallery (.ct-vs-gallery) and places the global Work With
 * Cary template (.ct-vs-work-with). The template itself is untouched.
 *
 * Every image is an ordinary Elementor Image widget: in a comparison the
 * first is the before photo, the second the staged one; the same in each
 * gallery item.
 *
 * VALUES. Measured from carytamura.com/virtual-staging at 1440, 1200, 1024,
 * 768 and 375 wide (FACT). Sections framed in the 12px body padding down to
 * 768, edge to edge from 767; content in a 1300px box with 50px sides (25px
 * from 767). Section padding 96px, 64px from 768 (the gallery from 1024).
 *
 * MOTION. As live: a slider's divider follows the pointer, and eases back to
 * the middle over 0.3s when the pointer leaves; a gallery photo cross-fades to
 * its staged version under the pointer (or on a tap), settling from a 1.03
 * zoom, over 0.3s.
 */

/* ------------------------------------------------------------------ hero --
 * Live: a 600px band at every width, framed 12px on desktop, one flat 45%
 * black scrim over the photo (no top gradient), title centred and lifted by
 * its 24px bottom margin. */
.ct-page-hero.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	margin: var(--ct-body-padding) var(--ct-body-padding) 0;
	min-height: 0;
	height: 600px;
	padding: 0 50px;
}

.ct-page-hero::before {
	background-color: var(--ct-overlay-strong);
}

.ct-page-hero::after {
	content: none;
}

.ct-page-hero .ct-page-hero__title .elementor-heading-title {
	margin: 0 0 24px;
	font-size: var(--ct-size-h1);
	line-height: 1.25;
}

/* The page body's own padding is dropped: the sections carry the live
 * spacing themselves. */
.ct-page-body:has(.ct-vs-intro) {
	padding-block: 0;
}

/* -------------------------------------------------------------- sections --
 * Every section: framed 12px, content in a 1300px box. */
.ct-vs-intro.e-con,
.ct-vs-band.e-con,
.ct-vs-gallery.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	--padding-left: max(50px, calc((100% - 2 * var(--ct-body-padding) - 1300px) / 2));
	--padding-right: max(50px, calc((100% - 2 * var(--ct-body-padding) - 1300px) / 2));
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--kit-widget-spacing: 0px;
	margin-inline: var(--ct-body-padding);
}

/* ----------------------------------------------------------------- intro --
 * 96px above, 48px below; the heading in a 1200px column, the line 32px
 * under it. */
.ct-vs-intro.e-con {
	--padding-top: 96px;
	--padding-bottom: 48px;
}

.ct-vs-intro.e-con > .ct-vs-intro__title.elementor-widget {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 32px;
}

.ct-vs-intro__title .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-ink);
}

.ct-vs-intro__text,
.ct-vs-intro__text p {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
	text-align: center;
	color: var(--ct-ink);
}

/* ----------------------------------------------------------------- bands --
 * A slider in the content box, 96px above and below (live: 71px plus its
 * empty 25px caption row). The second band is black. */
.ct-vs-band.e-con {
	--padding-top: 96px;
	--padding-bottom: 96px;
	background-color: #fff;
}

.ct-vs-band--dark.e-con {
	background-color: #000;
}

/* ------------------------------------------------------------ comparison --
 * Live: 46.15% as tall as wide (60% from 768). The before photo fills the
 * frame; the staged one lies over it, clipped to the right of the divider
 * (--ct-vs-pos). The divider is a 2px white bar with a 40px white disc and
 * two chevrons at its middle; the bar goes from 768, leaving the disc. */
.ct-vs-compare.e-con {
	--ct-vs-pos: 50%;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 100 / 46.15;
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.ct-vs-compare > .elementor-widget {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ct-vs-compare > .elementor-widget img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

.ct-vs-compare > .ct-vs-compare__after {
	z-index: 1;
	clip-path: inset(0 0 0 var(--ct-vs-pos));
}

.ct-vs-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ct-vs-pos);
	z-index: 3;
	width: 2px;
	background-color: #fff;
	outline: none;
	cursor: ew-resize;
}

.ct-vs-compare__handle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg width='24' height='10' viewBox='0 0 24 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 1L1 5L5 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 1L23 5L19 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 10px no-repeat;
	transform: translate(-50%, -50%);
}

.ct-vs-compare__handle:focus-visible::before {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

/* Live hides the cursor over the frame; the divider stands in for it. */
@media (any-pointer: fine) {
	.ct-vs-compare.e-con:hover,
	.ct-vs-compare.e-con:hover .ct-vs-compare__handle {
		cursor: none;
	}
}

/* Back to the middle when the pointer leaves. */
.ct-vs-compare.is-returning > .ct-vs-compare__after {
	transition: clip-path 0.3s;
}

.ct-vs-compare.is-returning .ct-vs-compare__handle {
	transition: left 0.3s;
}

/* --------------------------------------------------------------- gallery --
 * Three squares a row, 44px apart and rows 40px apart (24px from 991); the
 * fourth takes the whole row, capped at 500px tall. Grey ground under each
 * photo. One a row from 768. */
.ct-vs-gallery.e-con {
	--padding-top: 96px;
	--padding-bottom: 96px;
}

.ct-vs-gallery .ct-vs-gallery__grid.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 40px;
	--column-gap: 44px;
	flex-direction: row;
	flex-wrap: wrap;
}

.ct-vs-gallery .ct-vs-gallery__item.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	position: relative;
	display: block;
	flex: 1 1 calc(33.3333% - 29.3333px);
	aspect-ratio: 1;
	max-height: 500px;
	overflow: hidden;
	background-color: #d9d9d9;
}

.ct-vs-gallery__item > .elementor-widget {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ct-vs-gallery__item > .elementor-widget img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transform: scale(1.03);
	transition: 0.3s;
}

.ct-vs-gallery__item > .ct-vs-gallery__before {
	z-index: 2;
}

.ct-vs-gallery__item > .ct-vs-gallery__after {
	z-index: 1;
}

@media (any-pointer: fine) {
	.ct-vs-gallery__item:hover > .ct-vs-gallery__before img {
		opacity: 0;
		transform: scale(1);
	}

	.ct-vs-gallery__item:hover > .ct-vs-gallery__after img {
		transform: scale(1);
	}
}

@media (any-pointer: coarse) {
	.ct-vs-gallery__item.is-open > .ct-vs-gallery__before img {
		opacity: 0;
		transform: scale(1);
	}

	.ct-vs-gallery__item.is-open > .ct-vs-gallery__after img {
		transform: scale(1);
	}
}

/* ------------------------------------------------------ work with cary -- */
.ct-vs-work-with.elementor-widget {
	--kit-widget-spacing: 0px;
	margin-block: 0;
	margin-inline: var(--ct-body-padding);
}

@media (min-width: 901px) and (max-width: 1024px) {
	.ct-vs-work-with .ct-work-with.e-con {
		min-height: 689px;
	}
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1024px) {
	.ct-vs-gallery.e-con {
		--padding-top: 64px;
		--padding-bottom: 64px;
	}
}

@media (max-width: 991px) {
	.ct-vs-gallery .ct-vs-gallery__grid.e-con {
		--row-gap: 24px;
		--column-gap: 24px;
	}

	.ct-vs-gallery .ct-vs-gallery__item.e-con {
		flex-basis: calc(33.3333% - 16px);
	}
}

@media (max-width: 768px) {
	.ct-page-hero .ct-page-hero__title .elementor-heading-title {
		font-size: 32px;
		line-height: 1.25;
	}

	.ct-vs-intro.e-con {
		--padding-top: 64px;
		--padding-bottom: 32px;
	}

	/* The slider spans the band. */
	.ct-vs-band.e-con {
		--padding-top: 64px;
		--padding-bottom: 64px;
		--padding-left: 0px;
		--padding-right: 0px;
	}

	.ct-vs-compare.e-con {
		aspect-ratio: 100 / 60;
	}

	.ct-vs-compare__handle {
		width: 0;
	}

	.ct-vs-gallery .ct-vs-gallery__item.e-con {
		flex-basis: 100%;
	}
}

@media (max-width: 767px) {
	.ct-page-hero.e-con {
		--width: 100%;
		margin: 0;
		padding: 0 25px;
	}

	.ct-page-hero .ct-page-hero__title .elementor-heading-title {
		line-height: 1.6;
		letter-spacing: 0.75px;
	}

	.ct-vs-intro.e-con,
	.ct-vs-band.e-con,
	.ct-vs-gallery.e-con {
		--width: 100%;
		margin-inline: 0;
	}

	.ct-vs-intro.e-con,
	.ct-vs-gallery.e-con {
		--padding-left: 25px;
		--padding-right: 25px;
	}

	.ct-vs-intro.e-con > .ct-vs-intro__title.elementor-widget {
		margin-bottom: 16px;
	}

	.ct-vs-intro__title .elementor-heading-title {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: 0.75px;
	}

	.ct-vs-work-with.elementor-widget {
		margin-inline: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-vs-compare.is-returning > .ct-vs-compare__after,
	.ct-vs-compare.is-returning .ct-vs-compare__handle,
	.ct-vs-gallery__item > .elementor-widget img {
		transition: none;
	}
}