/*
zprime single project, below the fold. Linked non-blocking on a single zprime_ergo and
nowhere else; the photographic opening above it is inlined from css/critical-ergo.css.

Dependent on zprime-style, so it prints after style.css and can use the tokens declared
there — --zp-pad and --zp-motion among them.

Three things happen here: two split bands that alternate which side the picture takes, a
plain three-up gallery, and the closing call to action the whole site ends on.

In both split bands the picture comes FIRST in the document and the desktop layout places
it with grid-column, never with order. That is what makes the narrow layout correct for
free: one column, source order, so the image is on top and the words under it in both
bands — which is the reading order a phone wants and the one a screen reader gets.
*/

.ergo-body {
	margin: 0;
	padding: 0;
}

/*--------------------------------------------------------------
# Split bands
--------------------------------------------------------------*/

.ergo-split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: center;
	column-gap: max(1.5rem, 5.5556vw); /* 96px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* The second band takes the lighter of the two greys the company page alternates between.
White was wrong here: it reads as the page falling away rather than as the next band. */
.ergo-split--reverse {
	grid-template-columns: 7fr 5fr;
	background-color: var(--wp--preset--color--surface-alt);
}

.ergo-split > * {
	min-width: 0;
	margin: 0;
}

.ergo-split__media {
	grid-column: 1;
	grid-row: 1;
}

.ergo-split__copy {
	grid-column: 2;
	grid-row: 1;
}

/* Reversed: the words take the first column and the picture the second. Source order is
unchanged, so nothing about the narrow layout or the reading order moves. */
.ergo-split--reverse .ergo-split__media {
	grid-column: 2;
}

.ergo-split--reverse .ergo-split__copy {
	grid-column: 1;
}

/* Portrait, because a vertical picture beside a column of words is the whole point of this
band — but 4:5 rather than the source's own 2:3. A true 2:3 in the narrower column still
comes out half again as tall as anything that can reasonably be written next to it, and the
band then reads as a poster with a caption. At 4:5 the picture and four paragraphs land
within about sixty pixels of each other, and a project uploaded with a landscape photograph
is cropped to the same box instead of pulling the band out of shape. */
.ergo-split__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.ergo-split__title {
	margin: 0;
	font-size: max(1.5rem, 0.65rem + 1.7361vw, 2.3148vw); /* 40px at 1728, 24px at 768 */
	line-height: 1.2;
	letter-spacing: 0.02em;
}

/* The theme's standard body treatment — 16/1.75/0.05 — so a project reads like the rest
of the site rather than like a brochure dropped into it. */
.ergo-split__text {
	margin: max(1.25rem, 1.9676vw) 0 0; /* 34px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75;
	letter-spacing: 0.05em;
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/

.ergo-gallery {
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--border);
}

.ergo-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(0.25rem, 0.4630vw); /* 8px at 1728 — the pictures read as one block, not six cards */
}

.ergo-gallery__grid > * {
	min-width: 0;
	margin: 0;
}

/* One ratio for every cell so the rows sit level whatever was uploaded, portrait included.
The crop costs the reader nothing: a click opens the frame uncropped in core's lightbox. */
.ergo-gallery__grid img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--zp-motion);
}

.ergo-gallery__grid figure:hover img {
	transform: scale(1.03);
}

/* The figure clips the scale so the picture grows inside its own cell rather than over
its neighbour. */
.ergo-gallery__grid figure {
	overflow: hidden;
}


/* Core's lightbox wraps each figure and puts its own labelled button over it; this only
makes the picture read as openable on a pointer. */
.ergo-body .wp-lightbox-container button:hover {
	cursor: zoom-in;
}

/*--------------------------------------------------------------
# Closing call to action
--------------------------------------------------------------*/

/* The band every product page ends on, printed from the template because it is the same
on every project: a photograph held back to 30% behind dark, the question, the line under
it, the filled action beside the plain one, and the phone number last. */
.ergo-cta {
	position: relative;
	isolation: isolate;
	padding-inline: var(--zp-pad);
	padding-block: max(2.5rem, 6.0185vw); /* 104px at 1728 */
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-align: center;
}

.ergo-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

.ergo-cta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
}

.ergo-cta__title {
	max-width: max(20rem, 52.0833vw); /* 900px at 1728 */
	margin: 0 auto;
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18;
	letter-spacing: 0.02em;
}

.ergo-cta__lead {
	margin: max(0.75rem, 1.2153vw) 0 0; /* 21px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75;
	letter-spacing: 0.05em;
}

.ergo-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: max(1.5rem, 2.4884vw); /* 43px at 1728 */
	margin: max(1.5rem, 2.4884vw) 0 0; /* 43px at 1728 */
}

.ergo-cta__quote,
.ergo-cta__contact {
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.ergo-cta__quote {
	padding: max(0.75rem, 1.2153vw) max(1.5rem, 2.4884vw); /* 21px / 43px at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--zp-motion);
}

.ergo-cta__quote:hover,
.ergo-cta__quote:focus-visible {
	background-color: var(--wp--preset--color--border);
}

/* The second action is words, not a second button — the design's rule wherever two
actions sit together. */
.ergo-cta__contact {
	color: inherit;
}

.ergo-cta__contact:hover,
.ergo-cta__contact:focus-visible {
	text-decoration: underline;
}

.ergo-cta__phone {
	margin: max(1.25rem, 1.9676vw) 0 0; /* 34px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ergo-cta__phone a,
.ergo-cta__phone a:hover {
	color: inherit;
}

/*--------------------------------------------------------------
# Narrow
--------------------------------------------------------------*/

/* One column, and because the picture is first in the source both bands become image on
top and words under it — which is what a phone should show whichever way the desktop band
was turned. grid-column is reset so the reversed band does not keep asking for column 2. */
@media (max-width: 998px) {
	.ergo-split,
	.ergo-split--reverse {
		grid-template-columns: 1fr;
		row-gap: max(1.5rem, 3.7037vw); /* 64px at 1728 */
	}

	.ergo-split__media,
	.ergo-split__copy,
	.ergo-split--reverse .ergo-split__media,
	.ergo-split--reverse .ergo-split__copy {
		grid-column: 1;
		grid-row: auto;
	}

	/* A vertical picture at full column width is enormous on a phone; landscape again. */
	.ergo-split__media img {
		aspect-ratio: 3 / 2;
	}

	.ergo-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.ergo-gallery__grid {
		grid-template-columns: 1fr;
	}
}