/* Logo Strip — caption + infinite right-to-left marquee. */

/* Padding now driven by the shared .rw-section rule (default 120px) plus
   per-instance editor overrides via inline CSS vars. */

.rw-block-logo-strip .caption {
	font-family: var(--rw-font-text);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--rw-color-grey-01);
	text-align: center;
	margin: 0 auto var(--rw-space-lg);
	max-width: 68ch;
}

.rw-block-logo-strip .marquee {
	overflow: hidden;
	/* Fade the leading/trailing edges so the seam is invisible even on fast displays. */
	mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.rw-block-logo-strip .marquee-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--rw-space-lg);
	width: max-content;
	animation: rw-logo-marquee 60s linear infinite;
}

.rw-block-logo-strip .logo {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.rw-block-logo-strip .logo img {
	height: 3.75rem;
	width: auto;
	max-width: 10.25rem;
	object-fit: contain;
	/* Uniform grey tint across mixed-brand logos. */
	filter: grayscale(1);
}

/* Track is doubled in PHP; translating by -50% lands exactly on the clone,
   so the loop is visually indistinguishable. */
@keyframes rw-logo-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.rw-block-logo-strip .marquee-track {
		animation: none;
	}
}

@media (max-width: 767px) {
	.rw-block-logo-strip .caption {
		font-size: 0.75rem;
		line-height: 1.125rem;
	}
	.rw-block-logo-strip .logo img { height: 2rem; }
	.rw-block-logo-strip .marquee-track { gap: var(--rw-space-sm); }
}