/* ============================================================
   资料员页 ziliaoyuan.css
   骨架：H 环轨（板块标题外包细金圆环，内容沿环轨两侧展开）+ hero-banner
   母题：卷轴档案（板块底角挂卷轴形装饰）
   ============================================================ */

/* ---------- 环轨：标题外包圆环 ---------- */
.ring-head { position: relative; text-align: center; max-width: 780px; margin: 0 auto 52px; }
.ring-head .ring-circle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 220px; height: 220px; border-radius: 50%;
  border: 1.5px dashed rgba(194,160,75,.35);
  pointer-events: none; z-index: 0;
}
.ring-head > * { position: relative; z-index: 1; }

/* 板块右下角卷轴装饰（用伪元素画卷边） */
.thread-ring { position: relative; }
.thread-ring > .container::after {
  content: ""; position: absolute; right: 10px; bottom: 10px;
  width: 60px; height: 14px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-pale));
  opacity: .5;
}

/* ---------- Hero 横幅 ---------- */
.zl-hero .hero-inner { padding-top: 120px; }
.zl-hero .crumb { color: rgba(110,102,89,.85); }
.zl-hero .crumb em { font-style: normal; color: var(--gold-deep); }

/* ---------- 职责三卡 ---------- */
.zl-duty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.zl-duty-grid .pearl-card h3 {
  font-size: 20px; color: var(--ink); margin-bottom: 14px;
  padding: 8px 14px; background: var(--grad-cream);
  border-left: 4px double var(--gold);
}
@media (max-width: 980px) { .zl-duty-grid { grid-template-columns: 1fr; } }

/* ---------- 现场双图 ---------- */
.zl-imgs { padding-top: 10px; }
.zl-fig { padding: 14px; }
.zl-fig img { border-radius: 12px; width: 100%; height: auto; }
.zl-fig figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-mute); text-align: center; }

/* ---------- 表与注释 ---------- */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius); }
.zl-note { margin-top: 16px; font-size: 13px; color: var(--ink-mute); text-align: center; }

/* ---------- 本地场景四卡：圆角化档案卡 ---------- */
.zl-cfg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.zl-cfg .card-soft { border-radius: 16px; border-top: 3px solid var(--gold); }
.zl-cfg h3 { font-size: 18px; color: var(--gold-deep); margin-bottom: 8px; }
.zl-cfg p { font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 680px) { .zl-cfg { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.zl-faq .acc { max-width: 860px; }
.zl-faq .acc-body-inner a { color: var(--gold-deep); text-decoration: underline; }

.zl-mt { margin-top: 22px; }