/* 视频鼠标划上时整合优化版 */
.video-list {
  display: grid;
  gap: 20px;
  padding: 20px;
  max-width: 1440px;
  margin: 0 auto;
  /* 默认移动端单列 */
  grid-template-columns: 1fr;

  }

.video-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16/9;
  transition: transform 0.3s;
  margin-bottom: 10px; /* 必须大于标题高度 */
}

/* 桌面端三列布局 */
@media (min-width: 1024px) {
  .video-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 平板端两列布局 */
@media (min-width: 768px) and (max-width: 1023px) {
  .video-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 移动端优化 */
@media (max-width: 767px) {
  .video-list {
    padding: 15px;
    gap: 15px;
  }
}

/* 宽屏优化（1600px以上） */
@media (min-width: 1600px) {
  .video-list {
    grid-template-columns: repeat(3, minmax(400px, 1fr));
  }
}

/* 保持原有视频预览样式 */
.video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
}

/* 其他原有样式保持不变... */

/* 模态框样式 */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.video-modal.active {
  display: flex;
}

.modal-video {
  width: 80%;
  max-width: 1200px;
  aspect-ratio: 16/9;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .modal-video {
    width: 95%;
  }
  
  .video-item:hover .video-preview {
    opacity: 1 !important;
  }
}

/* 加载指示器 */
.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s linear infinite;
  display: none;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
  
  
}

/* 旧版Safari兼容 */
@supports not (aspect-ratio: 16/9) {
  .video-item {
    height: 0;
    padding-top: 56.25%;
  }
}


/* 修改视频列表容器 */
.video-list {
  display: grid;
  gap: 20px;
  padding: 20px;
  /* 关键修改：使用自动填充+最小宽度 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
  max-width: 1440px;
  margin: 0 auto;
}

/* 新增桌面端专用媒体查询 */
@media (min-width: 1024px) {
  .video-list {
    /* 强制显示3列 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 防止内容拉伸 */
    grid-auto-rows: minmax(180px, auto);
  }
}

/* 平板横屏适配 (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .video-list {
    /* 显示2列 */
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}

/* 手机端适配 (小于768px) */
@media (max-width: 767px) {
  .video-list {
    /* 单列布局 */
    grid-template-columns: minmax(280px, 1fr);
  }
}

/* 视频项保持原有样式 */
.video-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16/9;
  transition: transform 0.3s;
}

/* 宽屏优化（1600px以上） */
@media (min-width: 1600px) {
  .video-list {
    grid-template-columns: repeat(3, minmax(400px, 1fr));
  }
}

/* 检查实际生效的grid-template-columns */
.video-list {
  grid-template-columns: [...] !important;
}

/* 确保容器有足够宽度 */
.video-list {
  max-width: 1440px; /* 应随屏幕扩展 */
}

/* 添加宽度限制保护 */
.video-item {
  min-width: 300px; /* 与minmax值对应 */
  max-width: 100%;
}

/* 防止内容撑大容器 */
.video-item {
  overflow: hidden;
}
video {
  max-width: 100%;
  height: auto;
}

/* 保持间距比例 */
.video-list {
  gap: clamp(15px, 2vw, 30px);
  padding: clamp(15px, 2vw, 30px);
}

/* 添加移动端重置样式 */
@media (max-width: 767px) {
  .video-list {
    grid-auto-flow: row dense;
  }
}



/* 响应式调整 */
@media (max-width: 1024px) {
  .video-title {
    bottom: -30px;
    padding: 6px 10px;
  }
  .title-text {
    font-size: 13px;
  }
  .video-duration {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .video-title {
    bottom: -28px;
    padding: 5px 8px;
  }
  .title-text {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* 悬停效果优化 */
.video-item:hover .video-title {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.video-info {
  display: block; /* 默认值可不写 */
  margin-top: 8px;
}

.product_center-list 
{
height:880px;

}

@media (max-width: 768px) 
{
.product_center-list 
{
margin-bottom:-140px;
height:auto;
}