/*
 * CaryTamura Websites page (/websites/, Page 5677).
 *
 * 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 portfolio (.ct-ws-portfolio: twelve .ct-ws-card containers, each an
 * Image widget and an H3 Heading, eleven of them links to the property's own
 * site) and places the global Work With Cary template (.ct-ws-work-with). The
 * template itself is untouched.
 *
 * VALUES. Measured from carytamura.com/websites at 1440, 1200, 1024, 768 and
 * 375 wide (FACT). Framed 12px down to 768, edge to edge from 767; content in
 * a 1300px box with 50px sides (20px from 767). Four columns from 1200, three
 * from 768, one below; columns 14px apart, rows 50px apart (20px below 1200).
 * A card is 121.5% as tall as its padded width, plus its 40px padding.
 * Titles 30px, 21px from 564.
 *
 * MOTION. As live, under the pointer only: the photo zooms to 1.05 (0.75s
 * ease-out), the card darkens to 60% black, the title rises 51px and a faint
 * rule settles 20px beneath it (0.3s). Keyboard focus shows the same.
 */

/* ------------------------------------------------------------------ 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 section carries the live
 * spacing itself. */
.ct-page-body:has(.ct-ws-portfolio) {
	padding-block: 0;
}

/* ------------------------------------------------------------- portfolio --
 * 80px above; below, the last row's 50px gap plus 48px. */
.ct-ws-portfolio.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	--padding-top: 80px;
	--padding-bottom: 98px;
	--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));
	--row-gap: 50px;
	--column-gap: 14px;
	--kit-widget-spacing: 0px;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-inline: var(--ct-body-padding);
}

.ct-ws-portfolio > .ct-ws-card.e-con {
	--padding-top: 20px;
	--padding-bottom: 20px;
	--padding-left: 15px;
	--padding-right: 15px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	position: relative;
	flex: 0 0 calc((100% - 42px) / 4);
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	overflow: hidden;
	text-decoration: none;
}

/* The card's height: 121.5% of its padded width. */
.ct-ws-portfolio > .ct-ws-card::after {
	content: "";
	flex: 0 0 0;
	width: 0;
	padding-top: 121.5%;
}

/* A bottom shade under the title, deepening to 60% black on hover. */
.ct-ws-portfolio > .ct-ws-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: transparent;
	background-image: linear-gradient(rgba(0, 0, 0, 0) 76.6%, #000);
	opacity: 0.6;
	transition: background-color 0.3s;
}

.ct-ws-card > .ct-ws-card__img.elementor-widget {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}

.ct-ws-card__img img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 0.75s ease-out;
}

.ct-ws-card > .ct-ws-card__title.elementor-widget {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
	transition: transform 0.3s;
}

.ct-ws-card__title .elementor-heading-title {
	position: relative;
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h3);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

.ct-ws-card__title .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid;
	opacity: 0;
	transition: 0.3s;
}

@media (hover: hover) and (pointer: fine) {
	.ct-ws-portfolio > .ct-ws-card:hover::before {
		background-color: #000;
	}

	.ct-ws-card:hover > .ct-ws-card__title.elementor-widget {
		transform: translateY(-51px);
	}

	.ct-ws-card:hover .ct-ws-card__title .elementor-heading-title::after {
		opacity: 0.3;
		transform: translateY(20px);
	}

	.ct-ws-card:hover .ct-ws-card__img img {
		transform: scale(1.05);
	}
}

/* Keyboard focus shows the hover state. */
.ct-ws-portfolio > a.ct-ws-card:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

.ct-ws-portfolio > a.ct-ws-card:focus-visible::before {
	background-color: #000;
}

a.ct-ws-card:focus-visible > .ct-ws-card__title.elementor-widget {
	transform: translateY(-51px);
}

a.ct-ws-card:focus-visible .ct-ws-card__title .elementor-heading-title::after {
	opacity: 0.3;
	transform: translateY(20px);
}

/* ------------------------------------------------------ work with cary -- */
.ct-ws-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-ws-work-with .ct-work-with.e-con {
		min-height: 689px;
	}
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1199px) {
	.ct-ws-portfolio.e-con {
		--padding-bottom: 68px;
		--row-gap: 20px;
	}

	.ct-ws-portfolio > .ct-ws-card.e-con {
		flex-basis: calc((100% - 28px) / 3);
	}
}

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

	.ct-ws-portfolio.e-con {
		--padding-top: 30px;
		--padding-bottom: 52px;
	}
}

@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-ws-portfolio.e-con {
		--width: 100%;
		--padding-left: 20px;
		--padding-right: 20px;
		margin-inline: 0;
	}

	.ct-ws-portfolio > .ct-ws-card.e-con {
		flex-basis: 100%;
	}

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

/* Live's titles step down to 21px only from 564. */
@media (max-width: 564px) {
	.ct-ws-card__title .elementor-heading-title {
		font-size: 21px;
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-ws-portfolio > .ct-ws-card::before,
	.ct-ws-card__img img,
	.ct-ws-card > .ct-ws-card__title.elementor-widget,
	.ct-ws-card__title .elementor-heading-title::after {
		transition: none;
	}
}