/**
 * "Our Members" full-bleed logo marquee.
 * Loaded only on pages that use the arpl-fse/members pattern (see functions.php).
 *
 * @package arpl-fse
 */

/* Full-bleed band with a blueprint grid drawn in CSS (no image needed).
   Colors sampled from the design: faint off-white base, neutral light-gray
   gridlines. Tune via the two custom properties. */
.arpl-members {
	--arpl-grid-bg: #f5f5f5;
	--arpl-grid-line: #e7e8ea;
	overflow: hidden;
	padding-block: clamp( 1.5rem, 4vw, 2.5rem );
	background-color: var( --arpl-grid-bg );
	background-image:
		linear-gradient( var( --arpl-grid-line ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --arpl-grid-line ) 1px, transparent 1px );
	background-size: 32px 32px;
}

/* The flex row of logos. Forced single-line and sized to its content so it can
   run wider than the viewport (ends clip against the band's overflow:hidden). */
.arpl-members .arpl-members__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	align-items: center;
	gap: clamp( 2.5rem, 6vw, 5rem );
}

/* JS adds .is-marquee once it has cloned the set, so the loop is seamless and
   there's no animation (or duplicate logos) when JS is unavailable. */
.arpl-members .arpl-members__track.is-marquee {
	animation: arpl-marquee 40s linear infinite;
	will-change: transform;
}

.arpl-members:hover .arpl-members__track.is-marquee,
.arpl-members:focus-within .arpl-members__track.is-marquee {
	animation-play-state: paused;
}

/* Logos are media-library core/image blocks added inside the block. */
.arpl-members__track .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
}

.arpl-members__track .wp-block-image img {
	display: block;
	width: auto;
	height: 48px;
}

@keyframes arpl-marquee {
	from {
		transform: translateX( 0 );
	}
	to {
		/* Track holds two copies (original + JS clone); -50% = one full set. */
		transform: translateX( -50% );
	}
}

/* No motion: static, wrapped, centered row. */
@media ( prefers-reduced-motion: reduce ) {
	.arpl-members .arpl-members__track {
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
		row-gap: 2rem;
	}
}