/* ============================================================
   cap-why-reflow.css — 「为什么选择 Livepro · Why Us」独立通栏 1920×600
   浅灰 #F8F8F8 + 居中标题（品牌色短下划线）+ 8 张固定 280×158 卡片（4 列 × 2 行）
   卡片版式：上图标（42×42）+ 下方标题 / 描述（2 行截断）
   scoped：仅 capabilities-draft.html 引用，不污染全站 style.css
   v=20260906
============================================================ */

.cap-why-band{position:relative;background:#F8F8F8;overflow:hidden}
.cap-why-band__inner{
  max-width:1472px;margin:0 auto;
  padding:56px 32px 60px;
  min-height:600px;   /* 1920×600：内容不足时由 min-height 兜到 600 */
  display:flex;flex-direction:column;justify-content:center;
}

/* ---------- 居中 Headline + 品牌色短下划线 ---------- */
.cap-why-head{text-align:center;margin-bottom:32px}
.cap-why-eyebrow{
  display:inline-block;
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#DA1884;margin-bottom:12px;
}
.cap-why-title{
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700;line-height:1.2;
  color:#1a1a1a;margin:0;
}
.cap-why-title .accent{color:#DA1884}
.cap-why-title::after{
  content:'';display:block;
  width:56px;height:4px;border-radius:2px;background:#DA1884;
  margin:18px auto 0;
}

/* ---------- 8 张固定 280×158 卡片（4 列 × 2 行，居中，宽度不足自动降列） ---------- */
.cap-why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,280px);
  justify-content:center;
  gap:20px;
}
.cap-why-card{
  width:280px;height:158px;
  padding:18px 20px;
  background:#fff;
  border:1px solid #eee7ee;
  border-radius:14px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
/* 悬停浮动：上浮 + 边框转洋红 + 图标变洋红填充 + 柔和投影 */
.cap-why-card:hover{
  transform:translateY(-6px);
  border-color:rgba(218,24,132,.35);
  box-shadow:0 16px 34px rgba(26,26,26,.10);
}
.cap-why-card__ic{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:#F8F8F8;border:1px solid #eee7ee;color:#DA1884;
  transition:all .3s ease;
}
.cap-why-card__ic svg{width:22px;height:22px}
.cap-why-card:hover .cap-why-card__ic{background:#DA1884;color:#fff;border-color:#DA1884}
.cap-why-card h4{
  margin:12px 0 0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem;font-weight:700;color:#1a1a1a;line-height:1.3;
}
.cap-why-card p{
  margin:6px 0 0;
  font-size:.78rem;color:#6b6570;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- 响应式 ---------- */
@media(max-width:768px){
  .cap-why-band__inner{padding:52px 20px 60px;min-height:0}
  .cap-why-head{margin-bottom:28px}
  .cap-why-grid{gap:14px}
  .cap-why-card{width:100%;height:auto}
}
@media(prefers-reduced-motion:reduce){
  .cap-why-card,.cap-why-card:hover{transform:none;transition:none}
}