/*
 * Works grid styles.
 *
 * Ported from the live compiled CSS (index-CTd4ANgl.css), which is the truer
 * artefact where it disagrees with the React module source. The live module
 * classes are hashed there; here they carry the plain names the theme markup
 * uses (ProjectsList, workWrap, workData, taglist, workPlaceholder, featured,
 * featuredPlaceholder, worksCanvas), plus the react-masonry-css grid classes.
 */

/* Masonry container and columns. Column width is set inline per column
   (100 / column count), matching react-masonry-css; the gap and max-width
   come from the live global rules. */
.my-masonry-grid {
	display: flex;
	width: auto;
	gap: 6vw;
	max-width: 1550px;
	margin: 0 auto;
}

.my-masonry-grid_column {
	background-clip: padding-box;
}

.my-masonry-grid_column > div:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

@media (min-width: 1550px) {
	.my-masonry-grid {
		gap: 5rem;
	}
}

@media (max-width: 700px) {
	.my-masonry-grid {
		gap: 2.5rem;
	}
}

/* Grid section. */
.ProjectsList {
	width: 100%;
	margin: auto;
	padding: 8rem 6vw 0;
	position: relative;
	z-index: 2;
}

.ProjectsList .workWrap {
	background-color: #fff;
	padding-bottom: 5rem;
}

.workData {
	padding-block: 1rem 2rem;
}

.workWrap a {
	color: var(--secondaryColor);
	text-decoration: none;
}

.workData h4 {
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 1.25rem;
}

.workData h4:before {
	position: absolute;
	content: "";
	left: -1rem;
	top: 50%;
	width: 0.35rem;
	height: 0.35rem;
	background: var(--secondaryColor);
	border-radius: 50%;
	transform: translateY(-50%) scale(0);
	transition: transform 0.4s ease-in-out;
}

.workWrap:hover .workData h4:before {
	transform: translateY(-50%) scale(1);
}

.taglist {
	font-size: 0.8rem;
	display: flex;
	flex-wrap: nowrap;
	text-transform: capitalize;
	gap: 1.5rem;
}

.taglist li {
	cursor: pointer;
	opacity: 0.5;
	color: #000;
	transition: all 0.3s ease-in-out;
}

/* Canvas overlay for the distortion effect (drawn in Chat 5 stage 3). Hidden
   below 1240px, matching live. */
.worksCanvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	transform: scale(1);
	pointer-events: none;
	min-height: 100%;
	max-height: 100%;
	max-width: 100%;
}

@media (max-width: 1240px) {
	.worksCanvas {
		opacity: 0 !important;
	}
}

@media (max-width: 700px) {
	.ProjectsList {
		padding: 5rem 6vw 3rem;
	}

	.ProjectsList .workWrap {
		width: 100%;
		padding-bottom: 1.5rem;
	}

	.workData h4 {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	.taglist {
		font-size: 0.65rem;
	}
}

/* Single card thumbnail (SingleWorkThumb). position:relative contains the
   absolutely positioned background iframe (live sets this in JS; the compiled
   CSS omits it). */
.workPlaceholder {
	position: relative;
	overflow: hidden;
}

.workPlaceholder.h {
	aspect-ratio: 490 / 276;
}

.workPlaceholder.v {
	aspect-ratio: 490 / 647;
}

.featuredPlaceholder {
	width: 100%;
	height: 100%;
	background: #000;
}

.workPlaceholder .featured {
	position: absolute;
	border: 1px solid #fff;
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: 4;
	background-position: center center;
	background-size: cover;
}

.workPlaceholder .featured img {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
}

.workPlaceholder iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: none;
	width: 100%;
	height: 100%;
	z-index: 2;
	max-width: none !important;
}

.workPlaceholder a {
	display: block;
}

