/**
 * LOA Client Roster — UI-03 (desktop) + UI-04 (mobile, media block at
 * end). Same markup serves both; mobile is override-only, matching
 * the hero's pattern. Consumes tokens.css exclusively.
 *
 * SPEC DEVIATION HISTORY:
 *   - Doc originally called for icon-only logo marks at 40% opacity
 *     with a saturation filter (grayscale) plus a stroke to keep dark
 *     marks visible. Scrapped 2026-07-23: several client logos (FFP,
 *     PFIA, North Star) have the company name baked into the mark
 *     itself, so cropping to "icon only" would fabricate a variant of
 *     their logo that doesn't exist.
 *   - 2026-07-23 replacement treatment (full-color logos on individual
 *     translucent cards) was itself replaced 2026-07-25 (Byrne): no
 *     more per-logo card boxes or name captions — the section reads
 *     as one continuous bar with a divider line above/below, logos
 *     sit directly on it (most now swapped to white-text variants for
 *     contrast), with a shared subtle drop-shadow for depth.
 *
 * Doc also specifies mobile as text-only (no icon assets). Per
 * Byrne's 2026-07-22 decision, UI-03 + UI-04 were built together as
 * one version — logo images render at both viewports.
 */

.loa-roster {
	background: var(--loa-roster-bg);
	border-top: 1px solid var(--loa-roster-border);
	border-bottom: 1px solid var(--loa-roster-border);
	padding-block: var(--loa-roster-pad-y);
	padding-inline: var(--loa-roster-pad-x);
	box-sizing: border-box;
}

.loa-roster__inner {
	max-width: var(--loa-max-width);
	margin-inline: auto;
	padding-inline: var(--loa-roster-inner-pad-x);
	box-sizing: border-box;
}

.loa-roster__eyebrow {
	margin: 0;
	text-align: center;
	font-family: var(--loa-font-body);
	font-size: var(--loa-roster-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--loa-roster-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-roster-eyebrow-color);
}

.loa-roster__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--loa-roster-gap);
	margin-top: var(--loa-roster-row-gap-top);
	list-style: none;
	padding: 0;
}

/* Byrne 2026-07-25: no more per-item card box — item is just a
 * flex container centering the logo directly on the bar. */
.loa-roster__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	max-width: 240px;
}

.loa-roster__logo {
	display: block;
	max-width: 100%;
	max-height: var(--loa-roster-logo-h);
	width: auto;
	height: auto;
	object-fit: contain;
	/* Reduced-opacity shadow (Byrne 2026-07-25) — drop-shadow follows
	 * the logo's alpha shape (unlike box-shadow, which would draw a
	 * rectangle around the transparent PNG bounding box). */
	filter: drop-shadow(var(--loa-roster-logo-shadow));
}

/* ==================================================================
 * UI-04 — Mobile client roster. Byrne decisions 2026-07-22/23/25:
 *   - Build alongside desktop as one version (shared markup)
 *   - Horizontal scroll, no pagination, hidden scrollbar per doc
 *   - No eyebrow on mobile per doc
 *   - No card box or name caption (2026-07-25), same as desktop —
 *     logo just scales down via --loa-roster-m-logo-h
 * ================================================================== */
@media (max-width: 1024px) {
	.loa-roster {
		background: var(--loa-roster-bg-mobile);
		border-top: none;
		border-bottom: none;
		padding-block: var(--loa-roster-m-pad-y);
		padding-inline: 0;
	}

	.loa-roster__inner {
		max-width: none;
		padding-inline: 0;
	}

	/* Eyebrow omitted on mobile per doc. */
	.loa-roster__eyebrow {
		display: none;
	}

	/* Horizontal scroll row. Doc specifies 20px LEFT padding only
	 * (content scrolls off the right edge); matching right padding
	 * added so the last card doesn't sit flush against the viewport
	 * edge at rest — reasonable interim, doc doesn't address it. */
	.loa-roster__row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		gap: var(--loa-roster-m-gap);
		margin-top: 0;
		padding-left: var(--loa-roster-m-pad-left);
		padding-right: var(--loa-roster-m-pad-left);
		/* Hidden scrollbar per doc — cross-browser approach TBD with
		 * Tyler per QA notes; this covers Firefox + modern WebKit. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.loa-roster__row::-webkit-scrollbar {
		display: none;
	}

	.loa-roster__item {
		flex: 0 0 auto;
		max-width: none;
		width: auto;
	}

	.loa-roster__logo {
		max-height: var(--loa-roster-m-logo-h);
	}
}