/* ==========================================================================
   shangqiu-jianzhu-shichang.css · 商丘建筑市场观察页
   骨架：大屏数据首屏 + 八区县枢纽卡 + 观察要点 + 岗位总览表 + 相关
   ========================================================================== */

/* ---------- 1. 大屏数据首屏 ---------- */
.jc-hero {
  background: linear-gradient(160deg, #4a3f2c, #332b1e);
  color: #f5efe2; padding: 130px 0 0;
}
.jc-hero-inner { max-width: 720px; padding-bottom: 48px; }
.crumbs.light a, .crumbs.light .sep { color: rgba(245,239,226,.8); }
.eyebrow.light { color: rgba(245,239,226,.8); }
h1.light { color: #fff; }
.jc-lead.light { font-size: 16.5px; color: rgba(245,239,226,.9); margin: 18px 0 26px; max-width: 580px; }

.jc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(245,239,226,.18);
}
.jc-stat { padding: 22px 20px; border-left: 1px dashed rgba(245,239,226,.22); }
.jc-stat:first-child { border-left: 0; }
.jc-stat b { display: block; font-size: 30px; color: #fff; line-height: 1.1; }
.jc-stat span { font-size: 13px; color: rgba(245,239,226,.75); }

/* ---------- 2. 八区县枢纽卡 ---------- */
.jc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.jc-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 20px; box-shadow: var(--shadow-s); display: block;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.jc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: var(--khaki-400); }
.jc-card h3 { margin-bottom: 6px; color: var(--khaki-800); }
.jc-card p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* ---------- 3. 观察要点 ---------- */
.jc-note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jc-note {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 26px 24px; box-shadow: var(--shadow-s);
}
.jc-note-no {
  font-family: var(--font-mono); font-size: 13px; color: var(--stamp);
  letter-spacing: .1em; display: block; margin-bottom: 12px;
}
.jc-note h3 { margin-bottom: 10px; }
.jc-note p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------- 4. 岗位总览表 ---------- */
.jc-table {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 8px 22px 18px; box-shadow: var(--shadow-s); max-width: 880px; margin-inline: auto;
}
.jc-table th { background: var(--sand); font-size: 14px; }
.jc-table td, .jc-table th { border-bottom: 1px solid var(--line); }
.jc-table-note { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; }

/* ---------- 5. 相关推荐 ---------- */
.jc-relgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jc-rel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 22px; box-shadow: var(--shadow-s); display: block;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.jc-rel:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.jc-rel-tag { font-size: 12px; color: var(--ink-faint); letter-spacing: .1em; }
.jc-rel h3 { margin: 8px 0; }
.jc-rel p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .jc-stats { grid-template-columns: repeat(2, 1fr); }
  .jc-stat { border-left: 0; border-top: 1px dashed rgba(245,239,226,.22); }
  .jc-stat:nth-child(-n+2) { border-top: 0; }
  .jc-grid { grid-template-columns: repeat(2, 1fr); }
  .jc-note-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .jc-relgrid { grid-template-columns: 1fr; }
}