/* Sketch Suite — Partner Badges
   One still row of partner / accreditation lockups. No cards, no motion, no
   background per badge: the marks sit straight on the page, evenly spread, and
   a colour treatment flattens a mixed set into one tone.
*/

.skpb {
	box-sizing: border-box;
	/* Break out of any constrained content container so the section background
	   spans the full viewport width wherever it's used — same as the logo grid
	   this normally sits under. */
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: var(--skpb-pad-top, 8px) 0 var(--skpb-pad-bottom, 88px);
	background: var(--skpb-bg, #ffffff);
	color: var(--skpb-fg, #0b0b0b);
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	/* Belt-and-braces full bleed: paint the background out past the box so a
	   constrained parent's own background can't show at the left/right edges. */
	box-shadow: 0 0 0 100vmax var(--skpb-bg, #ffffff);
	clip-path: inset(0 -100vmax);
}
.skpb *,
.skpb *::before,
.skpb *::after { box-sizing: border-box; }

/* Same max-width and side padding as the logo grid and the case-study grid, so
   the badges land on the same left and right edge as the section above. */
.skpb__inner {
	max-width: var(--skpb-content-max, 1440px);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

.skpb--ruled .skpb__inner {
	border-top: 1px solid var(--skpb-rule, #e9e9e7);
	padding-top: clamp(28px, 4vw, 56px);
}

.skpb__label {
	margin: 0 0 clamp(18px, 2.4vw, 30px);
	text-align: center;
	font-size: clamp(12px, 1vw, 14px);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .55;
}

.skpb__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* The horizontal gap is a floor under `spread`, an exact figure under
	   `centre`. It gives back some room on narrow screens either way. */
	column-gap: clamp(28px, var(--skpb-gap, 72px), var(--skpb-gap, 72px));
	row-gap: var(--skpb-row-gap, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Spread pushes the first and last badge out to the container edges, which is
   what the design does. It only holds while everything fits on one line —
   once the row wraps, an orphan on the last line would sit hard left, so below
   the wrap point it falls back to centred. */
@media (min-width: 981px) {
	.skpb--spread .skpb__row { justify-content: space-between; }
}

.skpb__item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Never grow: a badge is its own natural width, and stretching them to fill
	   would undo the optical balance the height cap creates. */
	flex: 0 0 auto;
	max-width: var(--skpb-max-w, 260px);
}

.skpb__logo {
	display: block;
	width: auto;
	height: auto;
	/* One height for all of them is what makes a set of unlike lockups read as
	   a row. Scales down on smaller screens so six badges still fit two lines. */
	max-height: clamp(38px, 5vw, var(--skpb-h, 64px));
	max-width: 100%;
	object-fit: contain;
	opacity: var(--skpb-opacity, 1);
}

/* ── Colour treatments ─────────────────────────────────────────
   `mono` is the one the design uses: brightness(0) drives every opaque pixel to
   black while leaving the alpha channel alone, so a set of logos in six
   different brand colours prints as one flat black row. `grey` keeps the
   light and shade for sets that need the depth. */
.skpb--tone-grey .skpb__logo { filter: grayscale(1); }
.skpb--tone-mono .skpb__logo { filter: brightness(0); }

/* Wide lockups (a mark plus two or three words) are the ones that crowd first,
   so give every badge a little more room before the row wraps. */
@media (max-width: 980px) {
	.skpb__row { column-gap: clamp(24px, 5vw, 56px); }
}