/* ==========================================================================
   baokao-ziliao.html 备考资料页专属样式
   母题：六类资料目录网格 + 发放节奏时间轴（文件夹节点）
   ========================================================================== */

/* ---------- 1. 头图 ---------- */
.zl-hero {
  background: linear-gradient(105deg, rgba(52,49,41,.86), rgba(52,49,41,.55)),
    url("../images/bangong.jpg") center/cover no-repeat;
  color: #fff; padding: clamp(130px,15vw,180px) 0 clamp(50px,6vw,76px);
}
.zl-hero .crumbs { color: rgba(255,255,255,.8); margin-bottom: 24px; }
.zl-hero .crumbs a { color: #fff; }
.zl-hero .crumbs .sep { color: rgba(255,255,255,.5); }
.zl-hero .eyebrow { color: var(--khaki-200); }
.zl-hero h1 { color: #fff; margin: 6px 0 16px; }
.zl-lead { color: rgba(255,255,255,.92); max-width: 640px; line-height: 1.9; }

/* 首屏数据带 */
.zl-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
  margin-top: 34px; max-width: 860px;
}
.zl-stats li {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-m); padding: 16px 18px;
}
.zl-stats strong { display: block; font-size: 18px; font-weight: 800; color: #fff; }
.zl-stats span { display: block; font-size: 12.5px; color: rgba(255,255,255,.82); margin-top: 4px; line-height: 1.5; }

/* ---------- 2. 资料目录 ---------- */
.zl-cat { background: var(--paper); }
.zl-cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.zl-card {
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 26px 22px; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.zl-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.zl-card svg { width: 34px; height: 34px; color: var(--stamp); margin-bottom: 14px; }
.zl-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.zl-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; margin: 0; }

/* ---------- 3. 发放节奏时间轴（文件夹节点） ---------- */
.zl-rhythm { background: var(--mist); }
.zl-tl { max-width: 740px; margin-inline: auto; }
.zl-tl .tl-row { --tw: 100px; --aw: 56px; padding: 16px 0; align-items: center; }
.zl-tl .tl-row::before {
  background: repeating-linear-gradient(to bottom, var(--khaki-300) 0 6px, transparent 6px 12px);
}
.zl-tl .tl-time { text-align: right; padding-right: 14px; }
.zl-tl .tl-time em {
  font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--khaki-600);
  background: var(--paper); border: 1px solid var(--line); padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.zl-tl .tl-node {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--khaki-600); color: #fff; transform: translate(-50%,-50%) rotate(45deg);
}
.zl-tl .tl-node svg { width: 20px; height: 20px; transform: rotate(-45deg); }
.zl-tl .tl-row:nth-child(even) .tl-node { background: var(--khaki-800); }
@keyframes zlFold {
  0%,100% { transform: translate(-50%,-50%) rotate(45deg); }
  50% { transform: translate(-50%,-50%) rotate(45deg) scale(.9); }
}
.zl-tl .tl-node.anim { animation: zlFold 3.2s ease-in-out infinite; }
.zl-tl .tl-body { padding: 4px 0 4px 22px; }
.zl-tl .tl-body h3 { font-size: 16.5px; margin-bottom: 3px; }
.zl-tl .tl-body p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.zl-tl .tl-body a { color: var(--stamp); border-bottom: 1px dashed var(--stamp); }

/* ---------- 3.5 资料怎么用 ---------- */
.zl-use { background: var(--paper); border-top: 1px solid var(--line); }
.zl-use .container { max-width: 820px; }
.zl-use-p { color: var(--ink-soft); line-height: 2; margin: 0 0 16px; }
.zl-use-p strong { color: var(--ink); }

/* 使用步骤 */
.zl-step-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 26px; }
.zl-step {
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 24px 22px; position: relative;
}
.zl-step-no {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--stamp); color: #fff; font-weight: 800; margin-bottom: 12px;
}
.zl-step h3 { font-size: 16px; margin-bottom: 8px; }
.zl-step p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; margin: 0; }
.zl-step a { color: var(--stamp); border-bottom: 1px dashed var(--stamp); }

/* ---------- 3.7 资料 FAQ ---------- */
.zl-faq { background: var(--mist); }
.zl-faq .faq-list { max-width: 820px; margin-inline: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .zl-cat-grid { grid-template-columns: repeat(2,1fr); }
  .zl-step-grid { grid-template-columns: 1fr 1fr; }
  .zl-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .zl-cat-grid { grid-template-columns: 1fr; }
  .zl-step-grid { grid-template-columns: 1fr; }
  .zl-tl .tl-row { --tw: 82px; --aw: 40px; }
  .zl-tl .tl-node { width: 34px; height: 34px; }
  .zl-tl .tl-node svg { width: 15px; height: 15px; }
  .zl-tl .tl-body { padding-left: 14px; }
}