.workPlaceholder > svg {
	position: absolute;
	z-index: 5;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.workPlaceholder > svg path {
	fill: #fff;
}

.workPlaceholder img {
	z-index: 2;
	opacity: 1;
}

@media (max-width: 700px) {
	.workPlaceholder img {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

/* View All Projects button (home preview only). Live compiled override on the
   Bootstrap link button. */
.btn-link {
	color: var(--secondaryColor) !important;
	font-size: 1.1rem;
}

/* ------------------------------------------------------------------------ *
 * Works page filter nav (live's .pageHeader .jumpToSection).
 *
 * Live markup: div.pageHeader (position:relative, max-width:1550, margin auto)
 * holds the logo and div.jumpToSection, which is absolutely positioned inside
 * it. The theme renders the Elementor icon-list instead: a boxed section holds
 * a flex row (logo widget + a nested container that holds the "Jump ahead"
 * heading and the #jump_to_links icon-list). None of it carries the live class
 * names, so these rules reproduce live's geometry against the Elementor
 * structure, anchored on the stable #jump_to_links id via :has (the Elementor
 * element ids are hashed and would change on a rebuild).
 *
 * Layer mapping to live:
 *   .e-con.e-parent:has(#jump_to_links)          -> the outer gutter (padding
 *                                                   2rem top, 6vw sides), the
 *                                                   layer live's wrapper gives.
 *   ... > .e-con-inner                           -> live's .pageHeader: the
 *                                                   max-width:1550 centred box
 *                                                   the absolute nav resolves
 *                                                   its left:50% against.
 *   .e-con:has(> #jump_to_links)                 -> live's .jumpToSection.
 *
 * Geometry is verbatim from the compiled CSS (.pageHeader .jumpToSection ...)
 * and confirmed by measuring live at 1600/1240/991/700px. The rem values
 * resolve to live's pixels because the responsive root font-size (18/21/16px)
 * is ported in main.css. pageHeader width = viewport - 12vw, capped at 1550,
 * so left:calc(50% - 5rem) lands the nav exactly where live puts it.
 *
 * pageHeader disambiguation: the case study header is scoped to
 * .workPageContent .pageHeader in single.php, so nothing here collides with it.
 * Everything is scoped to .innerPage as a further guard.
 * ------------------------------------------------------------------------ */

/* Outer gutter layer: full width, 2rem top and 6vw side padding, matching the
   space live's wrapper reserves around .pageHeader. */
.innerPage .e-con.e-parent:has(#jump_to_links) {
	width: 100%;
	max-width: none;
	padding: 2rem 6vw;
}

/* pageHeader layer: the centred max-width box the absolute nav positions
   against. left:calc(50% - 5rem) resolves 50% against this width. */
.innerPage .e-con.e-parent:has(#jump_to_links) > .e-con-inner {
	width: 100%;
	max-width: 1550px;
	margin: 0 auto;
	padding: 0;
}

/* The jumpToSection: the "Jump ahead" heading beside the item list, positioned
   absolutely inside the pageHeader exactly as live does. */
.innerPage .e-con:has(> #jump_to_links) {
	position: absolute;
	top: 0.5rem;
	left: calc(50% - 5rem);
	transform: translate(-5vw);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 7vw;
	align-items: flex-start;
	padding: 0;
}

/* Below 700px live drops the nav below the logo, flush left, no shift. */
@media (max-width: 700px) {
	.innerPage .e-con:has(> #jump_to_links) {
		top: 4.5rem;
		left: 0;
		transform: none;
	}
}

/* Strip Elementor widget padding so the 7vw gap and top alignment are clean. */
.innerPage .e-con:has(> #jump_to_links) .elementor-widget-container {
	padding: 0;
	margin: 0;
}

/* The heading (live's h6). Live's computed weight is 500. */
.innerPage .e-con:has(> #jump_to_links) > .elementor-widget-heading .elementor-heading-title {
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.5;
	margin: 0;
}

/* The item list. position:relative anchors the injected hover-dot. */
.innerPage #jump_to_links .elementor-icon-list-items {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.innerPage #jump_to_links .elementor-icon-list-item {
	font-size: 0.75rem;
	cursor: pointer;
	padding-block: 0.15rem;
	margin: 0;
	border: 0;
}

.innerPage #jump_to_links .elementor-icon-list-item a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 0;
}

/* Live's row height is line-height 1.4 (22.05px at 15.75px) plus the .15rem
   padding-block, giving 28.35px rows. Elementor forces the anchor line-height to
   1, collapsing rows to 22px; restore 1.4 so the rows (and the hover-dot, which
   centres on each row) match live. */
.innerPage #jump_to_links .elementor-icon-list-item a,
.innerPage #jump_to_links .elementor-icon-list-text {
	line-height: 1.4;
}

/* The #jump_to_links text nudge and the injected .hover-dot moved to inner.css,
   shared by the Works, Services and About lists (see hover-dot.js). inner.css
   loads on every inner page, so the Works list is unaffected. */