/* ============================================================
   博德赋能官网 · 产品服务体系页专属样式 (services.css)
   职责：
     1) 板块上下间距：hero 与卡片区、卡片区与页脚之间留出充足呼吸感
     2) 服务卡片网格布局（替换原内联 style）
     3) 服务卡片基础样式 + 统一悬浮态（抽取自原内联 style）
   加载顺序：在 components.css 之后，仅对 .container 追加垂直留白，
            不破坏全局横向收口（max-width / gutter 由 site-base.css 控制）。
   ============================================================ */

/* ---------- 板块间距：hero ↔ 卡片区 ↔ 页脚 ---------- */
/* 复用 .container 的横向 gutter，仅在此追加垂直留白，
   形成清晰的板块节奏，避免内容紧贴 hero 与页脚。 */
.services-section{
  padding-top: 56px;
  padding-bottom: 72px;
}

/* ---------- 服务卡片网格 ---------- */
.services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 32px;                 /* 原内联 28px → 32px，卡片间更透气 */
}

/* ---------- 服务卡片基础样式 ---------- */
.service-card{
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--border);   /* 强调色由每卡内联 border-top-color 覆盖 */
  border-radius: 16px;
  padding: 36px;                          /* 原内联 34px → 36px，内部更舒展 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
  transition: box-shadow .3s ease, transform .3s ease;
}

/* 统一悬浮态（替换原部分卡片内联 onmouseover/onmouseout）
   所有卡片一致上浮 + 加深阴影，视觉更稳定。 */
.service-card:hover{
  box-shadow: 0 12px 40px rgba(0, 0, 0, .1);
  transform: translateY(-4px);
}

/* ---------- 响应式：窄屏收紧间距与列数 ---------- */
@media (max-width: 1024px){
  .services-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px){
  .services-section{
    padding-top: 40px;
    padding-bottom: 56px;
  }
  .services-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .service-card{
    padding: 28px;
  }
}