/* 四宫格容器：加宽间距+适配更大卡片 */
#main {
  width: 90%; /* 缩减两侧留白，让卡片更宽 */
  max-width: 1500px; /* 提升最大宽度，容纳更大卡片 */
  margin: 6vh auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(25px, 3vw, 40px); /* 加大间距，突出单个板块 */
  padding: clamp(20px, 2.5vw, 30px);
}

/* 卡片优化：放大尺寸+强化内边距+聚焦内容 */
.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(25px, 3vw, 35px); /* 大幅增加内边距，放大核心内容区域 */
  background-color: #fff;
  border-radius: 20px; /* 增大圆角，更显柔和高级 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* 轻微加深阴影，提升立体感 */
  color: #333;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Hover 效果强化：放大+阴影加深，引导视线聚焦 */
.grid-item:hover {
  transform: translateY(-8px) scale(1.02); /* 轻微放大卡片，聚焦视线 */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* 阴影加深，突出选中状态 */
}

/* 标题优化：加粗+放大+文字阴影，强化核心信息 */
.grid-item h3 {
  font-size: clamp(18px, 2vw, 22px); /* 放大字体 */
  color: #222;
  font-weight: 700; /* 加粗标题，突出核心 */
  margin: 0 0 clamp(15px, 1.5vw, 20px) 0;
  line-height: 1.3;
  position: relative;
  z-index: 2; /* 确保标题在最上层 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); /* 轻微文字阴影，提升质感 */
}

/* 预览图质感优化：增大圆角+轻微锐化+柔和阴影+背景渐变，高级不夸张 */
.grid-item img {
  width: 100%;
  height: 240px; /* 增高图片区域，提升视觉占比 */
  object-fit: contain;
  background: linear-gradient(
    145deg,
    #f8f8f8,
    #ffffff
  ); /* 轻微渐变背景，替代纯色 */
  border-radius: 18px; /* 增大圆角，与卡片风格统一 */
  margin-bottom: clamp(15px, 1.5vw, 20px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); /* 图片添加轻微阴影，分离背景 */
  filter: contrast(1.05) saturate(1.03) sharpen(0.05); /* 轻微锐化+对比度，提升清晰度 */
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

/* Hover 图片效果：进一步提升质感，不夸张 */
.grid-item:hover img {
  filter: contrast(1.1) saturate(1.05) sharpen(0.1); /* 轻微强化滤镜 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 图片阴影加深 */
}

/* 卖点文案优化：放大字体+文字阴影+提升对比度，增强可读性 */
.grid-item p {
  font-size: clamp(13px, 1.2vw, 15px); /* 放大文案 */
  color: #555; /* 加深文字颜色，提升可读性 */
  margin: 0;
  line-height: 1.6;
  font-weight: 500; /* 轻微加粗，突出卖点 */
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); /* 极淡文字阴影，增加层次感 */
}

/* 移动端适配：保持大卡片+优化触控体验 */
@media (max-width: 768px) {
  #main {
    width: 95%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: clamp(20px, 2.5vw, 25px);
  }

  .grid-item {
    padding: clamp(20px, 2vw, 25px);
  }

  .grid-item img {
    height: 200px;
    border-radius: 15px; /* 移动端微调圆角 */
  }

  /* 移动端取消hover放大，避免误触 */
  .grid-item:hover {
    transform: translateY(-8px) scale(1);
  }
}