/**
 * css/components/worklist.css — Website 2.0 shared component library (#122)
 *
 * Selected-work hover rows (nudge on hover). None of the six reviewed
 * reference pages ship this exact row pattern (home.html's "work strip"
 * is a different, image-tile `.panel` component; tech-ai's `.worklist2`
 * is an unrelated slider-label list) — per docs/design/
 * 03-website-2.0-build-plan.md DECISION 1, "components.css is used only
 * for naming/structure guidance" where no reference page overrides it.
 * This file follows docs/Common Good website 2.0/tokens/components.css
 * `.cg-worklist`/`.cg-work` structure, values re-mapped onto this theme's
 * tokens (`--text-muted`/`--text-on-dark` do not exist here; substituted
 * with `--cg-muted`/`--cg-cream`).
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-worklist {
	border-top: var( --hairline ) solid var( --rule );
}

.cg-work {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 32px;
	padding: clamp( 20px, 2.4vw, 34px ) 0;
	border-bottom: var( --hairline ) solid var( --rule );
	color: inherit;
	text-decoration: none;
	transition: padding-left 0.3s ease, background-color 0.4s ease;
}

.cg-work:hover {
	padding-left: 18px;
	background-color: var( --box-hover-cream );
}

.cg-work__label {
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --cg-muted );
}

.cg-work__title {
	margin: 8px 0 0;
	font-family: var( --font-serif );
	font-size: clamp( 26px, 3.2vw, 44px );
	line-height: 1.05;
}

.cg-work__thumb {
	width: clamp( 120px, 16vw, 232px );
	height: clamp( 78px, 10vw, 150px );
	object-fit: cover;
	background: var( --rule );
	filter: saturate( 1.02 );
}

/* Dark-band variant. */
.cg-worklist--dark .cg-work__title {
	color: var( --cg-cream );
}

.cg-worklist--dark .cg-work:hover {
	background-color: var( --box-hover-ink );
}