/* r65 · how-it-works#running 四条运行治理:四行表 → 2×2 卡片(顶规 + 悬停拉满)(2026-10-09,Yannie:「展示方式再调整一下,不要这么死板」)
   旧版是「左标签 | 右正文」四条全宽分隔行,和 #path 改卡片之前同一个毛病。
   只动 CSS,零文案、零 HTML 改动;只认 .page-how #running .split;回退 = 删 <link>。 */

.page-how #running .split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin: 0; padding: 0; list-style: none;
  border: 0;
}

.page-how #running .split__item {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 40%, transparent);
  border-radius: var(--r-0);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
[data-theme="light"] .page-how #running .split__item {
  border-color: var(--c-border);
  box-shadow: var(--r45-card-shadow, none);
}

/* 顶规:默认一小段,悬停/聚焦时拉满 */
.page-how #running .split__item::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 44px; block-size: 3px;
  background: var(--c-primary-600);
  transition: inline-size .35s ease;
}
.page-how #running .split__item:hover,
.page-how #running .split__item:focus-within {
  border-color: color-mix(in srgb, var(--c-primary-600) 60%, transparent);
  transform: translateY(-3px);
}
.page-how #running .split__item:hover::before,
.page-how #running .split__item:focus-within::before { inline-size: 100%; }

.page-how #running .split__label {
  display: block; margin: 0;
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; letter-spacing: .02em;
}
.page-how #running .split__label::before { content: none; }

.page-how #running .split__body {
  max-inline-size: 30em; margin: 0;
  font-size: 15px; line-height: 1.8;
  position: relative; z-index: 1;
}

/* 行型留不住分印(emph-r15 §3),卡内也不放:题图弱、占高度 */
.page-how #running .split__item .ovp-imp { display: none; }

@media (max-width: 767px) {
  .page-how #running .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .page-how #running .split__item { padding: var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
  .page-how #running .split__item,
  .page-how #running .split__item::before { transition: none; }
  .page-how #running .split__item:hover { transform: none; }
}