/* assets/css/sections/feature.css — 能力块：左文右图，第二块起交替反向。
   对应原站"产品方案 + 三大能力"两区，合并成同一个组件：它们的结构完全一样，
   差别只是文案与是否反向，没有理由写两套规则。 */

.feature{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:56px; align-items:center;
}
.feature + .feature{ margin-top:88px; }
/* 反向：媒体列移到左侧。用 order 而不是 direction:rtl——后者会把标点也翻过去 */
.feature--reverse .feature-media{ order:-1; }

.feature-copy .feature-no{
  font-family:var(--serif); font-weight:900; font-size:34px; line-height:1;
  color:var(--line-dark); font-variant-numeric:lining-nums;
}
.feature-copy h3{ margin-top:10px; font-size:27px; font-weight:700; }
.feature-copy > p{ margin-top:16px; font-size:16px; color:var(--muted); max-width:34em; }
.feature-copy .pts{ margin-top:22px; }
.feature-copy .pts li{ font-size:15px; margin-top:10px; }
.feature-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:28px; }

/* 媒体列：示意面板 + 说明小字 */
.feature-media{ position:relative; }
.feature-media > figcaption{
  margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center;
}

@media (max-width:1020px){
  .feature{ grid-template-columns:1fr; gap:32px; }
  .feature--reverse .feature-media{ order:0; }
  .feature + .feature{ margin-top:64px; }
  .feature-copy h3{ font-size:23px; }
}