/* ==========================================================================
   业务优势：优势说明卡 + 对应数字指标合成一块
   --------------------------------------------------------------------------
   页面上「3 张封面卡 + 3 个数字卡」本是两个相邻网格，视觉上割裂、还叠了
   两张与内容无关的项目实景照。这里把它们拼成一组：上半张说明、下半块指标，
   列宽和间距逐列对齐，同一条竖线从标题落到数字。
   · 只作用于「卡片网格紧接指标网格」这一种结构（目前仅首页业务优势）
   · 不改文字，指标注释与上方标题重复，故隐藏
   ========================================================================== */

.grid.grid-3:has(+ .stats) { align-items: stretch; }

/* 上半：说明卡，白底、去照片、文字回到深色 */
.grid.grid-3:has(+ .stats) > .card {
  background: #FFFFFF;
  border: 1px solid #D9E4D2;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 30px 28px 24px;
  color: var(--ink);
}
.grid.grid-3:has(+ .stats) > .card .card-bg,
.grid.grid-3:has(+ .stats) > .card::before { display: none; }
.grid.grid-3:has(+ .stats) > .card .icon-badge {
  background: #EAF4DF; border-color: #CFE4B6; color: #2A7A55;
  backdrop-filter: none; box-shadow: none;
}
.grid.grid-3:has(+ .stats) > .card h3 {
  color: var(--ink); text-shadow: none; font-size: 18px; margin-bottom: 8px;
}
.grid.grid-3:has(+ .stats) > .card p,
.grid.grid-3:has(+ .stats) > .card .card-sum,
.grid.grid-3:has(+ .stats) > .card .card-detail {
  color: var(--gray-600); text-shadow: none; font-size: 14.5px; line-height: 1.8;
}
/* 数字在下面接棒，标题下不再叠折角箭头 */
.grid.grid-3:has(+ .stats) > .card h3::after { display: none; }

/* 下半：指标块，浅绿底，与上方卡片共用左右边框 */
.grid.grid-3 + .stats { margin-top: 0; align-items: stretch; }
.grid.grid-3 + .stats > .stat {
  background: #EDF5E4;
  border: 1px solid #D9E4D2;
  border-top: 1px solid #D9E4D2;
  border-radius: 0 0 10px 10px;
  padding: 20px 28px 24px;
  text-align: left;
  display: flex; flex-direction: column;
}
.grid.grid-3 + .stats > .stat .v { font-size: clamp(34px, 3.4vw, 44px); }
.grid.grid-3 + .stats > .stat .k { margin-top: 6px; font-size: 14.5px; color: #12241C; }
/* 注释与上方卡片标题逐字重复，去掉更干净 */
.grid.grid-3 + .stats > .stat .d { display: none; }

/* 窄屏卡片各自成列，上下拼合失效，恢复独立圆角 */
@media (max-width: 900px) {
  .grid.grid-3:has(+ .stats) > .card {
    border-bottom: 1px solid #D9E4D2;
    border-radius: 10px;
  }
  .grid.grid-3 + .stats { margin-top: 16px; }
  .grid.grid-3 + .stats > .stat { border-radius: 10px; }
}
