/* ────────────────────────────────────────────────────────────
   03-logo-collection.css — sponsor/partner logo row
   Section uses: .logo-collection
   Gallery via core/gallery (has-nested-images, columns-N).
   Light-bg only — no bg variation overrides needed.
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.logo-collection {
	padding: var(--spacing-4xl) var(--spacing-md);
}

/* ── Inner: max-width container ───────────────────────────── */
.logo-collection__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
}

/* ── Section heading + intro ─────────────────────────────── */
.logo-collection h2 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-heading);
	text-align: center;
	margin: 0 0 var(--spacing-sm) 0;
}

.logo-collection__intro {
	max-width: var(--content-max-prose);
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: var(--text-body-xl);
	line-height: var(--line-height-loose);
	color: var(--color-text-body);
	text-align: center;
}

/* ── Logo gallery ─────────────────────────────────────────── */
/* Each gallery cell becomes a flex container so the image
   is centered both axes regardless of its original aspect ratio. */
.logo-collection .wp-block-gallery {
	margin-top: var(--spacing-xl);
}

.logo-collection .wp-block-gallery .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
}

/* Scale to fit the fixed-height cell; never crop or overflow. */
.logo-collection .wp-block-gallery .wp-block-image img {
	object-fit: contain;
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Editor: Gutenberg wraps each nested image block in a .wp-block div,
   so replicate the fixed cell on that wrapper too. */
.editor-styles-wrapper .logo-collection .wp-block-gallery > .wp-block {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
}

/* ── Center row when 2 logos or fewer ────────────────────────
   Core gallery block gives every figure flex-grow:1, so with a
   fixed columns count (6) but only 1–2 images, the leftover row
   space stretches them apart toward the edges. Neutralize the
   grow and center the (now intrinsically-sized) row instead. */
.logo-collection .wp-block-gallery.has-nested-images:has(> figure.wp-block-image:nth-child(-n+3):last-child) {
	justify-content: center;
}

.logo-collection .wp-block-gallery.has-nested-images:has(> figure.wp-block-image:nth-child(-n+3):last-child) > figure.wp-block-image {
	flex-grow: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	.logo-collection {
		padding: var(--spacing-2xl) var(--spacing-sm);
	}
}