/* ========================================================================================
 * logo-grid.css - .logo-grid, a responsive grid of partner/sponsor logo tiles (L2 layer).
 * Generic on purpose: any page that needs to show a row of outside brand logos (sponsors,
 * partners, press) can reuse it. Each tile is a fixed-height card so logos of very
 * different aspect ratios (a wide wordmark next to a square badge) still line up.
 * ======================================================================================== */

.logo-grid{
	display:grid;gap:var(--cd-4);
	grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
}
.logo-grid__item{
	display:flex;align-items:center;justify-content:center;
	height:128px;padding:var(--cd-4);
	background:var(--cd-ground-raised);border-radius:var(--cd-r-md);box-shadow:var(--cd-shadow-1);
	text-decoration:none;
	transition:transform .2s ease,box-shadow .2s ease;
}
a.logo-grid__item:hover,a.logo-grid__item:focus-visible{transform:translateY(-3px);box-shadow:var(--cd-shadow-2)}
.logo-grid__img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}

/* --sm: smaller tiles for a longer, unlinked row (badge-style logos with no CTA). */
.logo-grid--sm .logo-grid__item{height:96px;padding:var(--cd-3)}
.logo-grid--sm .logo-grid__img{max-height:48px}