/*
 * Other business partners — a neutral logo band, intentionally isolated
 * from client proof (home-proof__logos / home-logo-wall live inside the
 * hero, not here). Every inner class is namespaced under home-partners__
 * and defined only in this file, so it never depends on the cascade order
 * of assets/css/pages/home.css.
 */
.home-partners__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--space-6) var(--space-8);
}

.home-partners__tile {
	display: flex;
}

.home-partners__link {
	display: grid;
	place-items: center;
	min-inline-size: var(--target-min);
	min-block-size: var(--target-min);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-control);
	color: inherit;
	text-decoration: none;
}

.home-partners__link--static {
	cursor: default;
}

.home-partners__frame {
	--partners-frame-h: 2.75rem;
	display: grid;
	place-items: center;
	block-size: var(--partners-frame-h);
	/* Horizontal breathing room so adjacent marks never touch. Volkswagen's and
	   SKNMD's assets are squares with a baked white background rather than
	   transparency, so their edges read as overlapping a neighbour even when the
	   box is correctly height-constrained. This is the honest fix for a
	   mixed-quality logo set; the real cure is a transparent asset if one is ever
	   published. overflow is the hard stop: whatever a future asset does, it
	   cannot bleed out of its own cell. */
	padding-inline: var(--space-2);
	overflow: hidden;
}

.home-partners__image {
	display: block;
	inline-size: auto;
	/*
	 * An absolute block-size, not `auto` + `max-block-size: 100%`. The percentage
	 * form left the two square marks rendering far taller than their 2.75rem
	 * frame at 375px, where Volkswagen's white square sat flush against the top
	 * of the Constructions Hub letters below it. Sizing by height alone — which
	 * is what the section wants anyway, so every mark reads optically uniform —
	 * takes percentage resolution out of the picture entirely.
	 */
	block-size: var(--partners-frame-h);
	/*
	 * The cap is a safety net for a pathologically wide future asset, not a
	 * normal constraint: it is sized above the widest real logo in this set
	 * (Orfeo, ~4.74:1) at each tier's frame height, so every real logo is
	 * limited by height alone. Do not shrink this without re-checking that ratio.
	 */
	max-inline-size: 15rem;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: opacity var(--dur-base) var(--ease-out);
}

a.home-partners__link:hover .home-partners__image,
a.home-partners__link:focus-visible .home-partners__image {
	opacity: 1;
}

.home-partners__wordmark {
	/*
	 * Kept at full opacity (unlike the grayscale/dimmed image logos): this
	 * renders as real text, so it needs to clear normal-text AA contrast on
	 * its own rather than rely on the logo/logotype exemption.
	 */
	font-weight: 600;
	font-size: var(--text-lg);
	letter-spacing: -0.01em;
	color: hsl(var(--muted-foreground));
	white-space: nowrap;
}

.home-section[data-surface="deep"] .home-partners__wordmark {
	color: hsl(var(--muted-warm));
}

@media (min-width: 768px) {
	.home-partners__grid {
		gap: var(--space-8) var(--space-10);
	}

	.home-partners__frame {
		--partners-frame-h: 3rem;
	}
}

@media (min-width: 1024px) {
	.home-partners__grid {
		gap: var(--space-10) var(--space-12);
	}

	.home-partners__frame {
		--partners-frame-h: 3.5rem;
	}

	.home-partners__image {
		max-inline-size: 17rem;
	}
}