/* 目前首页用 base.css 已能实现90%效果，这里先空着也可 */


.about-section{
  padding: 60px 0 40px;
}

/* ✅ 用 grid 精准控制对齐关系 */
.about-wrap{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 520px;
  grid-template-rows: auto auto; /* 文字行 + 底部对齐行 */
  column-gap: 80px;
  row-gap: 40px;
}

/* 左侧文字：只占第一行 */
.about-text{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  padding: 40px 0 0 0;
}

/* 右侧图片：跨两行（决定底部基线） */
.about-card{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-end; /* 图片底部 */
}

.about-card img{
  width: 100%;
  display: block;
  border-radius: 6px;
}

/* ✅ about-deco：固定在 grid 底部行 */
.about-deco{
  grid-column: 1 / 2;
  grid-row: 2 / 3;   /* 关键：和右侧图片底部对齐 */
  width: 180px;
  height: 60px;
  background: url("../img/deco-mark.svg") no-repeat center/contain;
  justify-self: end;   /* ✅右对齐 */
  opacity: .9;
}

/* =========================
   About 模块 - 响应式上下排列
   ========================= */
@media (max-width: 900px){

  /* grid 变成单列 */
  .about-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 32px;
    padding: 0 20px;
  }

  /* 左侧文字 → 第一行 */
  .about-text{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding: 0;
  }

  /* 右侧图片 → 第二行 */
  .about-card{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-items: center;
  }

  /* 装饰图 → 第三行（居中或右对齐） */
  .about-deco{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    justify-self: center;  /* 如果你想右对齐，改成 end */
    margin-top: 8px;
  }
}


.service-section{
  padding: 60px 5px;
  background: #fff;
}

/* 4列布局 */
.service-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;

}

/* 单卡片 */
.service-item{
  text-align: center;
  padding: 50px 30px;
  margin: 5px 5px;
  background: #f2f2f2;           /* 默认浅灰 */
  transition: all .25s ease;
  cursor: pointer;
}

/* 最右边去掉边框 */
.service-item:last-child{
  border-right: none;
}

/* icon */
.service-icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border: 1px solid #bfbfbf;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}

.service-icon img{
  width: 36px;
  height: 36px;
  filter: grayscale(100%);
  transition: all .25s ease;
}

/* 标题 */
.service-item h3{
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin-bottom: 14px;
  transition: color .25s ease;
}

/* 描述 */
.service-item p{
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  transition: color .25s ease;
}

/* ✅ hover 深色效果（严格按设计图） */
.service-item:hover{
  background: #e0e0e0;  /* 深一度灰色 */
}

.service-item:hover .service-icon{
  border-color: #8c8c8c;
}

.service-item:hover .service-icon img{
  filter: grayscale(0%);
}

.service-item:hover h3{
  color: #000;
}

.service-item:hover p{
  color: #444;
}

/* 响应式 */
@media (max-width: 1024px){
  .service-grid{
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 520px){
  .service-grid{
    grid-template-columns: 1fr;
  }
}