/* Page 4 / Service 专用 */
.service-section{
  background:#fff;
  position:relative;
}

/* =========================
   大屏：字体更接近原图（细）
   ========================= */
.service-overlay .svc-title{
  position:absolute;
  left:5.5%;
  top:clamp(60px, 10vh, 110px); /* 与About标题同一高度 */
  font-size:clamp(26px, 3.2vw, 45px);
  font-weight:300;
  color:#222;
  letter-spacing:.01em;
  margin:0;
}

.svc-items{
  position:absolute;
  inset:0;
}

.svc-item{
  position:absolute;
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:#333;
  width:30%;
  line-height:1.45;
}

.svc-item .num{
  font-weight:700;
  font-size:clamp(20px, 2.2vw, 40px);
  color:#5b4a42;
  min-width:2.2em;
  text-align:right;
}

.svc-item .hd{
  font-weight:500;
  font-size:clamp(14px, 1.35vw, 20px);
}

.svc-item .sub{
  margin-top:4px;
  font-size:clamp(12px, 1.1vw, 14px);
  color:#555;
  font-weight:400;
}

/* ===== 桌面端位置（百分比，参考原图） ===== */
/* 整体上移与标题保持相对距离 */
.svc-item.i1{ left:10%; top:34%; width:36%; }
.svc-item.i2{ left:19%; top:47%; width:37%; }
.svc-item.i3{ left:28%; top:60%; width:36%; }
.svc-item.i4{ left:45%; top:22%; width:36%; }
.svc-item.i5{ left:53%; top:34%; width:32%; }
.svc-item.i6{ left:61%; top:47%; width:24%; }

.svc-footnote{
  position:absolute;
  right:4.5%;
  bottom:6%;
  width:46%;
  font-size:clamp(8px, .8vw, 12px);
  color:#777;
  text-align:right;
  line-height:1.35;
}



/* =========================
   小屏：隐藏斜线 + 2列3行严格对齐 grid
   - 彻底取消 i1..i6 的绝对定位影响
   ========================= */
@media (max-width: 900px){

  .bg {
        display: none;
  }

  .service-overlay{
    position:relative;
    padding-top:0; /* 移除额外padding，让标题控制间距 */
    padding-bottom:2vh; /* 减少底部padding以适应100vh */
    height: 100%; /* 占满容器高度 */
    display: flex;
    flex-direction: column;
  }

  .service-overlay .svc-title{
    position:relative;
    left:auto; top:auto;
    text-align:center;
    margin-top: 3vh; /* 减少顶部间距以适应100vh */
    margin-bottom: 2vh; /* 减少与下方卡片间距 */
    margin-left: auto;
    margin-right: auto;
    font-weight:300;
    flex-shrink: 0; /* 标题不收缩 */
  }

  /* grid 强控 2×3 */
  .svc-items{
    position:relative !important;
    inset:auto !important;

    width:94%;
    margin:0 auto;

    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;         /* 按行填充 */
    grid-auto-rows: minmax(auto, 1fr); /* 允许行高度自适应，但尽量等高 */
    gap:10px; /* 减少间距以适应100vh */
    align-items:stretch;
    flex: 1; /* 占据剩余空间 */
    overflow: hidden; /* 防止溢出 */
  }

  /* 关键：用 !important 干掉 i1..i6 的 top/left/width */
  .svc-item{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    height:100%;

    display:flex;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    padding:14px 14px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
  }

  .svc-item .num{
    font-size:clamp(18px, 5vw, 26px);
    min-width:2em;
    font-weight:700;
  }

  .svc-item .hd{
    font-weight:600;
    font-size:clamp(14px, 2.8vw, 18px);
  }

  .svc-item .sub{
    font-size:clamp(12px, 2.4vw, 15px);
  }

  /* 再小一点变 1 列 */
  @media (max-width: 560px){
    .svc-items{
      grid-template-columns: 1fr;
      grid-auto-rows:auto;
    }
    .svc-item{ height:auto; }
  }

  .svc-footnote{
    position:relative;
    width:94%;
    margin:1.5vh auto 0; /* 减少顶部间距以适应100vh */
    right:auto; bottom:auto;
    text-align:center;
    flex-shrink: 0; /* 脚注不收缩 */
  }
}