/*
 * bpd-two logo wall (patterns/logo-wall.php on the Homepage, and the Who we are awards wall,
 * which renders the same band through the shared bpd_render_logo_wall() helper — see
 * inc/pattern-helpers.php). Marks render at their native exported size: since 2026-08-22 every
 * file is a uniform Figma slot export (home-logo-* sliced from logo-wall.svg at 311×96.4 per
 * cell, rendered via 312×97 img dimensions; who-logo-* 311x113), so no height
 * cap or auto-sizing override is needed — the earlier 48px max-height cap predated that swap
 * and was double-shrinking marks below their designed size.
 *
 * Loaded on exactly the two surfaces that render the band — is_front_page() and the who-we-are
 * page — via the wp_enqueue_scripts gate in functions.php, so it isn't sitewide.
 */

/*
 * Desktop (>=782px, the theme's standard breakpoint — WP core's own 781px mobile boundary):
 * each row is a true CSS grid instead of core's flex row — 4 even 1fr columns with the mark
 * centered in its column on both axes via justify-items/align-items on the grid itself (the
 * .wp-block-column children need no display override of their own). The row's 600px gap still
 * comes from the block's blockGap (applied via the generated wp-container-* class), which grid
 * honors exactly like flex, so spacing is unchanged. Specificity
 * (.wp-block-columns.bpd-logo-wall__row, 0-2-0) beats core's .is-layout-flex display rule
 * regardless of stylesheet order. Below 782px the rows keep core's stacked-columns behavior,
 * unchanged. The Who we are awards wall renders through the same helper and picks up the same
 * class when that page's content is rebuilt; until then it keeps the flex layout, which is
 * visually identical at desktop.
 *
 * Native sizing: the uniform Figma slot exports are 311–312px wide, but four 1fr tracks inside
 * the 1248px content width (minus three 24px gaps) leave only 294px per track, so core's
 * max-width:100% was clamping every mark ~6% under native even after the height cap came off.
 * Allowing each img its track PLUS one gap (still token-based) restores exact native rendering
 * at full desktop widths; the overflow is absorbed symmetrically by the surrounding gaps, and
 * on narrower viewports max-width clamps back down exactly like before.
 */
@media (min-width: 782px) {
	.wp-block-columns.bpd-logo-wall__row {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		justify-items: center;
		align-items: center;
	}

}

/* The bleed above is only safe once the page has gutter to absorb it. The content width caps at
   1248px, so below that the row spans the viewport edge to edge and a mark wider than its track
   pushes the page sideways instead — 24px of horizontal scroll anywhere from 782px up. A mark
   overhangs the row by 18px, so the row needs that much inset: 1248 + 2 x 18. Narrower viewports
   clamp to the track, a touch under native, which is what they did before the bleed existed. */
@media (min-width: 1284px) {
	.wp-block-columns.bpd-logo-wall__row .bpd-logo-wall__mark img {
		max-width: calc(100% + var(--wp--preset--spacing--600));
	}
}

/*
 * Mobile (<=781px): two 1fr tracks, the same grid technique as the desktop rule above. Marks keep
 * core's max-width:100%, so they clamp to track width — the exports are 311px and a track is about
 * half the viewport. Both surfaces this stylesheet loads on get the same treatment.
 */
@media (max-width: 781px) {
	.wp-block-columns.bpd-logo-wall__row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		align-items: center;
		gap: 0;
		margin-top: 0;

		/* Out to the viewport edges, so each track gains the band's padding back — every export
		   carries its own whitespace, so the marks still clear the sides. Widened and shifted
		   rather than given a negative margin: core's constrained-layout rule sets the auto
		   margins with !important, so a margin here cannot win. Space 400 because that is the
		   band's own horizontal padding below 782px, not the fluid section gutter. The band keeps
		   that padding, so the heading above is unaffected. */
		width: calc(100% + 2 * var(--wp--preset--spacing--400));
		position: relative;
		inset-inline-start: calc(var(--wp--preset--spacing--400) * -1);
	}

	.wp-block-columns.bpd-logo-wall__row .bpd-logo-wall__mark {
		overflow: hidden;
	}

	/* The block writes the export's native height inline, which does not follow the width once
	   max-width clamps it to a half-viewport track — the marks render at 1.85:1 against a native
	   3.24:1 and read as horizontally squeezed. */
	.wp-block-columns.bpd-logo-wall__row .bpd-logo-wall__mark img {
		height: auto;
		transform: scale(1.2);
		margin-top: var(--wp--preset--spacing--400);
	}
}