/**
 * JS Logo Row.
 *
 * The "FEATURED IN" strip: a small uppercase label over a wrapping row of
 * publication logos (Figma 21281:23713, logo frame 22889:4935).
 *
 * The design gives every logo its own height and lets it keep its natural
 * width — 24px for the Barclays wordmark, 50px for the square Fox News badge,
 * 20px for Uptrade — because a single cap height makes a boxed badge look tiny
 * next to a long wordmark. So this is a flex row that wraps on its own, on a
 * 32px gap, with each row's logos centred against each other; the per-logo
 * Height control carries the design's value and --js-logo-height is only the
 * fallback for a logo that has none.
 *
 * Deliberately not a fixed-column grid: equal columns force every logo into
 * the width of the narrowest cell, which clips the wide wordmarks and makes
 * the height control do nothing for them.
 *
 * Muting is greyscale plus held-back opacity — the design treats these as
 * credentials under the copy, not as artwork.
 *
 * No outer padding is baked in — the Elementor container owns the gutters.
 */

/* Fill the container even inside a flex parent that would shrink to content. */
.elementor-widget-js_logo_row {
	width: 100%;
}

.js-logo-row {
	--js-logo-align: left;
	--js-logo-column-gap: 32px;
	--js-logo-row-gap: 32px;
	--js-logo-height: 32px;
	--js-logo-opacity: 0.65;

	width: 100%;
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.js-logo-row *,
.js-logo-row *::before,
.js-logo-row *::after {
	box-sizing: border-box;
}

/* Body Md Semibold, uppercase. Measured off the Figma label (22889:4990),
   whose ink is 112x12: 16px/600 at 0.02em tracking reproduces both the width
   and the 11.6px cap height, where 14px/0.08em matches the width by accident
   and comes out a cap short. */
.js-logo-row__label {
	margin: 0 0 24px;
	color: var(--js-color-text, #475569);
	font-size: var(--js-font-body-md-size, 16px);
	font-weight: 600;
	line-height: var(--js-font-body-md-line, 24px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: var(--js-logo-align);
}

.js-logo-row__list {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--js-logo-column-gap);
	row-gap: var(--js-logo-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
	justify-content: var(--js-logo-align);
}

/* Below desktop the row stops wrapping on its own and becomes an even grid.
   Left to wrap, eight logos on a 704 column come out 7 + 1, and on a phone
   3 + 3 + 2 — both read as an accident rather than a layout. Four across at
   tablet is the same 4 + 4 the desktop column wraps to, and two on a phone.

   The docblock's objection to a grid stands for the desktop row, where equal
   columns would squeeze the wide wordmarks: here the narrowest cell is 152px
   at tablet and 155 at mobile, and the widest logo in the set is Barclays at
   140, so nothing is forced. max-width on the image is the guard if a wider
   one is ever added — with object-fit: contain it shrinks rather than clips. */
@media (max-width: 1024px) {
	.js-logo-row__list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		justify-items: center;
	}

	.js-logo-row__item {
		min-width: 0;
		justify-content: center;
	}

	.js-logo-row__img {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.js-logo-row__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Each logo takes the width its own height gives it, and never shrinks — that
   is what keeps the aspect ratio honest and lets the row wrap by itself. */
.js-logo-row__item {
	display: flex;
	flex: 0 0 auto;
}

.js-logo-row__link {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	text-decoration: none;
}

/* A definite height, not a max-height: an SVG wordmark with a viewBox but no
   width/height attribute has no intrinsic size to cap, and collapses to
   nothing under `height: auto`. The per-logo Height control overrides this
   through .elementor-repeater-item-<id>.

   No max-width: capping the width would letterbox the logo inside a box of the
   set height and silently undo it. A logo too wide for the row wraps instead. */
.js-logo-row__img {
	display: block;
	width: auto;
	height: var(--js-logo-height);
	object-fit: contain;
}

/* -------- Muted (the design's default) -------- */
.js-logo-row--muted .js-logo-row__img {
	filter: grayscale(1);
	opacity: var(--js-logo-opacity);
	transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Only a linked logo un-mutes — there is nothing to reward a hover on a plain
   image, and a hover state on one would suggest it is clickable. */
@media (hover: hover) {
	.js-logo-row--muted a.js-logo-row__link:hover .js-logo-row__img {
		filter: grayscale(0);
		opacity: 1;
	}
}

a.js-logo-row__link:focus-visible {
	outline: 2px solid var(--js-color-highlight, #b28b2c);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.js-logo-row--muted .js-logo-row__img {
		transition: none;
	}
}