/* ==========================================================================
   shangqiu-ningling.css · 宁陵县属地页
   骨架：居中邮戳横幅首屏 + 说宁陵小矩阵 + 编号清单行 + 水平备考四步轴 + checklist + 相关
   ========================================================================== */

/* ---------- 1. 居中邮戳横幅首屏 ---------- */
.nl-hero {
  padding: 130px 0 70px;
  background:
    radial-gradient(900px 420px at 50% -8%, var(--khaki-100), transparent 62%),
    var(--mist);
  text-align: center;
}
.nl-hero-inner { max-width: 760px; margin-inline: auto; }
.crumbs.center, .eyebrow.center, h1.center { text-align: center; justify-content: center; }
.nl-lead { font-size: 16.5px; color: var(--ink-soft); margin: 18px auto 24px; max-width: 600px; }
.nl-stamp-banner {
  display: inline-block; margin: 6px 0 26px;
  border: 2px double var(--stamp); color: var(--stamp);
  border-radius: 6px; padding: 8px 22px;
  font-size: 14px; font-weight: 700; letter-spacing: .12em;
  transform: rotate(-1.2deg);
}
.nl-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- 2. 说宁陵 + 小矩阵 ---------- */
.nl-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
.nl-mini-cell {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 20px 18px; text-align: center; box-shadow: var(--shadow-s);
}
.nl-mini-cell b { display: block; font-size: 17px; color: var(--khaki-800); margin-bottom: 4px; }
.nl-mini-cell span { font-size: 13px; color: var(--ink-soft); }

/* ---------- 3. 编号清单行 ---------- */
.nl-rows { max-width: 820px; margin-inline: auto; }
.nl-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center;
  padding: 22px 0; border-bottom: 1px dashed var(--line-strong);
}
.nl-row:first-child { border-top: 1px dashed var(--line-strong); }
.nl-row-no {
  font-family: var(--font-mono); font-size: 24px; color: var(--stamp);
  font-weight: 700; opacity: .85;
}
.nl-row-body h3 { margin-bottom: 6px; }
.nl-row-body p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------- 4. 水平备考四步轴 ---------- */
.nl-htl {
  position: relative; max-width: 880px; margin: 20px auto 0;
  display: flex; justify-content: space-between;
}
.nl-htl::before {
  content: ""; position: absolute; top: 22px; left: 6%; right: 6%; height: 2px;
  background: var(--khaki-300);
}
.nl-step { position: relative; width: 22%; text-align: center; }
.nl-dot {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--khaki-400);
  display: grid; place-items: center; margin: 0 auto 14px;
  font-weight: 700; color: var(--stamp);
}
.nl-step h3 { font-size: 15.5px; margin-bottom: 6px; }
.nl-step p { font-size: 13px; color: var(--ink-soft); margin: 0; }
.nl-step-last .nl-dot { background: var(--stamp); border-color: var(--stamp); color: #fff; }

/* ---------- 5. checklist ---------- */
.nl-checklist {
  list-style: none; max-width: 760px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 10px 28px; box-shadow: var(--shadow-s);
}
.nl-checklist li {
  padding: 16px 0; border-bottom: 1px dashed var(--line-strong);
  font-size: 14.5px; color: var(--ink-soft); padding-left: 30px; position: relative;
}
.nl-checklist li:last-child { border-bottom: 0; }
.nl-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 16px;
  color: var(--stamp); font-weight: 700;
}
.nl-checklist strong { color: var(--khaki-800); }

/* ---------- 6. 相关推荐 ---------- */
.nl-relgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nl-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);
}
.nl-rel:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.nl-rel-tag { font-size: 12px; color: var(--ink-faint); letter-spacing: .1em; }
.nl-rel h3 { margin: 8px 0; }
.nl-rel p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .nl-mini { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .nl-relgrid { grid-template-columns: 1fr; }
  .nl-htl { flex-direction: column; gap: 22px; }
  .nl-htl::before { display: none; }
  .nl-step { width: 100%; display: grid; grid-template-columns: 44px 1fr; gap: 14px; text-align: left; align-items: center; }
  .nl-dot { margin: 0; }
}