/* Fixed mockup layouts, shared by the homepage and every project page.
   Each .mockup-grid is a canvas with the aspect ratio of the client's
   mockup; items are placed at percentage left/top/width (from layouts.js),
   so the composition scales with the page, up to --max-width.
   grid.js adds a gentle scroll parallax on top. */
.mockup-wrap {
	position: relative;
	padding-block-start: var(--space-5);
}

.mockup-grid {
	position: relative;
	aspect-ratio: var(--ratio);
	max-width: var(--max-width);
	margin-inline: auto;
}

/* Homepage grid sits directly in <main> (project pages get this from .mockup-wrap). */
main > .mockup-grid {
	margin-block-start: var(--space-5);
}

.mockup-item {
	position: absolute;
	will-change: transform;
}

.mockup-item a,
.mockup-item .thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.mockup-item img {
	width: 100%;
	height: auto;
}

/* Subtle hover movement. Applied to the image, not .mockup-item, whose
   transform belongs to the parallax. */
.mockup-item img {
	transition: transform 0.5s ease;
}
@media (hover: hover) {
	.mockup-item a:hover img,
	.mockup-item .thumb:hover img,
	.mockup-item a:focus-visible img,
	.mockup-item .thumb:focus-visible img {
		transform: translateY(-4px) scale(1.015);
	}
}

/* Transform transitions only engage once grid.js confirms it's running,
   so a slow/blocked script never leaves the page half-animated. */
html.js-enhanced .mockup-item {
	transition: transform 0.6s ease;
}

/* Where the mockup shares space between text and images (Petri, Agencies),
   the intro text sits inside the canvas, scaled with it. Narrower screens
   fall back to the text above the images. */
@media (min-width: 1200px) {
	.mockup-wrap.has-intro .project-intro {
		position: absolute;
		z-index: 1;
		left: var(--intro-left);
		top: var(--intro-top);
		width: var(--intro-width);
		max-width: none;
		margin: 0;
		font-size: clamp(0.625rem, 0.72cqw, 0.78rem);
		line-height: 1.3;
	}
	.mockup-wrap.has-intro {
		container-type: inline-size;
	}
	.mockup-wrap.has-intro .project-intro h1,
	.mockup-wrap.has-intro .project-tagline {
		font-size: inherit;
		font-weight: 500;
		color: inherit;
		margin: 0;
	}
	.mockup-wrap.has-intro .project-intro p {
		margin-block-end: 0.4em;
	}
}

/* Small screens: plain single column in layout order, no drift. */
@media (max-width: 700px) {
	.mockup-grid {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}
	.mockup-item {
		position: static;
		width: 100% !important;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mockup-item,
	.mockup-item img {
		transition: none !important;
	}
	.mockup-item img {
		transform: none !important;
	}
}