/* ============================================================================
   CLIENT LOGO WALL — output of the [evm_clients] shortcode.

   A list of logos that wraps like a paragraph of text: each logo keeps its own
   width, they all share a height, and the row breaks wherever it runs out of
   room. Adding a client changes the layout the way adding a word changes a
   paragraph — nothing to re-tune.

   HOW THE SIZING WORKS, because there is almost nothing here and that is the
   point. Every SVG was exported from a Figma frame 80 units tall, with the
   logo optically scaled INSIDE that frame — a symbol sits larger than a
   wordmark's cap height, because otherwise it reads smaller. That judgement
   is baked into the geometry.

   So the only thing CSS does is set a height. Each SVG carries a viewBox and
   no width/height attributes, which gives it an intrinsic aspect ratio, and
   `width: auto` makes the browser derive each logo's width from its own
   proportions. No per-logo rules, now or ever.

   CHANGE THE WHOLE WALL'S SIZE WITH ONE NUMBER: --evm-client-logo-h. At 45px it renders a
   little over half the 80-unit export height. Raising it past 80px will soften the finer marks — the .com on
   Zappos, the trademark on Starbucks — since there is no more detail in the
   file above its native size.
   ============================================================================ */

.evm-clients {
	--evm-client-logo-h: 45px;
	--evm-client-gap-row: 34px;
	--evm-client-gap-col: 48px;

	/* Colour for every logo at once. The SVGs are drawn in `currentColor`,
	   so this one declaration paints all fourteen.

	   White matches how they were designed in Figma against the dark home
	   page. If the wall ever competes with the headline above it, muting
	   this — `var(--evm-ink-muted-light)` is a reasonable first try — is the
	   single change to make, and it needs nothing else touched. */
	color: var(--evm-ink-inverse);

	display: flex;
	flex-wrap: wrap;
	align-items: center;

	/* Row gap first, then column. They are deliberately different: logos
	   need more air beside each other than above and below, because their
	   own internal whitespace already separates the rows. */
	gap: var(--evm-client-gap-row) var(--evm-client-gap-col);

	/* It is a real <ul> for screen readers; these three remove the fact
	   visually. `list-style: none` alone leaves the indent behind. */
	list-style: none;
	margin: 0;
	padding: 0;
}

.evm-clients__item {
	/* Kinsey and Bootstrap both put margins on list items in places. */
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* `display: block` matters. An inline SVG sits on the text baseline by
   default, which leaves a few pixels of descender space under every logo and
   makes the row gaps look uneven for no visible reason. */
.evm-clients svg {
	display: block;
	height: var(--evm-client-logo-h);
	width: auto;
}


/* --- Phones ---------------------------------------------------------------

   Smaller logos and tighter gaps, at the same 767 breakpoint the rest of the
   type system uses. The wall reflows on its own — this only stops it becoming
   a very long single column of very large marks.

   The gaps come down proportionally rather than to a fixed small number, so
   the wall keeps the same rhythm rather than reading as a different
   component. */
@media screen and (max-width: 767px) {
	.evm-clients {
		--evm-client-logo-h: 26px;
		--evm-client-gap-row: 22px;
		--evm-client-gap-col: 27px;
	}
}