/*
 * pm-partners — the partners strip (WO-21, frame 55:452).
 *
 * Source frame: docs/design/frames/21-partners.json, node 55:452 — one row
 * of partner logos directly under the hero, space-between on Blush Linen.
 *
 * Compiled to assets/css/components/partners.css by src/build-tokens.mjs,
 * which substitutes the breakpoint markers (a comment holding `@bp <name>`)
 * with the pixel value from tokens/tokens.json. Never type a breakpoint
 * width here. Every colour is a --pm-color-* token; no hex value appears in
 * this file.
 *
 * The frame's layer tree holds two hairlines above and below the row, both
 * HIDDEN (21-partners.json#measured.lines) — so none is styled here. The
 * strip renders without rules.
 */

.pm-partners {
	/* The scaffold stylesheet (style.css) constrains body to a centred 72rem
	   column with --pm-space-8 padding; the section escapes that box with the
	   same full-bleed technique as the header (header.css) and the intro
	   (intro.css), because the frame is a full-width band — 1440 wide.
	   Revisit with the scaffold body styles when the layout epic replaces
	   them. */
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	/* 21-partners.json#measured.padding — 32 block, 96 sides. */
	padding: var(--pm-space-8) var(--pm-space-24);
	/* The frame's background is Blush Linen — the surface token, the same
	   surface the intro below it sits on. */
	background-color: var(--pm-color-surface);
}

/*
 * 21-partners.json#measured.row — one row, space-between, padding 16 block.
 * The row is the list itself: the logos are the list items, so the ul
 * carries the row layout and resets its list chrome.
 */
.pm-partners__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: var(--pm-space-4) 0;
	list-style: none;
}

/*
 * The with-header variant (WO-36, 36-architects.json#partners — the
 * architects page): the optional centred section header above the row, 32
 * between them (--pm-space-8), and 96 top and bottom padding
 * (--pm-space-24) replacing the bare strip's 32. The side padding is
 * untouched. The homepage instance carries no modifier class and is
 * pixel-identical to WO-21's.
 *
 * (0,2,0) on purpose: the tablet rule below re-pads `.pm-partners`
 * (0,1,0) — the modifier must keep its 96 block padding below tablet
 * regardless of source order.
 */
.pm-partners.pm-partners--with-header {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-8);
	padding-top: var(--pm-space-24);
	padding-bottom: var(--pm-space-24);
}

/*
 * 21-partners.json#measured.row.logo_box, read through the extract's own
 * contradiction note: the frame's 137 x 14.453 boxes are the placeholder
 * wordmark's own ratio, and real logos will differ — so the box is built as
 * a fixed-height 40px row with object-fit contain and max-width 137, per
 * the frame's rhythm. 40px and 137px are measured values with no tokens
 * (the space scale steps 32/48 around 40), so they are typed here citing
 * the extract — the same technique as the button's 14px label and the
 * header's 80px bar. width: auto keeps the attachment's width/height
 * attributes from fighting the box.
 *
 * Specificity — MISTAKES.md §C15: Elementor's frontend stylesheet ships
 * `.elementor img { height: auto; max-width: 100% }` at (0,1,1), which
 * beats a bare `.pm-partners__logo` (0,1,0) and renders real logos of
 * other proportions at natural size (WO-21 AC 2, failed in test). The
 * descendant selector below is (0,2,0) and wins; keep any future img
 * rule in this file at (0,2,0) or stronger.
 */
.pm-partners .pm-partners__logo {
	display: block;
	width: auto;
	height: 40px;
	max-width: 137px;
	object-fit: contain;
}

/*
 * WO-21 AC 3 — below tablet the row wraps, centred, gap 32
 * (--pm-space-8). The gap replaces space-between's distribution: a wrapped
 * line under space-between would spread its last logos edge to edge, which
 * reads as broken. The line count is width-dependent — two lines at the
 * tablet width, three at 375px with five logos — the mechanism (wrap,
 * centre, gap) is what the frame specifies.
 */
@media (max-width: 768px) {
	.pm-partners__row {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--pm-space-8);
	}
}

/*
 * TODO(open-question): the extract measures one 1440 frame only
 * (21-partners.json#measured.padding.sides = 96) — MISTAKES.md §C7. The
 * step below is developer judgement, not design: below tablet the side
 * padding becomes 24px (--pm-space-6), the same step the intro takes
 * (intro.css), so the two sections' edges stay aligned down the page.
 * Owner: the designer, with the missing mobile design.
 */
@media (max-width: 768px) {
	.pm-partners {
		padding: var(--pm-space-8) var(--pm-space-6);
	}
}