/* ============================================================================
   握法网 v2.1 · 栅格与响应式（生产版）
   ----------------------------------------------------------------------------
   隔离策略：全部 .wf- 前缀，旧页面零影响（docs/13 §1.5）。
   断点：>1240 桌面 / ≤1024 平板 / ≤768 移动（移动端线上仍走 mobile/ 独立站，
   此处断点仅兜底窄窗口场景）。
   ========================================================================== */

/* ---------- 容器 ---------- */
.wf-wrap {
  width: 1200px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
}

/* ---------- 主侧布局（主列 + 300 侧栏） ---------- */
.wf-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  padding: 22px 0 40px;
  align-items: start;
}

/* ---------- 12 列栅格 ---------- */
.wf-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.wf-col-1  { grid-column: span 1; }
.wf-col-2  { grid-column: span 2; }
.wf-col-3  { grid-column: span 3; }
.wf-col-4  { grid-column: span 4; }
.wf-col-5  { grid-column: span 5; }
.wf-col-6  { grid-column: span 6; }
.wf-col-7  { grid-column: span 7; }
.wf-col-8  { grid-column: span 8; }
.wf-col-9  { grid-column: span 9; }
.wf-col-10 { grid-column: span 10; }
.wf-col-11 { grid-column: span 11; }
.wf-col-12 { grid-column: span 12; }

/* ---------- 平板 ≤1024 ---------- */
@media (max-width: 1024px) {
  .wf-layout { grid-template-columns: 1fr; }
  .wf-row { grid-template-columns: repeat(6, 1fr); }
  .wf-col-1, .wf-col-2  { grid-column: span 3; }
  .wf-col-3, .wf-col-4  { grid-column: span 6; }
  .wf-col-5, .wf-col-6, .wf-col-7, .wf-col-8, .wf-col-9, .wf-col-10, .wf-col-11, .wf-col-12 { grid-column: span 6; }
}

/* ---------- 移动 ≤768 ---------- */
@media (max-width: 768px) {
  .wf-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wf-col-1, .wf-col-2, .wf-col-3, .wf-col-4, .wf-col-5, .wf-col-6,
  .wf-col-7, .wf-col-8, .wf-col-9, .wf-col-10, .wf-col-11, .wf-col-12 { grid-column: span 2; }
  .wf-pg-head { padding: 24px 0 26px; }
  .wf-pg-head h1 { font-size: 21px; }
  .wf-pg-head .wf-stat { gap: 22px; }
}