/* ==============================
   纯线条箭头 → 一笔画、尖角合拢（完整可直接覆盖版）
============================== */

/* 定义整个优势展示区域的整体样式 */
#advantages {
  /* 设置区域上下内边距为60px，左右内边距为0 */
  padding: 60px 0;
}

/* 定义优势区域内容容器的样式，用于居中约束内容宽度 */
#advantages .container {
  /* 设置容器最大宽度为1200px，避免在大屏上过宽 */
  max-width: 1200px;
  /* 设置上下外边距为0，左右自动居中 */
  margin: 0 auto;
  /* 设置容器左右内边距为15px，适配小屏幕 */
  padding: 0 15px;
  /* 盒模型设置为border-box，内边距和边框不额外增加宽度 */
  box-sizing: border-box;
}

/* 定义优势区域大标题的样式 */
#advantages .section-title {
  /* 设置标题字体大小为32px */
  font-size: 32px;
  /* 设置标题字体粗细为700（加粗） */
  font-weight: 700;
  /* 设置标题文字颜色为深灰色 */
  color: #333;
  /* 设置标题文字水平居中对齐 */
  text-align: center;
  /* 设置标题底部外边距为15px */
  margin-bottom: 15px;
}

/* 定义优势区域副标题的样式 */
#advantages .section-subtitle {
  /* 设置副标题字体大小为16px */
  font-size: 16px;
  /* 设置副标题文字颜色为中灰色 */
  color: #666;
  /* 设置副标题文字水平居中对齐 */
  text-align: center;
  /* 设置副标题底部外边距为40px */
  margin-bottom: 40px;
}

/* 定义优势卡片网格布局容器样式 */
#advantages .advantages-grid {
  /* 使用flex弹性布局排列卡片 */
  display: flex;
  /* 设置卡片之间的间距为10px */
  gap: 10px;
  /* 设置flex子元素不自动换行 */
  flex-wrap: nowrap;
}

/* 定义单个优势卡片的基础样式 */
#advantages .advantage-card {
  /* 设置卡片在flex布局中占比1份 */
  flex: 1;
  /* 设置卡片固定高度 缩小一点 */
  height: 520px;
  /* 设置卡片背景颜色为浅灰色 */
  background: #f5f5f5;
  /* 设置卡片边框圆角为8px */
  border-radius: 8px;
  /* 设置卡片内边距：上40px，左右30px，下0px */
  padding: 40px 30px 0;
  /* 设置卡片内文字水平居中 */
  text-align: center;
  /* 设置卡片所有属性变化的过渡动画效果 */
  transition: all 0.7s cubic-bezier(0.22,1,0.22,1);
  /* 设置卡片内容溢出时隐藏 */
  overflow: hidden;
  /* 设置卡片为相对定位，作为子元素绝对定位的参考 */
  position: relative;
  /* 设置卡片不允许在flex布局中缩小 */
  flex-shrink: 1;
  /* 盒模型设置为border-box */
  box-sizing: border-box;
}

/* 定义卡片内部标题样式 */
#advantages .adv-title {
  /* 设置标题字体大小为22px */
  font-size: 22px;
  /* 设置标题字体粗细为600（半粗） */
  font-weight: 600;
  /* 设置标题文字颜色为深青色 */
  color: #2d3748;
  /* 设置标题外边距：上下0px，下12px */
  margin: 0 0 12px 0;
  /* 文字颜色过渡动画，和背景色变化同步 */
  transition: all 0.7s cubic-bezier(0.22,1,0.22,1);
}

/* 定义卡片内部内容文字样式 */
#advantages .adv-content {
  /* 设置内容字体大小为16px */
  font-size: 16px;
  /* 设置内容行高为1.6，提升可读性 */
  line-height: 1.6;
  /* 设置内容文字颜色为青灰色 */
  color: #4a5568;
  /* 设置内容外边距：上下0px，下22px，水平自动 */
  margin: 0 auto 22px;
  /* 设置内容高度自适应 */
  height: auto;
  /* 取消最小高度限制 */
  min-height: unset;
  /* 设置内容溢出时可见 */
  overflow: visible;
  /* 文字颜色过渡动画，和背景色变化同步 */
  transition: all 0.7s cubic-bezier(0.22,1,0.22,1);
}

/* 定义卡片底部图片区域容器样式 */
#advantages .advantage-image {
  /* 设置容器宽度为父容器100% */
  width: 100%;
  /* 设置容器高度为160px */
  height: 160px;
  /* 使用flex布局排列图片 */
  display: flex;
  /* 图片垂直对齐到底部 */
  align-items: flex-end;
  /* 图片水平居中 */
  justify-content: center;
  /* 设置为绝对定位 */
  position: absolute;
  /* 固定在父容器底部 */
  bottom: 0;
  /* 固定在父容器左侧 */
  left: 0;
  /* 设置底部内边距30px */
  padding-bottom: 30px;
  /* 盒模型设置为border-box */
  box-sizing: border-box;
}

/* 定义卡片内部图片样式 */
#advantages .advantage-image img {
  /* 设置图片最大高度为容器100% */
  max-height: 100%;
  /* 设置图片缩放过渡动画时长0.7秒 */
  transition: transform 0.7s ease;
}

/* 定义卡片鼠标悬浮时的样式 */
#advantages .advantage-card:hover {
  /* 悬浮时背景色改为深蓝色 #2E6FA8 */
  background-color: #2E6FA8;
  /* 悬浮时卡片flex占比变为1.5份，实现放大效果 */
  flex: 1.5;
}

/* 悬浮时：标题文字变白 + 向下靠近内容（间距变小） */
#advantages .advantage-card:hover .adv-title {
  color: #ffffff;
  margin-bottom: 6px;
}

/* 悬浮时：内容文字变白 */
#advantages .advantage-card:hover .adv-content {
  color: #ffffff;
}

/* 定义卡片悬浮时内部图片的样式 */
#advantages .advantage-card:hover .advantage-image img {
  /* 图片大幅度放大，允许超出范围显示 */
  transform: scale(1.5);
}

/* 定义文字轻微跳动的动画关键帧 → 改成高权重同款细腻小幅度效果 */
@keyframes textSoftJump {
  0%,100% { transform: translateX(0); }
  40%     { transform: translateX(-1px); }
  60%     { transform: translateX(1px); }
}

/* 定义卡片悬浮时标题和内容的动画 */
#advantages .advantage-card:hover .adv-title,
#advantages .advantage-card:hover .adv-content {
  /* 执行textSoftJump动画，时长0.7秒 */
  animation: textSoftJump 0.7s ease-in-out forwards;
}