/*
 * CaryTamura SEO page (/seo/, Page 5640).
 *
 * SCOPE. Loaded on this page and on /video-marketing/, which live draws
 * with the same video-gallery component (functions.php, is_page()), after
 * page-hero.css. It tunes the page's CT Page Hero band to the live hero, lays
 * out the video section (.ct-seo-videos: intro line and two cards, each an
 * Elementor Video widget playing YouTube in its lightbox), styles the Read
 * More dialog seo-videos.js builds, and places the global Work With Cary
 * template (.ct-seo-work-with). The template itself is untouched.
 *
 * VALUES. Measured from carytamura.com/seo 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; the cards stack below 575.
 *
 * MOTION. As live: Read More's dark rule draws across its grey underline on
 * hover (0.4s); the play button's ring fills white on hover.
 */

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

/* ----------------------------------------------------------------- videos --
 * Framed 12px, content in a 1300px box (live: 1400px with 50px sides), 96px
 * above; the intro line centred in 1060px, the cards 52px below it, two
 * columns 30px apart, 96px below. */
.ct-seo-videos.e-con {
	--width: 100%;
	--padding-top: 96px;
	--padding-bottom: 96px;
	--padding-left: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--padding-right: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--gap: 0px;
	--row-gap: 0px;
	--kit-widget-spacing: 0px;
}

.ct-seo-videos .ct-seo-videos__row.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 30px;
	--row-gap: 40px;
	--column-gap: 30px;
	flex-direction: row;
	align-items: stretch;
}

/* A card: title, excerpt, Read More, then the poster on the card's floor, so
 * a two-line title beside a one-line one keeps both posters level. */
.ct-seo-videos .ct-seo-card.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--kit-widget-spacing: 0px;
	flex: 1 1 0;
	min-width: 0;
	cursor: pointer;
}

.ct-seo-card__title .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-ink);
}

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

/* The full description only feeds the Read More dialog. */
.ct-seo-card .ct-seo-card__full.elementor-widget {
	display: none;
}

/* Read More: bold grey, a 1px grey rule under it and a dark one drawing
 * across it on hover. */
.ct-seo-card .ct-seo-card__more.elementor-widget {
	margin: 3px 0 13px;
}

.ct-seo-card__more .elementor-heading-title {
	position: relative;
	display: block;
	width: fit-content;
	padding-bottom: 4px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 1px;
	color: #5e5e5e;
	cursor: pointer;
}

.ct-seo-card__more .elementor-heading-title::before,
.ct-seo-card__more .elementor-heading-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	transition: right 0.4s;
}

.ct-seo-card__more .elementor-heading-title::before {
	right: 0;
	background-color: #999;
}

.ct-seo-card__more .elementor-heading-title::after {
	right: 100%;
	background-color: #1a1a1a;
}

.ct-seo-card__more .elementor-heading-title:hover::after,
.ct-seo-card__more .elementor-heading-title:focus-visible::after {
	right: 0;
}

.ct-seo-card__more .elementor-heading-title:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 3px;
}

/* The poster: 245px tall at every width, covering. */
.ct-seo-card .ct-seo-card__video.elementor-widget {
	margin-top: auto;
}

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

.ct-seo-card__video .elementor-custom-embed-image-overlay {
	position: relative;
	height: 245px;
	cursor: pointer;
}

.ct-seo-card__video .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 red play glyph; the
 * ring fills white on hover. */
.ct-seo-card__video .elementor-custom-embed-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border: 1px solid #fff;
	border-radius: 50%;
}

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

.ct-seo-card__video .elementor-custom-embed-play svg {
	position: relative;
	width: 10px;
	height: 12px;
	margin-left: 2px;
	fill: var(--ct-accent);
	opacity: 1;
	filter: none;
}

.ct-seo-card__video .elementor-custom-embed-play:hover {
	background-color: #fff;
}

/* Live's video 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;
}

/* ---------------------------------------------------------- read more --
 * Live: a 35% black veil, the 600px white panel centred on it (50px 40px
 * 40px padding), a 32px close cross in its top right corner; the title in
 * widely tracked Playfair capitals over the full description. */
.ct-seo-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	background-color: rgba(0, 0, 0, 0.35);
}

.ct-seo-modal.is-open {
	display: block;
}

.ct-seo-modal__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 600px;
	max-width: calc(100% - 30px);
	max-height: calc(100% - 30px);
	overflow-y: auto;
	padding: 50px 40px 40px;
	background-color: #fff;
	transform: translate(-50%, -50%);
}

.ct-seo-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	margin: 0;
	padding: 4px 10px;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--ct-font-body);
	font-size: 32px;
	line-height: 32px;
	color: var(--ct-ink);
	cursor: pointer;
}

.ct-seo-modal__close:hover,
.ct-seo-modal__close:focus {
	background: none;
	color: var(--ct-ink);
}

.ct-seo-modal__close:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

.ct-seo-modal__title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-ink);
}

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

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

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 768px) {
	.ct-seo-videos.e-con {
		--padding-top: 64px;
		--padding-bottom: 64px;
	}
}

@media (max-width: 767px) {
	.ct-seo-videos.e-con {
		--width: 100%;
		--padding-left: 25px;
		--padding-right: 25px;
		margin-inline: 0;
	}

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

/* The cards stack. */
@media (max-width: 574px) {
	.ct-seo-videos .ct-seo-videos__row.e-con {
		flex-direction: column;
	}

	.ct-seo-videos .ct-seo-card.e-con {
		flex: 0 0 auto;
	}
}