/*
 * bpd-two case-study awards band (patterns/case-study-awards-band.php).
 * Figma: BPD Design System node 34809:1058 — desktop "One+" 34809:1051, desktop "One" 34809:1052,
 * mobile 34809:1056. Redesigned 2026-08-28; supersedes the text-left / logo-right Banner-family
 * layout the pattern previously used.
 *
 * Enqueued off core/columns (functions.php) so it loads only on pages that actually have a Columns
 * block, and core loads it into the editor canvas too — the band looks the same in both surfaces.
 *
 * Every rule is scoped behind .bpd-awards-band, so riding along with core/columns is inert wherever
 * the band isn't used.
 *
 * NO MEDIA QUERIES HERE, deliberately. Figma gives two anchors (375 and 1440) with the awards
 * side by side at one and stacked at the other. That is exactly what auto-fit + minmax() expresses:
 * the track floor is the Figma logo slot's own width (--wp--custom--awards--column-min, 189px), so
 * the row fits as many awards as the container can hold at that floor and stacks below it. At the
 * 1248px content width three awards land as equal thirds; at 343px only one track fits, so they
 * stack. auto-fit (not auto-fill) collapses the empty tracks, which is what lets one or two awards
 * still span the full width rather than hugging the left edge.
 */

/*
 * The 0-2-0 selector is load-bearing: core generates a .wp-container-* rule (0-1-0) carrying the
 * Columns block's blockGap, and that rule is emitted inline, so a plain .bpd-awards-band__grid
 * would lose to it on source order. Same technique, and same reason, as logo-wall.css.
 *
 * Asymmetric gap replaces what would otherwise be a breakpoint: 40px (space/1000) between awards on
 * a row per the desktop frame, 52px (space/1300) between rows per the mobile frame. Rows only exist
 * once the awards have stacked, so each Figma value applies exactly where the design shows it.
 */
.wp-block-columns.bpd-awards-band__grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, var(--wp--custom--awards--column-min)), 1fr)
	);
	gap: var(--wp--preset--spacing--1300) var(--wp--preset--spacing--1000);
	align-items: start;
	max-width: 100%;
}

/*
 * Figma draws the logo in a fixed 64px slot with the mark sitting on its baseline, which is what
 * keeps the captions aligned across a row of differently-proportioned client logos. min-height
 * reserves the slot; flex-end drops the mark to the bottom of it.
 *
 * Flexbox rather than subgrid here on purpose: subgrid would inherit the parent's 52px row-gap
 * between the logo and caption rows, and the parent's row-gap is already spoken for by the stacked
 * mobile spacing above. One axis, one child — flex is the honest tool.
 */
.bpd-awards-band .bpd-awards-band__logo {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: var(--wp--custom--awards--logo-height);
	margin: 0;
}

/*
 * Capped, not fixed. max-height + auto width lets any client upload land in the slot at its own
 * aspect ratio; object-fit keeps it undistorted if the editor's resize handles set an explicit
 * width (an inline style, which beats width:auto — object-fit is what stops that combination from
 * stretching the mark).
 */
.bpd-awards-band .bpd-awards-band__logo img {
	max-height: var(--wp--custom--awards--logo-height);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left bottom;
}

/*
 * The eHealthcare Leadership Awards mark uses a compact 1.93:1 lockup, so the shared 64px cap
 * makes it read substantially smaller than the wider marks alongside it. The same upload appears
 * on the Northern Light and Zotec case studies. Scope the larger existing award token to bands
 * containing that asset, and raise every logo slot in those bands with it so captions stay aligned.
 */
.bpd-awards-band:has(.bpd-awards-band__logo img[src*="/ehla-logo-white-"]) .bpd-awards-band__logo {
	min-height: var(--wp--custom--awards--logo-height-solo);
}

.bpd-awards-band .bpd-awards-band__logo img[src*="/ehla-logo-white-"] {
	max-height: var(--wp--custom--awards--logo-height-solo);
}

/*
 * Figma's "One" variant (34809:1052): a single award centres itself and takes the larger 78px logo
 * slot. Driven off :only-child so the client gets the right layout by deleting columns — there is
 * no variant control to find.
 */
.bpd-awards-band .bpd-awards-band__item:only-child {
	text-align: center;
}

