/* =========================================================================
   Partner Logo Marquee — pure CSS infinite logo slider
   Method: two sibling tracks, each min-width:100% with justify-content:
   space-around, animated translateX(calc(-100% - gap)). This is the robust
   best-practice pattern (fills the row at any width, no whitespace, seamless
   loop). GPU-accelerated (transform only, no JS).
   ========================================================================= */

.plm {
	--plm-gap: 6rem;        /* space between logos */
	display: flex;
	overflow: hidden;
	gap: var(--plm-gap);
	position: relative;
	/* card container */
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
	padding: 2.25rem 1.5rem;
}

/* plain variant: no card, transparent — use for dark/colored sections */
.plm.plm-plain {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 1.25rem 0;
}

.plm-title {
	text-align: center;
	margin: 0 0 1.25rem;
}

/* --- each track = one full set, at least as wide as the row ------------ */
.plm-track {
	flex-shrink: 0;             /* never squish                    */
	min-width: 100%;            /* always fill the row             */
	display: flex;
	align-items: center;
	justify-content: space-around; /* spread out when narrow        */
	gap: var(--plm-gap);        /* min spacing when overflowing    */
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	animation: plm-scroll var(--plm-speed, 45s) linear infinite;
}

.plm-item {
	flex-shrink: 0;
	list-style: none;
}

.plm-item img {
	display: block;
	height: var(--plm-h, 50px);
	width: auto;
	max-width: 40vw;            /* safety on tiny screens */
	object-fit: contain;
}

/* --- seamless loop ------------------------------------------------------
   The duplicate track sits one --plm-gap to the right of the first; shifting
   by (100% + gap) brings it exactly to the start, so -100% alone would leave
   a visible misalignment. */
@keyframes plm-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - var(--plm-gap))); }
}

/* --- pause on hover (default on; disabled via .plm-no-pause) ----------- */
.plm:hover .plm-track {
	animation-play-state: paused;
}
.plm.plm-no-pause:hover .plm-track {
	animation-play-state: running;
}

/* --- reverse direction -------------------------------------------------- */
.plm-reverse .plm-track {
	animation-direction: reverse;
}

/* --- grayscale -> color on hover ---------------------------------------- */
.plm-gray .plm-item img {
	filter: grayscale(1);
	opacity: .7;
	transition: filter .35s ease, opacity .35s ease;
}
.plm-gray .plm-item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 640px) {
	.plm {
		--plm-gap: 3rem;
	}
	.plm-item img {
		max-width: 30vw;
	}
}

/* --- accessibility: respect reduced-motion users ------------------------ */
@media (prefers-reduced-motion: reduce) {
	.plm-track {
		animation: none;
	}
	.plm {
		overflow-x: auto;   /* still reachable by scrolling */
	}
}