/*
 * CaryTamura Print Marketing page (/print-marketing/, Page 5634).
 *
 * SCOPE. Loaded on the print marketing page only (functions.php, is_page()),
 * after page-hero.css. It tunes that page's CT Page Hero band to the live
 * hero, lays out the intro (.ct-pm-intro), the brochure gallery
 * (.ct-pm-gallery: twelve Image widgets that print-gallery.js turns into a
 * fading slider with a thumbnail rail and arrows), the video block
 * (.ct-pm-video: Elementor's Video widget, YouTube in its lightbox) and places
 * the global Work With Cary template (.ct-pm-work-with). The template itself
 * is untouched.
 *
 * VALUES. Measured from carytamura.com/print-marketing at 1440, 1024, 768 and
 * 375 wide (FACT) unless marked. Sections framed in the 12px body padding down
 * to 768, edge to edge from 767. Live breakpoints: 992 (video block stacks),
 * 768 (thumbnails run along the bottom), 580 (shorter thumbnails).
 *
 * MOTION. As live: the slides cross-fade (0.5s); the rail advances one
 * thumbnail every 3s, pausing while hovered; thumbnails darken on hover
 * (0.3s); the play button's ring fills on hover (from 576).
 */

/* The page body's own padding is dropped: each section carries the live
 * spacing itself. */
.ct-page-body:has(.ct-pm-intro) {
	padding-block: 0;
}

/* ----------------------------------------------------------------- intro --
 * Framed 12px, content in a 1300px box (live: 1400px with 50px sides), 96px
 * above, the gallery 50px below the copy. */
.ct-pm-intro.e-con,
.ct-pm-gallery.e-con,
.ct-pm-video.e-con {
	--width: 100%;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--kit-widget-spacing: 0px;
}

.ct-pm-intro.e-con,
.ct-pm-video.e-con {
	--padding-left: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--padding-right: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
}

.ct-pm-intro.e-con {
	--padding-top: 96px;
	--padding-bottom: 50px;
}

/* --------------------------------------------------------------- gallery --
 * Live: the full framed width, one viewport tall; slides on #1a1a1a, the
 * photo covering. The rail sits bottom right, 220px wide and 75% of the
 * viewport tall (12px 23px padding, five 174px thumbnails 8px apart), the
 * two 66px #aaa arrows directly above it. */
.ct-pm-gallery.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	position: relative;
	height: 100vh;
	overflow: hidden;
	background-color: #1a1a1a;
}

.ct-pm-gallery.is-enhanced .ct-pm-gallery__slide.elementor-widget {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.ct-pm-gallery.is-enhanced .ct-pm-gallery__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
}

.ct-pm-gallery .ct-pm-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ct-pm-gallery__nav {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 220px;
	height: 75vh;
	padding: 12px 23px;
}

.ct-pm-gallery__arrows {
	position: absolute;
	right: 0;
	bottom: calc(100% - 1px);
	display: flex;
}

.ct-pm-gallery__arrows button {
	position: relative;
	width: 66px;
	height: 66px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: #aaa;
	cursor: pointer;
}

/* Thin white chevrons (IMPLEMENTATION DECISION: live draws them with its own
 * icon font, which is not available here). */
.ct-pm-gallery__arrows button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid #fff;
	border-right: 1.5px solid #fff;
	transform: translate(-70%, -50%) rotate(45deg);
}

.ct-pm-gallery__arrows .ct-pm-gallery__prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.ct-pm-gallery__arrows button:focus-visible,
.ct-pm-gallery__thumb:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: -2px;
}

.ct-pm-gallery__rail {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ct-pm-gallery__track {
	display: flex;
	flex-direction: column;
	height: 100%;
	will-change: transform;
}

.ct-pm-gallery__thumb {
	flex: 0 0 20%;
	min-width: 0;
	min-height: 0;
	display: block;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
}

.ct-pm-gallery__thumb-item {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.ct-pm-gallery__thumb-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hover (live: a 50% black veil, 0.3s). */
.ct-pm-gallery__thumb-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0;
	transition: opacity 0.3s;
}

.ct-pm-gallery__thumb:hover .ct-pm-gallery__thumb-item::after {
	opacity: 0.5;
}

/* ----------------------------------------------------------------- video --
 * Live: 100px above and below, the 1300px box split 40/60 with 50px between:
 * text centred vertically on the left, the poster on the right, its height
 * 54% of its width plus the 76px play button. */
.ct-pm-video.e-con {
	--padding-top: 100px;
	--padding-bottom: 100px;
	--column-gap: 50px;
	--gap: 50px;
	flex-direction: row;
	align-items: center;
}

.ct-pm-video .ct-pm-video__content.e-con {
	/* Live's column ends in an empty social-links list (36px), which it
	 * centres along with the text. */
	--padding-top: 0px;
	--padding-bottom: 36px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--kit-widget-spacing: 0px;
	flex: 0 0 calc(40% - 50px);
	width: calc(40% - 50px);
}

.ct-pm-video__title .elementor-heading-title {
	margin: 0 0 18px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: #030303;
}

.ct-pm-video__text,
.ct-pm-video__text p {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.666;
	color: #030303;
}

.ct-pm-video .ct-pm-video__player.elementor-widget {
	flex: 0 0 60%;
	width: 60%;
	margin: 0;
}

.ct-pm-video__player .elementor-wrapper,
.ct-pm-video__player .elementor-custom-embed-image-overlay img {
	aspect-ratio: auto;
}

.ct-pm-video__player .elementor-custom-embed-image-overlay {
	position: relative;
	height: 0;
	padding: calc(27% + 38px) 0;
	cursor: pointer;
}

.ct-pm-video__player .elementor-custom-embed-image-overlay img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Play: a 76px white ring around a 50px white disc and a small black play
 * glyph. */
.ct-pm-video__player .elementor-custom-embed-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border: 1px solid #fff;
	border-radius: 50%;
	transition: background-color 0.3s;
}

