/**
 * Logo marquee.
 *
 * Measured from the design (Home, 390 → 1920): a full-bleed band with a 1px violet line above
 * and below, 28px of padding and the footer's fluid side margin. From 768px it is one row —
 * the label first (at the start), the logos filling the rest; below that, a column. Each logo
 * is a 128 × 36 box; the gap between logos and the space between label and logos grow with
 * the screen.
 *
 * The track is laid out physically left to right (`direction: ltr`) and drifts left, as in the
 * design — its only content is images, so nothing in it needs the page's direction.
 */

.acini-logo-marquee {
	display: flex;
	flex-direction: column;
	gap: var(--acini-space-md);
	padding-block: 2.8rem;
	padding-inline: var(--acini-gutter-footer);
	color: var(--acini-text);
	border-block: 1px solid var(--acini-accent);
}

.acini-logo-marquee__label {
	margin: 0;
	font-size: var(--acini-text-sm);
	line-height: var(--acini-leading-normal);
	white-space: nowrap;
}

/* LTR here too: in an RTL viewport the overflowing track is pinned at its right end, so the
   window starts near the track's end and the drift runs past the last logo into blank. */
.acini-logo-marquee__viewport {
	min-inline-size: 0;
	block-size: 3.6rem;
	overflow: hidden;
	direction: ltr;
}

.acini-logo-marquee__track {
	display: flex;
	inline-size: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	direction: ltr;
	animation: acini-logo-marquee calc(var(--acini-logo-seconds, 28) * 1s) linear infinite;
}

.acini-logo-marquee__item {
	flex: none;
	inline-size: 12.8rem;
	block-size: 3.6rem;
	margin-inline-end: clamp(4rem, 5vw, 7.2rem);
}

.acini-logo-marquee__logo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	/* Grayscale only: brightness(0) blacks out every opaque pixel, so a logo uploaded on a
	   white (non-transparent) background became a solid black box. */
	filter: grayscale(1);
	opacity: 0.9;
}

@keyframes acini-logo-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (min-width: 48em) {
	.acini-logo-marquee {
		flex-direction: row;
		align-items: center;
		gap: min(3vw, 4rem);
	}

	.acini-logo-marquee__viewport {
		flex: 1 1 0;
	}
}

/* Reduced motion: the logos stop and become a strip to scroll; the repeats are dropped. */
@media (prefers-reduced-motion: reduce) {
	.acini-logo-marquee__viewport {
		block-size: auto; /* room for a scrollbar under the logos */
		overflow-x: auto;
		direction: inherit; /* a still strip starts at the page's start side */
	}

	.acini-logo-marquee__track {
		animation: none;
	}

	.acini-logo-marquee__item--clone {
		display: none;
	}
}