/*
 * CaryTamura Video Marketing page (/video-marketing/, Page 5649).
 *
 * SCOPE. Loaded on this page only (functions.php, is_page()), after seo.css.
 * Live draws this page with the same video-gallery component as /seo/, so the
 * page reuses the SEO page's hero tuning, cards, play button, lightbox, Read
 * More dialog and Work With Cary placement unchanged (seo.css,
 * seo-videos.js). This file adds only what this page has and /seo/ does not:
 * the H2 over the intro, six cards in a wrapping three-column grid, the
 * poster scrim and zoom, and, on phones, the pager video-marketing.js builds.
 *
 * VALUES. Measured from carytamura.com/video-marketing at 1440, 1024, 768 and
 * 375 wide (FACT): three columns to 991, two to 575, one below, rows 90px
 * apart (40px stacked); 96px above the heading and 96px below the grid (64px
 * and 84px from 768); on phones two cards a page, the pager 50px below them
 * and 64px above Work With Cary.
 *
 * MOTION. As live: under the pointer a card's poster zooms to 1.1 (1s
 * ease-out) and its scrim deepens from 30% to 50% (0.25s); a page change on
 * phones fades the new cards in over 0.5s.
 */

/* ------------------------------------------------------------------ grid --
 * Three columns 30px apart, rows 90px apart. Cards in a row stretch to the
 * tallest, so their posters (on each card's floor, seo.css) stay level. */
.ct-vm-videos .ct-vm-videos__grid.e-con {
	--row-gap: 90px;
	--column-gap: 30px;
	flex-wrap: wrap;
}

.ct-vm-videos .ct-vm-videos__grid > .ct-seo-card.e-con {
	flex: 0 0 calc((100% - 60px) / 3);
}

/* Live keeps 10px between a card's text and its poster. Read More carries it
 * in its own margin (seo.css); a card without one takes it here. */
.ct-vm-videos .ct-seo-card__title + .ct-seo-card__video.elementor-widget,
.ct-vm-videos .ct-seo-card__excerpt + .ct-seo-card__video.elementor-widget {
	padding-top: 10px;
}

/* The poster's scrim, under the play button. */
.ct-vm-videos .ct-seo-card__video .elementor-custom-embed-image-overlay {
	overflow: hidden;
}

.ct-vm-videos .ct-seo-card__video .elementor-custom-embed-image-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0.3;
	transition: opacity 0.25s;
}

.ct-vm-videos .ct-seo-card__video .elementor-custom-embed-image-overlay img {
	transition: transform 1s ease-out;
}

.ct-vm-videos .ct-seo-card__video .elementor-custom-embed-play {
	z-index: 1;
}

.ct-vm-videos .ct-seo-card:hover .elementor-custom-embed-image-overlay::after {
	opacity: 0.5;
}

.ct-vm-videos .ct-seo-card:hover .elementor-custom-embed-image-overlay img {
	transform: scale(1.1);
}

/* ----------------------------------------------------------------- pager --
 * Phones only (video-marketing.js). Live: centred 36px squares, the page
 * numbers in bold red Lato, the current page and a hovered one filled red
 * with a white label; the arrows are 9px red chevrons, half faded when there
 * is no page that way. */
.ct-vm-pager {
	display: none;
}

@keyframes ct-vm-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.ct-vm-pager__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-vm-pager button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 2px solid transparent;
	border-radius: 0;
	background-color: transparent;
	font-family: var(--ct-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 34px;
	color: var(--ct-accent);
	cursor: pointer;
	transition: 0.3s;
}

.ct-vm-pager button:hover:not(:disabled),
.ct-vm-pager button[aria-current="page"] {
	border-color: var(--ct-accent);
	background-color: var(--ct-accent);
	color: #fff;
}

.ct-vm-pager button[aria-current="page"],
.ct-vm-pager button:disabled {
	cursor: default;
}

.ct-vm-pager button:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

.ct-vm-pager__prev,
.ct-vm-pager__next {
	margin-inline: 3px !important;
}

.ct-vm-pager__prev::before,
.ct-vm-pager__next::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	width: 9px;
	height: 9px;
	box-sizing: border-box;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
}

.ct-vm-pager__prev::before {
	transform: translate(-2.5px, -4.5px) rotate(45deg);
}

.ct-vm-pager__next::before {
	transform: translate(-6.5px, -4.5px) rotate(-135deg);
}

.ct-vm-pager button:disabled {
	opacity: 0.5;
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 990px) {
	.ct-vm-videos .ct-vm-videos__grid > .ct-seo-card.e-con {
		flex-basis: calc((100% - 30px) / 2);
	}
}

@media (max-width: 768px) {
	.ct-vm-videos.e-con {
		--padding-bottom: 84px;
	}
}

@media (max-width: 767px) {
	/* Live's dialog on phones: 20px from each edge, 20px side padding. */
	.ct-seo-modal__panel {
		width: calc(100% - 40px);
		max-width: none;
		max-height: calc(100% - 40px);
		padding: 50px 20px 20px;
	}
}

/* One column, two cards a page. seo.css turns the row into a column here. */
@media (max-width: 574px) {
	.ct-vm-videos.e-con {
		--padding-bottom: 64px;
	}

	.ct-vm-videos .ct-vm-videos__grid.e-con {
		--row-gap: 40px;
	}

	.ct-vm-videos .ct-vm-videos__grid > .ct-seo-card.e-con {
		flex-basis: auto;
	}

	.ct-vm-card--off-page {
		display: none !important;
	}

	.ct-vm-card--entering {
		animation: ct-vm-fade 0.5s ease;
	}

	.ct-vm-pager {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 50px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-vm-videos .ct-seo-card__video .elementor-custom-embed-image-overlay img,
	.ct-vm-videos .ct-seo-card__video .elementor-custom-embed-image-overlay::after {
		transition: none;
	}

	.ct-vm-card--entering {
		animation: none;
	}
}