/* ==========================================================
   JR杰瑞 · 统一底座 03 · 布局层 (Layout)
   新类名 jr-* → 与既有 .container / .section 零冲突
   栅格 12 栏 · 容器 1200（官网）/ 1440（应用）
   ========================================================== */

.jr-container {
  width: 100%;
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding: 0 var(--sp-24, 24px);
}
.jr-container--wide { max-width: var(--container-app, 1440px); }
.jr-container--narrow { max-width: 880px; }

/* ---- 区块 ---- */
.jr-section {
  padding: var(--sp-96, 96px) 0;
  position: relative;
}
.jr-section--tight { padding: var(--sp-64, 64px) 0; }
.jr-section--wide  { padding: var(--sp-140, 140px) 0; }
.jr-section--soft  { background: var(--bg-soft); }

/* ---- 12 栏栅格 ---- */
.jr-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--eco-gap, var(--gap, 24px));
}
.jr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- 纵向堆叠 ---- */
.jr-stack { display: flex; flex-direction: column; }
.jr-stack--4  { gap: var(--sp-4, 4px); }
.jr-stack--8  { gap: var(--sp-8, 8px); }
.jr-stack--12 { gap: var(--sp-12, 12px); }
.jr-stack--16 { gap: var(--sp-16, 16px); }
.jr-stack--24 { gap: var(--sp-24, 24px); }
.jr-stack--32 { gap: var(--sp-32, 32px); }

/* ---- 横向排列 ---- */
.jr-row {
  display: flex;
  align-items: center;
  gap: var(--sp-16, 16px);
  flex-wrap: wrap;
}
.jr-row--between { justify-content: space-between; }
.jr-row--end     { justify-content: flex-end; }
.jr-row--center  { justify-content: center; }
.jr-row--top     { align-items: flex-start; }
.jr-row--nowrap  { flex-wrap: nowrap; }

/* ---- 跨列 ---- */
.jr-c-3  { grid-column: span 3; }
.jr-c-4  { grid-column: span 4; }
.jr-c-6  { grid-column: span 6; }
.jr-c-8  { grid-column: span 8; }
.jr-c-12 { grid-column: span 12; }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .jr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-c-3 { grid-column: span 6; }
  .jr-c-8 { grid-column: span 12; }
}
@media (max-width: 720px) {
  .jr-grid,
  .jr-grid--2,
  .jr-grid--3,
  .jr-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .jr-c-3, .jr-c-4, .jr-c-6, .jr-c-8 { grid-column: span 12; }
  .jr-section { padding: var(--sp-64, 64px) 0; }
  .jr-section--wide { padding: var(--sp-96, 96px) 0; }
  .jr-container { padding: 0 var(--sp-16, 16px); }
}