/* ===================================
   Marketing partners: a grid of partner logos that drifts as a marquee. Script: script.mjs.
=================================== */

.client_logos_wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.client_logos {
	display: grid;
	grid-template-columns: repeat(var(--cols, 14), min(11.9vw, 228px));
	width: max-content;
	will-change: transform;
	position: relative;
}
.client_logos::after {
	content: "";
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 1;
}
.client_logos::before {
	content: "";
	width: 10px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background-color: #fff;
	z-index: 1;
}

.client_logos .client_logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: -1px;
	border: 1px solid #ccc;
	padding: 10px;
	border-left-color: transparent;
	border-top-color: transparent;
	position: relative;
}
.client_logos .client_logo img {
	position: absolute;
	max-height: 91px;
	width: auto;
}

.client_logos .client_logo::before {
	content: "";
	display: block;
	padding-top: 69.17%; /* (166/240)*100 */
}

@media screen and (max-width: 768px) {
	.client_logos {
		grid-template-columns: repeat(var(--cols, 7), 18.9vw);
	}
	.client_logos .client_logo img {
		max-width: 90%;
	}
}
/* Wider than 1920px: let the logo strip run to the screen edges, as it does on smaller screens,
   instead of being cut off at the content container. */
@media screen and (min-width: 1921px) {
	.client_logos_wrapper {
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}
}

/* Marquee (blocks/marketing-partners/script.mjs and assets/js/marquee.mjs): the logo grid repeats
   side by side and drifts. */
.client_logos_wrapper.is-marquee .mq-track {
	display: flex;
	width: max-content;
	will-change: transform;
}
.client_logos_wrapper.is-marquee .client_logos {
	transform: none !important;
}
.client_logos_wrapper.is-marquee .client_logos::before {
	content: none; /* the white edge strip would show at every seam */
}
@media screen and (max-width: 768px) {
	/* phones: bigger cells */
	.client_logos_wrapper.is-marquee .client_logos {
		grid-template-columns: repeat(var(--cols, 7), 34vw);
	}
	.client_logos_wrapper.is-marquee .client_logos .client_logo img {
		max-width: 78%;
		max-height: 60px;
	}
}

/* entrance (blocks/marketing-partners/script.mjs): the cells on screen resolve out of a blur, left to right */
.client_logos_wrapper.mq-enter .client_logo {
	opacity: 0;
	filter: blur(8px);
	transform: translate3d(0, 16px, 0);
}
.client_logos_wrapper.mq-enter.is-in .client_logo {
	opacity: 1;
	filter: none;
	transform: none;
	transition:
		opacity 900ms var(--ease-out),
		filter 1000ms var(--ease-out),
		transform 1100ms var(--ease-out);
	transition-delay: var(--lw, 0ms);
}
/* cells off screen when the strip enters: visible at once, no blur (QA 2026-10-28) */
.client_logos_wrapper.mq-enter .client_logo.mq-skip {
	opacity: 1;
	filter: none;
	transform: none;
	transition: none;
}
@media (prefers-reduced-motion: reduce) {
	.client_logos_wrapper.mq-enter .client_logo {
		opacity: 1;
		filter: none;
		transform: none;
	}
}