/* ==========================================================================
   p-news-changshi.css · 安全常识频道专属样式
   布局：八条图标常识卡 + 两专栏图文块 + 列表
   ========================================================================== */

.sec-kicker{font-size:13px;letter-spacing:3px;color:var(--gold);font-weight:700;margin-bottom:10px}
.sec-title{font-size:30px;color:#fff;font-weight:800}
.sec-head{text-align:center;max-width:760px;margin:0 auto 44px}

/* ---------- Hero ---------- */
.cs-hero{padding:64px 0 70px;border-bottom:1px solid var(--line);background:linear-gradient(115deg,#160604,#0E0E13 62%)}
.cs-hero-title{font-size:clamp(26px,3.4vw,40px);color:#fff;font-weight:900;margin:20px 0 12px}
.cs-hero-sub{color:var(--muted);font-size:16px;max-width:660px;line-height:1.9}

/* ---------- 常识卡 ---------- */
.cs-tips-sec{background:var(--bg)}
.cs-tips{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cs-tip{position:relative;padding:28px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:all .3s;overflow:hidden}
.cs-tip-ico{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,rgba(224,38,29,.25),rgba(255,184,0,.1));color:var(--gold-soft);margin-bottom:16px}
.cs-tip-ico svg{width:26px;height:26px}
.cs-tip h3{color:#fff;font-size:16.5px;margin-bottom:8px}
.cs-tip p{color:var(--muted);font-size:13.5px;line-height:1.8}
.cs-tip:hover{transform:translateY(-7px);border-color:var(--red);box-shadow:var(--shadow-red)}
.cs-tip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--red),var(--gold));transform:scaleX(0);transition:transform .3s}
.cs-tip:hover::after{transform:scaleX(1)}

/* ---------- 两专栏 ---------- */
.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.cs-col{border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);transition:all .3s}
.cs-col img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cs-col-body{padding:26px 26px 30px}
.cs-col-tag{display:inline-block;padding:4px 12px;background:rgba(255,184,0,.12);border:1px solid rgba(255,184,0,.4);color:var(--gold-soft);font-size:12px;border-radius:6px;margin-bottom:12px}
.cs-col-body h3{color:#fff;font-size:19px;margin-bottom:10px}
.cs-col-body p{color:var(--muted);font-size:14px;line-height:1.9;margin-bottom:10px}
.cs-col-body a{color:var(--gold-soft)}
.cs-col:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}

/* ---------- 急救 ---------- */
.cs-ems{background:linear-gradient(150deg,#160604,#0E0E13 60%)}
.cs-ems-inner{max-width:980px;margin:0 auto;text-align:center}
.cs-ems-inner h2{font-size:28px;color:#fff;margin-bottom:24px}
.cs-ems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.cs-ems-card{padding:24px 22px;background:var(--card);border:1px solid rgba(224,38,29,.4);border-radius:var(--radius)}
.cs-ems-card h3{color:#fff;font-size:16.5px;margin-bottom:10px}
.cs-ems-card p{color:var(--muted);font-size:13.5px;line-height:1.85}
.cs-ems-card strong{color:#FFD75E}
.cs-ems-note{margin-top:22px;color:var(--muted-2);font-size:13.5px}
.cs-ems-note a{color:var(--gold-soft)}

/* ---------- 列表 ---------- */
.cs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cs-item{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.cs-item-img{display:block;overflow:hidden}
.cs-item-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s}
.cs-item-body{padding:18px 20px 20px}
.cs-item-body time{color:var(--gold-soft);font-size:12.5px}
.cs-item-body h3{font-size:16px;line-height:1.5;margin:8px 0 8px}
.cs-item-body h3 a{color:#fff}
.cs-item-body h3 a:hover{color:var(--gold)}
.cs-item-body p{color:var(--muted);font-size:13.5px;line-height:1.75}
.cs-item:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(255,184,0,.45)}
.cs-item:hover .cs-item-img img{transform:scale(1.05)}

/* ---------- 上岗自查 ---------- */
.cs-self{background:var(--card);border-block:1px solid var(--line)}
.cs-self-inner{max-width:900px;margin:0 auto;text-align:center}
.cs-self-inner h2{font-size:26px;color:#fff;margin-bottom:14px}
.cs-self-inner p{color:var(--muted);font-size:15.5px;line-height:2}

/* ---------- CTA ---------- */
.cs-cta h2{font-size:28px;color:#fff;margin-bottom:10px}
.cs-cta p{color:var(--muted)}
.cs-cta p a{color:var(--gold-soft)}
.cs-cta-btns{margin-top:22px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 自查清单 ---------- */
.cs-ck-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cs-ck-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 22px}
.cs-ck-item summary{cursor:pointer;color:#fff;font-size:15px;font-weight:600;padding:16px 0;list-style:none}
.cs-ck-item summary::before{content:"☑";display:inline-block;margin-right:10px;color:var(--gold)}
.cs-ck-item p{color:var(--muted);font-size:13.5px;line-height:1.85;padding-bottom:16px}
.cs-ck-item[open]{border-color:var(--gold)}

/* ---------- 风险象限 ---------- */
.cs-quad{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cs-q{padding:28px 26px;border-radius:14px;border:1px solid var(--line)}
.cs-q h3{font-size:16px;margin-bottom:10px}
.cs-q p{color:var(--muted);font-size:14px;line-height:1.9}
.cs-q-high{background:linear-gradient(150deg,rgba(224,38,29,.15),var(--card));border-color:rgba(224,38,29,.4)}
.cs-q-high h3{color:#FF6B62}
.cs-q-mid{background:var(--card);border-color:rgba(255,184,0,.3)}
.cs-q-mid h3{color:#FFD75E}
.cs-q-low{background:linear-gradient(150deg,rgba(255,184,0,.1),var(--card))}
.cs-q-low h3{color:#FFD75E}
.cs-q-safe{background:var(--card)}
.cs-q-safe h3{color:#7CDB8A}

/* ---------- 警示条 ---------- */
.cs-warn{background:linear-gradient(150deg,#160604,#0E0E13 60%)}
.cs-warn-inner{max-width:800px;margin:0 auto;text-align:center}
.cs-warn-inner h2{font-size:26px;color:#fff;margin-bottom:18px}
.cs-warn-inner p{color:var(--muted);font-size:15px;line-height:2;margin-bottom:10px}
.cs-warn-inner strong{color:#FF6B62}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .cs-tips{grid-template-columns:repeat(2,1fr)}
  .cs-cols{grid-template-columns:1fr}
  .cs-list{grid-template-columns:repeat(2,1fr)}
  .cs-ems-grid{grid-template-columns:1fr}
  .cs-ck-grid{grid-template-columns:1fr}
  .cs-quad{grid-template-columns:1fr}
}
@media (max-width:720px){
  .cs-tips,.cs-list{grid-template-columns:1fr}
}