/**
 * Image Marquee Widget Styles
 * 图片无限循环轮播
 */

.crgems-image-marquee-widget {
	width: 100%;
	overflow: hidden;
}

.crgems-marquee-viewport {
	width: 100%;
	overflow: hidden;
	position: relative;
	container-type: inline-size;
}

.crgems-marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
	--crgems-marquee-duration: 30s;
}

.crgems-marquee-track.crgems-marquee-direction-left {
	animation: crgems-marquee-left var(--crgems-marquee-duration) linear infinite;
}

.crgems-marquee-track.crgems-marquee-direction-right {
	animation: crgems-marquee-right var(--crgems-marquee-duration) linear infinite;
}

.crgems-marquee-track.crgems-marquee-pause-hover:hover {
	animation-play-state: paused;
}

@keyframes crgems-marquee-left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes crgems-marquee-right {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

.crgems-marquee-group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--crgems-marquee-gap, 24px);
	padding-right: var(--crgems-marquee-separator-gap, 12px);
}

.crgems-marquee-image {
	flex: 0 0 auto;
	position: relative;
	/* 默认（auto 模式）：按「显示图片数量」把每行恰好分成 N 张；
	   若用户在「自定义宽度」模式下设置 --crgems-marquee-image-width，则该值覆盖下列公式。 */
	width: var(
		--crgems-marquee-image-width,
		calc(
			(
				100cqw - (var(--crgems-marquee-visible-count, 4) - 1) * var(--crgems-marquee-gap, 24px)
			) / var(--crgems-marquee-visible-count, 4)
		)
	);
	max-height: var(--crgems-marquee-image-height, 180px);
}

.crgems-marquee-image img,
.crgems-marquee-image picture {
	display: block;
	max-width: none;
	width: 100%;
	height: var(--crgems-marquee-image-height, 180px);
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.crgems-marquee-link {
	display: block;
	line-height: 0;
}

.crgems-marquee-link:hover img,
.crgems-marquee-link:focus-visible img {
	transform: scale(1.04);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.crgems-marquee-track {
		animation: none;
	}
}