/* =========================================================================
   Trusted-by logo strip — template-parts/logos.php.
   The one strip on the homepage, the Sectors hub and product pages (it was
   three near-copies, and only the homepage's linked to the case studies).
   Self-contained: its own container, type, image and heading resets, so it
   renders the same whichever page stylesheet surrounds it.
   Mobile-first, min-width media queries only.
   ========================================================================= */

.logo-strip {
	--ls-gutter: 20px;

	background: #f5f5f5;
	padding: 40px 0 44px;
	font-family: 'FFDINStd', sans-serif;
	line-height: 1.5;
}

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

.logo-strip__container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px, as the page containers */
	margin: 0 auto;
	padding-left: var(--ls-gutter);
	padding-right: var(--ls-gutter);
}

.logo-strip__heading {
	color: #181d46;
	font-size: 19px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 28px;
}

/* WYSIWYG output: neutralise whatever tag the admin used so it inherits the
   wrapper's type styles. */
.logo-strip .logo-strip__heading :is(h1, h2, h3, h4, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* Mobile: continuous marquee — the track holds two copies of the logo row
   and slides by half its own width for a seamless loop. */
.logo-strip__viewport { overflow: hidden; }

.logo-strip__track {
	display: flex;
	width: max-content;
	animation: logo-strip-marquee 22s linear infinite;
}

@keyframes logo-strip-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.logo-strip__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 44px;
	padding-right: 44px;
}

.logo-strip__item { display: flex; align-items: center; flex: 0 0 auto; }

/* Linked logos: opt out of the theme's global a:hover fade and give the
   link a hover state of its own. */
.logo-strip a.logo-strip__item { transition: opacity 0.2s ease; }
.logo-strip a.logo-strip__item:hover { opacity: 0.65; }

/* `width: auto` undoes framework.css's global `img { width: 100% }`. */
.logo-strip .logo-strip__item img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 30px;
}

@media (prefers-reduced-motion: reduce) {
	.logo-strip__track { animation: none; flex-wrap: wrap; width: auto; }
	.logo-strip__row { flex-wrap: wrap; justify-content: center; padding-right: 0; }
	.logo-strip__row--clone { display: none; }
}

@media (min-width: 900px) {
	.logo-strip { --ls-gutter: 40px; padding: 56px 0 64px; }
	.logo-strip__heading { font-size: 22px; margin-bottom: 44px; }

	.logo-strip__track { animation: none; width: auto; display: block; }
	.logo-strip__row--clone { display: none; }
	.logo-strip__row {
		justify-content: space-between;
		gap: 40px;
		padding-right: 0;
	}
	.logo-strip .logo-strip__item img { max-height: 40px; }
}