/* -----------------------------------------------------------------------------
   Projects index — /projects/.

   Two-up card grid on the same dark chrome as the rest of the site. Each card
   carries an --gb-accent the hover state borrows, so a project tints its own
   card without needing a rule of its own here.
----------------------------------------------------------------------------- */

.gb-pj {
	padding-bottom: 140px;
}

/* --------------------------------------------------------------- reveal --- */

/* Only hidden once reveal.js says it is running — see assets/js/reveal.js. */
.gb-reveal-ready [data-gb-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

/* Only the blocks on screen at load hold back for the title band. Scrolled-to
   blocks fire immediately — reveal.js decides which is which. */
.gb-reveal-ready [data-gb-reveal].is-above-fold {
	transition-delay: var(--gb-intro-total, 0s);
}

.gb-reveal-ready [data-gb-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.gb-reveal-ready [data-gb-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------- intro --- */

.gb-pj-intro {
	max-width: 620px;
	margin: 0 0 80px;
}

.gb-pj-intro .gb-lead {
	margin: 12px 0 0;
}

/* The section label is an h2 for the outline but looks like an eyebrow. */
.gb-pj-intro__label {
	margin: 0;
	line-height: inherit;
}

/* ------------------------------------------------------------- sections --- */

.gb-pj-section + .gb-pj-section {
	margin-top: 140px;
	padding-top: 80px;
	border-top: 1px solid var(--gb-line);
}

/* ----------------------------------------------------------------- grid --- */

.gb-pj-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 40px;
}

.gb-pj-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gb-line);
	background: rgba(40, 40, 46, 0.35);
	overflow: hidden;
	transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
	/* Stagger, so a row of cards doesn't arrive all at once. */
	transition-delay: calc(var(--gb-i, 0) * 0.08s);
}

.gb-pj-card:hover {
	border-color: color-mix(in srgb, var(--gb-accent) 55%, transparent);
	background: rgba(40, 40, 46, 0.6);
	transform: translateY(-4px);
}

/* The whole card is the link; the anchor is stretched over it so the markup
   keeps its headings rather than burying them inside an <a>. */
.gb-pj-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.gb-pj-card__link:focus-visible {
	outline: 2px solid var(--gb-accent);
	outline-offset: -4px;
}

/* --------------------------------------------------------------- visual --- */

.gb-pj-card__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: 40px;
	border-bottom: 1px solid var(--gb-line);
	background:
		radial-gradient(
			ellipse at 50% 0%,
			color-mix(in srgb, var(--gb-accent) 14%, transparent) 0%,
			transparent 70%
		),
		var(--gb-black);
}

.gb-pj-card__mark {
	max-height: 110px;
	width: auto;
	max-width: 70%;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.gb-pj-card:hover .gb-pj-card__mark {
	transform: scale(1.04);
}

/* A typeface project shows its own letterforms instead of a logo. */
.gb-pj-card__specimen {
	font-family: 'VilnaPlate', serif;
	font-size: 96px;
	line-height: 1;
	color: var(--gb-ink);
	direction: rtl;
	transition: color 0.5s ease, transform 0.5s ease;
}

.gb-pj-card:hover .gb-pj-card__specimen {
	color: var(--gb-accent);
	transform: scale(1.04);
}

/* ----------------------------------------------------------------- body --- */

.gb-pj-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 36px 40px 40px;
}

.gb-pj-card__name {
	margin: 10px 0 0;
	font-size: 30px;
	line-height: 36px;
}

.gb-pj-card__tagline {
	margin: 10px 0 0;
	color: var(--gb-ink);
	font-size: 15px;
	line-height: 26px;
}

.gb-pj-card__summary {
	margin: 20px 0 0;
	color: var(--gb-muted);
	font-size: 15px;
	line-height: 28px;
}

.gb-pj-card__summary code {
	font-family: 'Roboto Condensed', monospace;
	font-size: 14px;
	color: var(--gb-ink);
}

.gb-pj-card__more {
	margin-top: auto;
	padding-top: 28px;
	color: var(--gb-label);
	font-family: var(--gb-font-label);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.gb-pj-card:hover .gb-pj-card__more {
	color: var(--gb-accent);
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
	.gb-pj-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.gb-pj-intro {
		margin-bottom: 50px;
	}

	.gb-pj-section + .gb-pj-section {
		margin-top: 90px;
		padding-top: 60px;
	}
}

@media (max-width: 600px) {
	.gb-pj-card__visual {
		min-height: 160px;
		padding: 30px;
	}

	.gb-pj-card__specimen {
		font-size: 64px;
	}

	.gb-pj-card__body {
		padding: 28px 28px 32px;
	}

	.gb-pj-card__name {
		font-size: 24px;
		line-height: 30px;
	}
}