/*
zprime Έργα listing, below the fold. Linked non-blocking on the project archive and the
two taxonomy archives, and nowhere else; the band and the category bar above it are
inlined from css/critical-erga.css.

Dependent on zprime-style, so it always prints after style.css and can use the tokens
declared there — --zp-arrow among them, which is why the pagination arrow below can be a
var() rather than a fourth copy of the data URI.

The card is the front page's carousel slide flattened into a grid cell: the same
photograph with the same white plate over its foot. The rules are not shared with
css/home.css because the two differ in every box property — the slide is full-bleed and
absolutely placed inside a scroll-snap track, this is a grid cell with a ratio — and only
the plate's type treatment is genuinely common. Sharing that much would mean a component
file loaded by both views to save a dozen declarations.
*/

/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/

.erga-list {
	padding-inline: var(--zp-pad);
	padding-block: max(2.5rem, 4.6296vw) max(3rem, 6.9444vw); /* 80px / 120px at 1728 */
}

.erga-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(1.5rem, 3.7037vw); /* 64px at 1728 */
}

.erga-empty {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/

/* The plate is positioned against the card, so the card is the containing block. The
ratio is the 3:2 every other project picture on the site is cropped to, which keeps the
row level whatever shape the uploaded photograph is. */
.erga-card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.erga-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--zp-motion);
}

/* Drawn where a project has no photograph, so the cell keeps its shape instead of
collapsing to the height of its caption. */
.erga-card__image--empty {
	background-color: var(--wp--preset--color--border);
}

.erga-card:hover .erga-card__image,
.erga-card:focus-visible .erga-card__image {
	transform: scale(1.03);
}

/* The carousel's caption plate, at grid-cell scale: white ground, condensed bold, the
name over the system. Inset from the foot rather than flush to it, as the design draws
it on the front page. */
.erga-card__caption {
	position: absolute;
	right: max(0.75rem, 1.0417vw);
	bottom: max(0.75rem, 1.0417vw);
	left: max(0.75rem, 1.0417vw); /* 18px at 1728 */
	display: grid;
	row-gap: max(0.25rem, 0.4630vw); /* 8px at 1728 */
	padding: max(0.625rem, 0.9259vw) max(0.75rem, 1.0417vw); /* 16px / 18px at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	font-stretch: 75%;
	text-transform: uppercase;
}

.erga-card__name {
	font-size: max(1rem, 1.1574vw); /* 20px at 1728 */
	line-height: 1.1;
}

/* faint is 4.95:1 on white and passes AA at any size; it is the same relationship the
carousel gives the system line against the name above it. */
.erga-card__system {
	color: var(--wp--preset--color--faint);
	font-size: max(0.75rem, 0.8102vw); /* 14px at 1728 */
	line-height: 1;
	letter-spacing: 0.02em;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/

/* The blog's pagination, restated for this listing. Two έργα fit on one page today, so
nothing prints; the markup and these rules exist because the count only goes up, and the
alternative is remembering to build it on the day it is first needed. */
.erga-more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: max(1.5rem, 3.7037vw); /* 64px at 1728 */
	margin-top: max(2rem, 3.7037vw); /* 64px at 1728 */
}

.erga-more__link {
	--erga-arrow-gap: max(1rem, 2.3148vw); /* 40px at 1728 */
	--erga-arrow-w: max(1.75rem, 2.8935vw); /* 50px at 1728 */

	display: flex;
	align-items: center;
	gap: var(--erga-arrow-gap);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(1rem, 1.0417vw); /* 18px at 1728 */
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

/* Longhands, not the mask shorthand: the W3C validator does not implement it. Same call
as everywhere else in the theme — do not fold these back. */
.erga-more__link::after {
	content: "";
	flex: none;
	width: var(--erga-arrow-w);
	aspect-ratio: 75 / 42;
	background-color: currentcolor;
	mask-image: var(--zp-arrow);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

.erga-more__link:hover,
.erga-more__link:focus-visible {
	color: var(--wp--preset--color--ink);
}

.erga-more__link:hover::after,
.erga-more__link:focus-visible::after {
	transform: translateX(max(6px, 0.3472vw));
}

.erga-more__link--prev::after {
	order: -1;
	transform: scaleX(-1);
}

.erga-more__link--prev:hover::after,
.erga-more__link--prev:focus-visible::after {
	transform: scaleX(-1) translateX(max(6px, 0.3472vw));
}

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

/* The same three breakpoints the blog listing uses, so the two views step together. */
@media (max-width: 998px) {
	.erga-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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