/* 容器使用 Grid 布局 */
.vp-feature-grid {
  display: grid;
  grid-template-columns: 1fr; /* 默认1列 */
  gap: 20px; /* 卡片之间的间距，包括行和列 */
  padding: 20px;
  max-width: 1200px; /* 最大宽度限制，居中 */
  margin: 0 auto;
}

/* 卡片样式 - 默认状态 */
.vp-feature-item {
  /* 保持基础视觉样式 */
  background-color: transparent; /* 透明背景 */
  border: 1px solid transparent; /* 使用透明边框占位，避免悬停时边框出现导致布局跳动 */
  border-radius: 0; /* 无圆角 */
  padding: 20px; /* 保持与悬停状态相同的 padding，避免 padding 变化导致内容移动 */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* 初始无阴影 */
  transition: all 0.3s ease; /* 为所有悬停效果添加过渡 */
  text-align: center;
  /* 可选：设置最小高度，让卡片更规整 */
  /* min-height: 200px; */
}

/* 卡片样式 - 悬停状态 */
.vp-feature-item:hover {
  background-color: #ffffff; /* 悬停时白色背景 */
  border-color: #e0e0e0; /* 悬停时显示边框 */
  border-radius: 8px; /* 悬停时圆角 */
  /* padding 保持不变，与默认状态相同 */
  /* 使用 box-shadow 模拟浮起效果，避免 translateY 导致的布局跳动 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), /* 主阴影 */
              0 0 0 4px rgba(0, 0, 0, 0.05); /* 模拟浮起的外发光/阴影扩散，可选 */
  /* transform: translateY(-2px); 移除 translateY */
}

/* 标题样式 */
.vp-feature-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 10px 0;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  /* 确保标题在悬停时不会因为父元素变化而跳动 */
  transition: color 0.3s ease; /* 如果需要，可以为颜色添加过渡 */
}
.vp-feature-item:hover .vp-feature-title {
  color: #2c3e50; /* 悬停时标题颜色稍微加深，增加视觉反馈 */
}

/* 图标样式 */
.font-icon {
  margin-bottom: 8px;
  font-size: 2em;
  color: #42b983;
  display: block;
  transition: color 0.3s ease; /* 为图标颜色添加过渡 */
}
.vp-feature-item:hover .font-icon {
  color: #35495e; /* 悬停时图标颜色变化，增加反馈 */
}

/* 描述文字样式 */
.vp-feature-details {
  margin: 0;
  font-size: 0.95em;
  color: #666;
  line-height: 1.6;
  transition: color 0.3s ease; /* 为文字颜色添加过渡 */
}
.vp-feature-item:hover .vp-feature-details {
  color: #444; /* 悬停时文字颜色变化，增加反馈 */
}

/* 响应式设计 */
@media (min-width: 768px) {
.vp-feature-grid {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.vp-feature-grid {
    grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1280px) {
.vp-feature-grid {
    grid-template-columns: repeat(4, 1fr);
}
}