/*
 * The variant's 24px (space/600) logo-to-caption gap, up from the 12px (space/300) the columns
 * carry as their blockGap. It has to be written as a margin, not a row-gap: a column's default
 * layout is flow, so core serialises blockGap to `margin-block-start` on the following sibling and
 * a `row-gap` here is simply inert (measured as such by tests/verify-awards-band.mjs before this
 * rule existed — the reason that script reads the real figure-to-paragraph distance rather than
 * trusting getComputedStyle().rowGap). 0-3-0 beats core's generated .wp-container-* rule.
 */
.bpd-awards-band .bpd-awards-band__item:only-child > * + * {
	margin-block-start: var(--wp--preset--spacing--600);
}

.bpd-awards-band .bpd-awards-band__item:only-child .bpd-awards-band__logo {
	justify-content: center;
	min-height: var(--wp--custom--awards--logo-height-solo);
}

.bpd-awards-band .bpd-awards-band__item:only-child .bpd-awards-band__logo img {
	max-height: var(--wp--custom--awards--logo-height-solo);
	object-position: center bottom;
}

/*
 * Honour the core/image Align left / center / right control. The logo figure is the flex container
 * and the <img> its only child, so core's alignment classes (which set float / margin-auto on the
 * figure) are inert here — they have to be re-expressed as justify-content on the flex container,
 * with object-position kept in step for the case where the editor's resize handles have pinned an
 * explicit width and object-fit is doing the placement. 0-3-0 so an explicit choice beats both the
 * flex-start default above and the :only-child centring.
 */
.bpd-awards-band .bpd-awards-band__logo.alignleft,
.bpd-awards-band .bpd-awards-band__logo.alignright {
	/*
	 * Core's .alignleft / .alignright float the figure, which pulls the caption up beside it. The
	 * band wants the logo positioned within its own full-width row and the caption always on the
	 * row below, so the float is cancelled and the placement done with justify-content instead.
	 */
	float: none;
}

.bpd-awards-band .bpd-awards-band__logo.alignleft {
	justify-content: flex-start;
}

.bpd-awards-band .bpd-awards-band__logo.alignleft img {
	object-position: left bottom;
}

.bpd-awards-band .bpd-awards-band__logo.aligncenter {
	justify-content: center;
}

.bpd-awards-band .bpd-awards-band__logo.aligncenter img {
	object-position: center bottom;
}

.bpd-awards-band .bpd-awards-band__logo.alignright {
	justify-content: flex-end;
}

.bpd-awards-band .bpd-awards-band__logo.alignright img {
	object-position: right bottom;
}

/*
 * Once the grid has stacked, each logo owns a full-width row and the editor's left/right choice
 * stops meaning anything: it positions a mark within a multi-column row, so on one column it just
 * pins the mark to an edge of the screen. Centre every logo below the cutoff whatever its desktop
 * alignment, keeping object-position in step for marks the editor has pinned to an explicit width.
 *
 * This replaced a rule scoped to one band by its eHealthcare.png upload, which fixed the page that
 * was reported and left the same defect standing on the others.
 *
 * The .alignleft / .alignright selectors are repeated to match the 0-3-0 specificity of the desktop
 * rules above; the bare .bpd-awards-band__logo covers marks carrying no alignment class, which
 * otherwise fall back to flex-start.
 *
 * A media query rather than minmax(): this is a behavioural switch, not a sizing one — the same
 * declaration has to mean "centre" below the cutoff and "obey the editor" above it. 781px is the
 * cutoff the rest of the theme breaks at.
 */
@media (max-width: 781px) {
	.bpd-awards-band .bpd-awards-band__logo,
	.bpd-awards-band .bpd-awards-band__logo.alignleft,
	.bpd-awards-band .bpd-awards-band__logo.alignright {
		justify-content: center;
		/*
		 * The float reset above leaves core's own 2em alignment margin in place, which survives as
		 * a 32px inline margin and shifts the centred mark half that off centre — the last 16px of
		 * the misalignment this rule exists to remove.
		 */
		margin-inline: 0;
	}

	.bpd-awards-band .bpd-awards-band__logo img,
	.bpd-awards-band .bpd-awards-band__logo.alignleft img,
	.bpd-awards-band .bpd-awards-band__logo.alignright img {
		object-position: center bottom;
	}
}