.ct-pm-video__player .elementor-custom-embed-play::before {
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #fff;
}

.ct-pm-video__player .elementor-custom-embed-play svg {
	position: relative;
	width: 10px;
	height: 10px;
	margin-left: 2px;
	fill: #000;
	opacity: 1;
	filter: none;
}

@media (min-width: 576px) {
	.ct-pm-video__player .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
		background-color: rgba(255, 255, 255, 0.3);
	}
}

/* Live's lightbox: a 92% black ground, the 16:9 player the full viewport
 * width (Elementor's own is 85%). `body` outranks Elementor's lightbox
 * stylesheet, which it loads on demand, after this file. */
body .elementor-lightbox {
	--lightbox-ui-color: #fff;
	background-color: rgba(0, 0, 0, 0.92);
}

body .elementor-lightbox .elementor-video-container .elementor-video-landscape {
	width: 100vw;
	max-height: 100vh;
}

/* ------------------------------------------------------ work with cary -- */
.ct-pm-work-with.elementor-widget {
	--kit-widget-spacing: 0px;
	margin-block: 0;
}

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

/* The video block stacks, centred. */
@media (max-width: 992px) {
	.ct-pm-video.e-con {
		--padding-left: 25px;
		--padding-right: 25px;
		--gap: 0px;
		--row-gap: 0px;
		flex-direction: column;
		align-items: stretch;
	}

	.ct-pm-video .ct-pm-video__content.e-con,
	.ct-pm-video .ct-pm-video__player.elementor-widget {
		flex: 0 0 auto;
		width: 100%;
	}

	.ct-pm-video__title .elementor-heading-title,
	.ct-pm-video__text,
	.ct-pm-video__text p {
		text-align: center;
	}

	.ct-pm-video__title .elementor-heading-title {
		margin-bottom: 4px;
	}

	.ct-pm-video .ct-pm-video__content.e-con {
		--padding-bottom: 24px;
	}

	.ct-pm-video .ct-pm-video__player.elementor-widget {
		margin-top: 60px;
	}

	.ct-pm-video__player .elementor-custom-embed-image-overlay {
		padding: calc(20% + 38px) 0;
	}
}

/* The rail becomes a 105px strip along the bottom: three thumbnails, the
 * 50px arrows just above its right end. */
@media (max-width: 768px) {
	.ct-pm-intro.e-con {
		--padding-bottom: 30px;
	}

	.ct-pm-gallery.e-con {
		--padding-bottom: 105px;
	}

	.ct-pm-gallery.is-enhanced .ct-pm-gallery__slide.elementor-widget {
		bottom: 105px;
	}

	.ct-pm-gallery__nav {
		left: 0;
		width: auto;
		height: 105px;
		padding: 17px 16px;
		background-color: #fff;
	}

	.ct-pm-gallery__arrows button {
		width: 50px;
		height: 50px;
	}

	.ct-pm-gallery__track {
		flex-direction: row;
		height: 100%;
	}

	.ct-pm-gallery__thumb {
		flex: 0 0 33.3333%;
		height: 100%;
		padding: 0 6.5px;
	}
}

@media (max-width: 767px) {
	.ct-pm-intro.e-con,
	.ct-pm-gallery.e-con,
	.ct-pm-video.e-con {
		--width: 100%;
		margin-inline: 0;
	}

	.ct-pm-intro.e-con {
		--padding-left: 25px;
		--padding-right: 25px;
	}

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

@media (max-width: 580px) {
	.ct-pm-gallery__thumb-item {
		height: 90px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-pm-gallery.is-enhanced .ct-pm-gallery__slide.elementor-widget,
	.ct-pm-gallery__thumb-item::after,
	.ct-pm-video__player .elementor-custom-embed-play {
		transition: none;
	}
}