/**
 * css/components/work-strip.css — Website 2.0 shared component library (#65)
 *
 * Full-bleed 3-up campaign strip — no documented pattern before Home;
 * on-system (hard edges, ink background, tracked ALL-CAPS label, the
 * global 0.4s hover fade family). No bottom border: the next band's
 * colour change is the divider, per the bordered-box law. Reference:
 * home.html `.work-strip`/`.panel`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-work-strip {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	height: clamp( 320px, 34vw, 468px );
}

.cg-panel {
	position: relative;
	display: block;
	overflow: hidden;
	background: var( --surface-dark );
}

.cg-panel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier( 0.16, 1, 0.3, 1 );
	will-change: transform;
}

.cg-panel:hover img {
	transform: scale( 1.06 );
}

.cg-panel::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 160px;
	background: linear-gradient( to top, rgba( 14, 14, 12, 0.82 ), rgba( 14, 14, 12, 0 ) );
}

.cg-panel__tag {
	position: absolute;
	z-index: 2;
	left: 36px;
	bottom: 30px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --cg-cream );
}

@media ( max-width: 1024px ) {
	.cg-work-strip {
		grid-template-columns: 1fr;
		height: auto;
	}

	.cg-panel {
		height: clamp( 260px, 52vw, 360px );
	}
}