/* ========== 视频集锦模块核心样式 ========== */
/* 外层容器重置 */
.case {
    background: #fff;
    margin: 0;
}

/* 视频容器样式：适配父级，清除默认样式 */
.case .case-content .video-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    position: relative; /* 为蒙版定位做准备 */
    border-radius: 8px; /* 与卡片圆角统一 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* 自适应视频核心样式：覆盖原有固定尺寸，保证比例 */
.case .responsive-video {
    width: 100% !important;
    height: auto !important;
    max-height: 300px; /* 限制视频最大高度 */
    display: block;
    object-fit: cover; /* 视频画面适配容器 */
}

/* 列表项重置：清除默认列表样式（适配HTML中的.case-item） */
.case .case-item {
    list-style: none;
    margin: 0;
    cursor: pointer; /* 整体可点击 */
	margin-left: 0px;	
}

/* 视频标题样式（匹配HTML中的.p） */
.case .case-item .p {
    margin: 10px 10px -10px 10px;
    font-size: 16px;
    color: #333;
  /*  line-height: 1.5; */
}

/* 蒙版层：覆盖视频上方 */
.team1__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: all 0.3s ease;
    z-index: 10; /* 确保在视频上方 */
    border-radius: 8px; /* 与容器圆角统一 */
}

/* 播放按钮样式：居中圆形按钮 */
.team1__play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.team1__play-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #000;
    margin-left: 3px; /* 按钮三角居中微调 */
}

/* ========== 响应式适配 ========== */
/* 手机端适配（768px以下） */
@media (max-width: 768px) {
    .case .responsive-video {
        max-height: 200px; /* 缩小手机端视频高度 */
    }
    .team1__play-btn {
        width: 40px; /* 手机端按钮缩小 */
        height: 40px;
    }
    .team1__play-btn::after {
        border-width: 8px 0 8px 14px; /* 三角同步缩小 */
    }
}

/* ========== 悬停交互效果 ========== */
.case .case-item:hover .video-container {
    transform: scale(1.02); /* 容器轻微放大 */
    box-shadow: 0 4px 16px rgba(0,0,0,0.2); /* 增强阴影 */
}
.case .case-item:hover .team1__mask {
    background-color: rgba(0,0,0,0.2); /* 蒙版透明度降低 */
}
.case .case-item:hover .team1__play-btn {
    transform: scale(1.1); /* 按钮放大 */
    background-color: #fff; /* 按钮纯白 */
}
.case .case-item:hover .responsive-video {
    transform: scale(1.05); /* 视频画面轻微放大 */
}

/* 查看更多按钮样式（补充适配HTML中的.case-more） */

/* 全局基础重置（可选，避免默认样式干扰） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
  color: #333;
  background-color: #f8f9fa;
}

/* 服务列表容器整体样式 */
.service1 {
  width: 100%;
  padding: 5px 0; /* 上下留白 */
  background-color: #fff; /* 背景色 */
}

/* 内容包裹层（居中+限制最大宽度） */
.service1 .service1-content {
  width: 90%;
  max-width: 1200px; /* 大屏最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

/* 列表网格布局 */
.service1-content ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自适应列数，最小350px一列 */
  gap: 30px; /* 列/行间距 */
}

/* 每个列表项的链接（包裹li，保证点击区域完整） */
.service1-content a {
  display: block; /* 块级元素，占满父容器 */
  height: 100%;
  color: #333;
  transition: all 0.3s ease; /* 过渡动画 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 裁剪超出部分（比如图片圆角） */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.17); /* 轻微阴影 */
}

/* 悬停效果：上浮+加深阴影 */
.service1-content a:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* 列表项样式 */
.service1-content li {
  height: 100%;
  display: flex;
  flex-direction: column; /* 垂直排列内容 */
}

/* 图片样式 */
.service1-content li img {
  width: 100%;
  height: 220px; /* 固定图片高度 */
  object-fit: cover; /* 图片等比裁剪，不拉伸 */
  border-bottom: 1px solid #eee; /* 图片底部分隔线 */
}

/* 标题样式 */
.service1-content li h3 {
  font-size: 16px;
  font-weight: 600;
  padding: 5px 5px 5px; /* 内边距 */
  line-height: 1.4;
}

/* 描述文本样式 */
.service1-content li p {
  font-size: 14px;
  color: #666; /* 浅灰色文字 */
  line-height: 1.6;
  padding: 0 20px 20px; /* 内边距 */
  flex: 1; /* 占满剩余空间，保证标题和文本对齐 */
}

/* 移动端适配（屏幕小于768px时） */
@media (max-width: 768px) {
  .service1 {
    padding: 40px 0;
  }
  .service1-content ul {
    grid-template-columns: 1fr; /* 移动端单列显示 */
    gap: 20px;
  }
  .service1-content li img {
    height: 180px; /* 移动端图片高度减小 */
  }
  .service1-content li h3 {
    font-size: 16px;
    padding: 15px 15px 8px;
  }
  .service1-content li p {
    font-size: 13px;
    padding: 0 15px 15px;
  }
}