/**
 * Portfolio Showcase V2 (grid).
 *
 * Structure
 * ---------
 * .zanod-pg                          root (custom properties live here);
 *                                    .zanod-pg--tall = full-height cards on desktop
 *   .zanod-pg__grid                  CSS grid
 *     .zanod-pg__item                one project; carries --zanod-project-border-color
 *       a.zanod-pg__media            clipped image viewport (whole area links)
 *         .zanod-pg__layer           oversized parallax layer (transform only)
 *           img.zanod-pg__img        greyscale filter + colour transition
 *         ::after                    stationary inset hover border
 *       .zanod-pg__title             project title
 *
 * Responsibilities never overlap: the layer is the only element that is
 * transformed, the image is the only element that is filtered, and the
 * border is a pseudo-element on the (untransformed) viewport, so it stays
 * perfectly still while the image moves underneath it.
 */

.zanod-pg {
	/* Grid */
	--zpg-cols: 3;
	--zpg-col-gap: 24px;
	--zpg-row-gap: 44px;
	--zpg-ratio: 0.75;               /* image width / height (3:4 portrait) */
	--zpg-height: auto;              /* explicit image height overrides the ratio */

	/* Full-height cards (desktop only, see portfolio-grid-desktop.css) */
	--zpg-vh-offset: 80px;           /* fixed site header the card keeps clear of */
	--zpg-card-min: 480px;           /* floor for very short desktop windows */

	/* Image */
	--zpg-fit: cover;
	--zpg-pos: center center;
	--zpg-grey: 0.9;                 /* resting greyscale amount, 0–1 */
	--zpg-media-bg: #ebebeb;
	--zpg-parallax: 6%;              /* overshoot each direction, set inline by the renderer */

	/* Hover */
	--zpg-dur: 0.6s;
	--zpg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--zpg-border-w: 2px;
	--zpg-border-inset: 10px;
	--zpg-border-fallback: #111111;

	/* Title */
	--zpg-title-gap: 24px;
	--zpg-title-color: #4a4a4a;
	--zpg-title-align: left;

	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.zanod-pg *,
.zanod-pg *::before,
.zanod-pg *::after {
	box-sizing: border-box;
}

.elementor-widget-zanod-portfolio-showcase-v2 > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

.zanod-pg__grid {
	display: grid;
	grid-template-columns: repeat(var(--zpg-cols), minmax(0, 1fr));
	column-gap: var(--zpg-col-gap);
	row-gap: var(--zpg-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.zanod-pg__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Image viewport ------------------------------------------------------ */

.zanod-pg__media {
	position: relative;
	display: block;
	width: 100%;
	height: var(--zpg-height);
	aspect-ratio: var(--zpg-ratio);
	overflow: hidden;
	background: var(--zpg-media-bg);
	color: inherit;
	text-decoration: none;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}

.zanod-pg__media:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.zanod-pg__layer {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--zpg-parallax));
	bottom: calc(-1 * var(--zpg-parallax));
	transform: translate3d(0, 0, 0);
	will-change: transform;
	backface-visibility: hidden;
}

/* Parallax off (setting) or suspended (reduced motion / mobile switch):
   the layer sits exactly on the viewport, no overshoot, no transform. */
.zanod-pg--static .zanod-pg__layer,
.zanod-pg__media.is-static .zanod-pg__layer {
	top: 0;
	bottom: 0;
	transform: none;
	will-change: auto;
}

.zanod-pg .zanod-pg__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: var(--zpg-fit);
	object-position: var(--zpg-pos);
	filter: grayscale(var(--zpg-grey));
	transition: filter var(--zpg-dur) var(--zpg-ease);
}

.zanod-pg .zanod-pg__img--missing {
	background: var(--zpg-media-bg);
}

/* Inner hover border: a pseudo-element on the untransformed viewport, so
   it never moves with the parallax layer and never changes the box size. */
.zanod-pg__media::after {
	content: "";
	position: absolute;
	inset: var(--zpg-border-inset);
	z-index: 2;
	border: var(--zpg-border-w) solid var(--zanod-project-border-color, var(--zpg-border-fallback));
	opacity: 0;
	transition: opacity var(--zpg-dur) var(--zpg-ease);
	pointer-events: none;
}

/* Hover: colour and border share one duration and easing. */
@media (hover: hover) and (pointer: fine) {
	.zanod-pg__media:hover .zanod-pg__img {
		filter: grayscale(0);
	}

	.zanod-pg__media:hover::after {
		opacity: 1;
	}
}

.zanod-pg__media:focus-visible .zanod-pg__img {
	filter: grayscale(0);
}

.zanod-pg__media:focus-visible::after {
	opacity: 1;
}

/* Title --------------------------------------------------------------- */

.zanod-pg__title {
	margin: var(--zpg-title-gap) 0 0;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: var(--zpg-title-align);
	color: var(--zpg-title-color);
	overflow-wrap: anywhere;
}

.zanod-pg__title-link {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--zpg-dur) var(--zpg-ease);
}

.zanod-pg__title-link:hover,
.zanod-pg__title-link:focus-visible {
	color: inherit;
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.zanod-pg .zanod-pg__img,
	.zanod-pg__media::after,
	.zanod-pg__title-link {
		transition-duration: 0.01s;
	}
}