/* ==========================================================================
   anquan-zhishi.css —— 安全知识页专属样式
   模块：hero / 四分主题常识卡 / 防护装备图文 / 警示带 / 班前班中班后习惯清单
   ========================================================================== */

/* ---------- 内页 Hero ---------- */
.page-hero-anquan{background-image:url("../../images/banner-gaochu.jpg")}

/* ---------- 模块一：分主题安全常识卡 ---------- */
.safe-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.safe-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 30px;transition:transform .3s ease,box-shadow .3s ease;
}
.safe-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.safe-card-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.safe-ico{
  flex:0 0 auto;width:48px;height:48px;border-radius:10px;background:var(--ink);
  color:var(--gold-pale);display:flex;align-items:center;justify-content:center;
}
.safe-card-head h3{font-size:19px;margin:0}
.safe-card ul{margin:0}
.safe-card li{
  font-size:14.5px;color:var(--muted);padding:8px 0 8px 20px;position:relative;
  border-bottom:1px dashed var(--line);
}
.safe-card li:last-child{border-bottom:0}
.safe-card li::before{
  content:"";position:absolute;left:0;top:15px;width:8px;height:8px;
  background:var(--gold);border-radius:2px;transform:rotate(45deg);
}

/* ---------- 模块二：防护装备图文 ---------- */
.fh-cols{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.fh-media img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;height:auto;object-fit:cover}
.fh-media p{font-size:13px;color:var(--muted);text-align:center;margin:12px 0 0}
.fh-text .sec-head{margin-bottom:26px}
.fh-list{margin:0}
.fh-list li{
  padding:14px 0;border-bottom:1px dashed var(--line);
}
.fh-list li:last-child{border-bottom:0}
.fh-list strong{display:block;font-size:15.5px;color:var(--ink);margin-bottom:4px}
.fh-list p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- 违章对照表 ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius);margin-top:8px}
.wz-table td:nth-child(2){color:#8a2a20}
.wz-table td:nth-child(3){color:var(--text)}

/* ---------- 事故警示带 ---------- */
.warn-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;
}
.warn-item{
  background:#fdf0ee;border:1px solid #ecd0cb;border-top:4px solid #b23a2e;
  border-radius:var(--radius);padding:26px 26px;display:flex;gap:16px;align-items:flex-start;
}
.warn-mark{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#b23a2e;color:#fff;
  font-family:var(--serif);font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.warn-item h3{font-size:16px;color:#8a2a20;margin-bottom:8px}
.warn-item p{margin:0;font-size:14px;color:#6d4a44;line-height:1.8}

/* ---------- 模块四：安全习惯清单（三列） ---------- */
.habit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.habit-col{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;border-top:3px solid var(--gold);
}
.habit-col h3{font-size:18px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.habit-col ul{margin:0}
.habit-col li{
  font-size:14px;color:var(--muted);padding:8px 0 8px 22px;position:relative;
}
.habit-col li::before{
  content:"";position:absolute;left:0;top:14px;width:8px;height:8px;
  border:2px solid var(--gold);border-radius:50%;background:var(--paper);
}

/* ---------- 收束说明 ---------- */
.guanxi-text p{font-size:15.5px;color:var(--muted);line-height:2;margin-bottom:14px}
.guanxi-text p:last-child{margin-bottom:0}

/* ---------- 通用收尾块 ---------- */
.container-narrow{max-width:860px}
.faq-list{margin-top:8px}
.cta-flex{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta-kicker{display:block;color:var(--gold);font-size:13px;letter-spacing:.22em;font-weight:600;margin-bottom:12px}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .safe-grid{grid-template-columns:1fr;gap:16px}
  .fh-cols{grid-template-columns:1fr;gap:28px}
  .warn-band{grid-template-columns:1fr}
  .habit-grid{grid-template-columns:1fr}
}