/**
 * Client-logo strip ("trusted by").
 *
 * Used on the homepage (below the hero) and /studio/. A quiet paper-deep band
 * that steps between the ink hero and the paper work grid. Real client logos
 * are mixed formats, so they are unified with grayscale + mix-blend-mode:
 * multiply (knocks white/near-white source boxes out against the paper) at a
 * muted opacity; hover restores the true logo. Layout only — surfaces come
 * from the base cascade.
 */

.clients {
	background: var(--inv-paper-deep);
	color: var(--inv-text);
	padding: var(--inv-space-2xl) 0;
	border-top: 1px solid var(--inv-line);
	border-bottom: 1px solid var(--inv-line);
}

.clients__eyebrow {
	justify-content: center;
	margin: 0 0 var(--inv-space-xl);
	text-align: center;
}

.clients__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--inv-space-xl) var(--inv-space-lg);
	align-items: center;
	justify-items: center;
}

@media (min-width: 40rem) {
	.clients__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.clients__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--inv-space-lg);
	}
}

.clients__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 3rem;
}

.clients__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) contrast(0.9);
	mix-blend-mode: multiply;
	opacity: 0.6;
	transition: opacity var(--inv-duration) var(--inv-ease), filter var(--inv-duration) var(--inv-ease);
}

.clients__item:hover .clients__logo,
.clients__logo:focus-visible {
	filter: none;
	mix-blend-mode: normal;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.clients__logo {
		transition: none;
	}
}