/* 图片组拖拽展示样式 - 两组图片独立显示 */

/* 主容器 */
.static-images {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

/* 图片容器 - 支持水平拖拽 */
.static-images__container {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 10px 0;
}

.static-images__container::-webkit-scrollbar {
  display: none;
}

/* 图片项 */
.static-image {
  flex-shrink: 0;
  background: white;
  overflow: hidden;
}

.static-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* g1组图片样式 (480x480 / 300x300) */
.static-images__container[data-group="g1"] .static-image {
  width: 480px;
  height: 480px;
}

/* g2组图片样式 (106.667x480 / 66.667x300) */
.static-images__container[data-group="g2"] .static-image {
  width: 106.667px;
  height: 480px;
}

/* 响应式设计 */
@media (max-width: 600px) {
  /* g1组图片 - 小屏幕 */
  .static-images__container[data-group="g1"] .static-image {
    width: 300px;
    height: 300px;
  }
  
  /* g2组图片 - 小屏幕 */
  .static-images__container[data-group="g2"] .static-image {
    width: 66.667px;
    height: 300px;
  }
}

@media (max-width: 400px) {
  /* 更小的屏幕 */
  .static-images__container[data-group="g1"] .static-image {
    width: 250px;
    height: 250px;
  }
  
  .static-images__container[data-group="g2"] .static-image {
    width: 50px;
    height: 250px;
  }
}

/* 拖拽状态样式 */
.static-images__container:active {
  cursor: grabbing;
}

.static-images__container:hover {
  cursor: grab;
}

/* 图片间距统一为1px */
.static-images__container[data-group="g1"] {
  gap: 1px;
}

.static-images__container[data-group="g2"] {
  gap: 1px;
}

/* 左右箭头按钮 */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 64px;
  border: none;
  cursor: pointer;
  z-index: 5;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 30px;
  line-height: 64px;
}

.slider-nav--prev {
  left: 6px;
}

.slider-nav--next {
  right: 6px;
}

/* 容器定位 */
.static-images:first-child .static-images__container {
  margin-top: 0;
}

.static-images:last-child .static-images__container {
  margin-bottom: 0;
}

/* 禁用图片组原始滑动功能 */
.se-imageGroup-container {
  display: none !important;
}

.se-imageGroup-navigation {
  display: none !important;
}

.se-imageGroup-progress {
  display: none !important;
}