/*
 * Sparta Brand Logos Section — 自动轮播 Marquee
 * Figma 节点: 178:211 区域（品牌 Logo 横排）
 * 设计基准: 1280px
 *
 * 原理：两份完整 logo 列表首尾拼接，translateX 从 0 → -50%
 * 循环播放，视觉上无缝。hover 暂停。
 */

.sparta-brand-logos {
	background-color: #ffffff;
	width: 100%;
	padding: 22px 0;
	overflow: hidden;  /* 遮住滚出去的部分 */
}

/* 不需要限制宽度，让 track 自由滚动 */
.sparta-brand-logos__container {
	width: 100%;
	overflow: hidden;
}

/* ── 滚动轨道 ── */
.sparta-brand-logos__track {
	display: flex;
	align-items: center;
	gap: 13px;
	width: max-content;          /* 自动撑开，不换行 */
	animation: sparta-marquee var(--brand-duration, 30s) linear infinite;
}

/* hover 暂停 */
.sparta-brand-logos:hover .sparta-brand-logos__track {
	animation-play-state: paused;
}

/* ── 单卡 ── */
.sparta-brand-logos__card {
	background-color: #f9f9f8;
	border-radius: 20px;
	width: 230px;
	height: 156px;
	flex: 0 0 230px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sparta-brand-logos__card img {
	max-width: 75%;
	max-height: 75%;
	object-fit: contain;
	display: block;
}

.sparta-brand-logos__card a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* ── 关键帧：向左平移整轨道的一半（= 一份原始列表宽度） ── */
@keyframes sparta-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ────────────────────────────────────────────────
   响应式
──────────────────────────────────────────────── */
@media (max-width: 767px) {
	.sparta-brand-logos {
		padding: 16px 0;
	}

	.sparta-brand-logos__card {
		width: 160px;
		flex: 0 0 160px;
		height: 108px;
	}

	.sparta-brand-logos__track {
		gap: 10px;
	}
}

@media (min-width: 768px) and (max-width: 1279px) {
	.sparta-brand-logos__card {
		width: 190px;
		flex: 0 0 190px;
		height: 130px;
	}
}