/**
 * Page styles for /work/ (the portfolio index — plans/06).
 *
 * Three bands only: a compact ink hero strip (NOT the homepage hero), the paper
 * body holding the filter pills + the one work grid, and the gold "start a
 * project" CTA. The card surface itself lives in components/cards.css; the grid
 * and filter rules below intentionally mirror sections/work.css (which is
 * front-page-only) so the archive reads identically to the homepage teaser.
 *
 * Built by Zinuxtech (ZX · Zinux) to the ZinuxTech Development Guide.
 */

/* --- Hero strip (ink) ----------------------------------------------------- */

.wrk-hero {
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--inv-header-height) + var(--inv-space-xl)) var(--inv-space-2xl);
	background: var(--inv-ink) var(--inv-backdrop) center / cover no-repeat;
	color: var(--inv-text-inv);
}

.wrk-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--inv-space-md);
}

.wrk-hero__title {
	font-size: clamp(3.25rem, 2rem + 6vw, 6rem);
	line-height: 0.98;
}

.wrk-hero__title::after {
	display: inline-block;
	width: 0.12em;
	height: 0.12em;
	margin-left: 0.06em;
	border-radius: 50%;
	background: var(--inv-signal);
	content: "";
}

.wrk-hero__intro {
	max-width: 46rem;
	color: var(--inv-muted-inv);
	font-size: clamp(1rem, 1.25vw, 1.2rem);
	line-height: 1.5;
}

/* Timecode ruler closes the strip — production vernacular continuity. */
.wrk-hero__ruler {
	height: 0.55rem;
	margin-top: var(--inv-space-sm);
	border-top: 1px solid var(--inv-line-inv);
	background-image: repeating-linear-gradient(90deg, var(--inv-line-inv) 0 1px, transparent 1px 0.75rem);
	background-size: 100% 0.35rem;
	background-repeat: no-repeat;
}

/* --- Body (paper) --------------------------------------------------------- */

.wrk-body {
	padding-block: var(--inv-sect);
	background: var(--inv-paper);
}

.wrk-body__inner {
	display: grid;
	gap: var(--inv-space-xl);
}

.wrk-body .work-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--inv-space-xs);
}

.wrk-body .work-filter__button {
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--inv-line);
	border-radius: var(--inv-radius-pill);
	background: transparent;
	color: var(--inv-muted);
	font-family: var(--inv-font-mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	transition: color var(--inv-duration-fast) var(--inv-ease), background var(--inv-duration-fast) var(--inv-ease), border-color var(--inv-duration-fast) var(--inv-ease);
}

.wrk-body .work-filter__button:hover,
.wrk-body .work-filter__button.is-active {
	border-color: var(--inv-ink);
	background: var(--inv-ink);
	color: var(--inv-text-inv);
}

.wrk-body .work-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--inv-space-xl) var(--inv-space-lg);
}

.wrk-body .work-card.is-filtered-out {
	display: none;
}

/* Secondary link — only the films with a published case study get one (plans/07).
   Sits below the film link as its own anchor so the card click still plays. */
.wrk-body .work-card__case {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--inv-space-sm);
	font-family: var(--inv-font-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Ink, not gold: this is a small link on paper, where gold is ~2.2:1 and
	   fails WCAG AA. The arrow + gap animation carry the affordance (plans/12). */
	color: var(--inv-text);
	transition: gap var(--inv-duration-fast) var(--inv-ease), color var(--inv-duration-fast) var(--inv-ease);
}

.wrk-body .work-card__case:hover {
	gap: 0.7rem;
	color: var(--inv-signal-deep);
}

.wrk-body .work-card__case svg {
	width: 1em;
	height: 1em;
	stroke: currentColor;
	fill: none;
}

@media (min-width: 58rem) {
	.wrk-body .work-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Same staggered "gallery wall" offset as the homepage grid, repeating every
	   six cards so every row keeps the rhythm (see sections/work.css). */
	.wrk-body .work-grid .work-card:nth-child(6n + 2) {
		margin-top: var(--inv-space-xl);
	}

	.wrk-body .work-grid .work-card:nth-child(6n + 5) {
		margin-top: calc(var(--inv-space-xl) * -1);
	}

	/* Re-count over the visible cards while the category filter is active. */
	.wrk-body .work-grid .work-card:nth-child(6n + 1 of :not(.is-filtered-out)),
	.wrk-body .work-grid .work-card:nth-child(6n + 3 of :not(.is-filtered-out)),
	.wrk-body .work-grid .work-card:nth-child(6n + 4 of :not(.is-filtered-out)),
	.wrk-body .work-grid .work-card:nth-child(6n + 6 of :not(.is-filtered-out)) {
		margin-top: 0;
	}

	.wrk-body .work-grid .work-card:nth-child(6n + 2 of :not(.is-filtered-out)) {
		margin-top: var(--inv-space-xl);
	}

	.wrk-body .work-grid .work-card:nth-child(6n + 5 of :not(.is-filtered-out)) {
		margin-top: calc(var(--inv-space-xl) * -1);
	}
}

@media (max-width: 36rem) {
	.wrk-body .work-grid {
		grid-template-columns: 1fr;
	}
}

/* --- CTA (gold signal band) ----------------------------------------------- */

.wrk-cta {
	position: relative;
	overflow: hidden;
	padding-block: var(--inv-sect);
	background: var(--inv-signal);
	color: var(--inv-ink);
}

.wrk-cta__grain {
	position: absolute;
	inset: 0;
	background-image: var(--inv-grain);
	opacity: 0.13;
	pointer-events: none;
}

.wrk-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: var(--inv-space-md);
	text-align: center;
}

.wrk-cta .eyebrow {
	color: var(--inv-ink-2);
}

.wrk-cta .eyebrow::before {
	background: var(--inv-ink);
}

.wrk-cta__inner h2 {
	max-width: 20ch;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
}

.wrk-cta__actions {
	margin-top: var(--inv-space-xs);
}