/* Sakete Our Partner 组件样式 */

.sakete-our-partner {
  --partner-gap: 1.25rem; /* 行间距和列间距 */
  width: 100%;
  padding: var(--spacing-7xl, 7.5rem) 0;
  padding-bottom: 6.5625rem;
  background: linear-gradient(90deg, #036cb3 0%, #02497d 100%);
  position: relative;
  overflow: hidden;
}

/* ========== 不同 lightMode 样式示例 ========== */
/* 浅色模式示例 (light) */
.sakete-our-partner[data-light-mode='light'] {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.35) 0%,
    #fff 50%,
    rgba(255, 255, 255, 0.35) 100%
  );
}

/* 标题和描述区域 */
.sakete-our-partner-header {
  text-align: center;
  margin-bottom: var(--spacing-7xl, 7.5rem);
}

.sakete-our-partner-title {
  font-family: var(
    --title-font-family,
    var(--font-family, 'Open Sans', sans-serif)
  );
  font-size: var(--font-size-h2, 2.5rem);
  font-weight: var(--font-weight-xl, 700);
  line-height: 150%;
  color: var(--text-color-light, #ffffff);
  /* margin: 0 0 var(--spacing-xl, 1.25rem) 0; */
  margin-bottom: 0.625rem;
}

.sakete-our-partner[data-light-mode='light'] .sakete-our-partner-title {
  color: var(--text-color, #282624);
}

.sakete-our-partner-description {
  font-family: var(--font-family, 'Open Sans', sans-serif);
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-base, 400);
  line-height: 162.5%;
  color: var(--text-color-light, #ffffff);
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}

.sakete-our-partner[data-light-mode='light'] .sakete-our-partner-description {
  color: var(--text-color, #4b5563);
}

/* 内容区域 - 两行展示 */
.sakete-our-partner-content {
  display: flex;
  flex-direction: column;
  gap: var(--partner-gap, 1.25rem);
  position: relative;
  overflow: hidden;
  /* 遮罩效果：两边柔化，中间清晰 */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 40%,
    black 60%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 40%,
    black 60%,
    transparent 100%
  );
}

/* 走马灯容器 */
.sakete-our-partner-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* 第一行走马灯 - 正向滚动 */
.sakete-our-partner-marquee-row-1 .sakete-our-partner-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--partner-gap, 1.25rem);
  width: fit-content;
  animation: sakete-marquee-scroll-left 30s linear infinite;
  will-change: transform;
}

/* 第二行走马灯 - 反向滚动 */
.sakete-our-partner-marquee-row-2 .sakete-our-partner-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--partner-gap, 1.25rem);
  width: fit-content;
  animation: sakete-marquee-scroll-right 30s linear infinite;
  will-change: transform;
}

/* 走马灯正向滚动动画 */
@keyframes sakete-marquee-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 走马灯反向滚动动画 */
@keyframes sakete-marquee-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* 合作伙伴项 */
.sakete-our-partner-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(16.25rem, 200px);
  aspect-ratio: 2.5 / 1;
}

/* 合作伙伴卡片 */
.sakete-our-partner-item-card {
  width: 100%;
  height: 100%;
  background: var(--bg-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 合作伙伴 Logo */
.sakete-our-partner-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .sakete-our-partner-item {
    width: max(12rem, 160px);
  }

  .sakete-our-partner-marquee-track {
    gap: 0.75rem;
    animation-duration: 25s;
  }
}

@media screen and (max-width: 576px) {
  .sakete-our-partner-item {
    width: max(10rem, 140px);
  }

  .sakete-our-partner-marquee-track {
    gap: 0.5rem;
    animation-duration: 20s;
  }
}