/* 瑞孚集团《管理者识人能力训练》内训课 — 深墨蓝+赤金主题
   排版骨架对齐官网原生新闻详情页规范：820px 卡片 + hero + meta + body */

:root{
  --primary:#16263f;--accent:#c8962a;--accent-light:#e6b94b;
  --text:#1e293b;--text2:#475569;--muted:#64748b;
  --border:#e2e8f0;--light:#f6f7f9;--white:#fff;
  --radius:12px;--radius-lg:16px;
  --shadow:0 4px 16px rgba(0,0,0,.08);
}
*{margin:0;padding:0;box-sizing:border-box}

/* ===== 容器与卡片 ===== */
.article-wrap{max-width:820px;margin:36px auto;padding:0 20px 70px}
.article-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}

/* ===== HERO ===== */
.detail-hero{position:relative;background:linear-gradient(135deg,#0e1c30 0%,#16263f 50%,#1f3a5c 100%);padding:52px 36px 44px;text-align:center;color:#fff}
.detail-hero .tag{
  display:inline-block;font-size:11.5px;letter-spacing:1.5px;
  background:rgba(200,150,42,.18);border:1px solid rgba(200,150,42,.35);
  color:#e6b94b;padding:5px 16px;border-radius:999px;margin-bottom:18px;
}
.detail-hero h1{font-size:clamp(22px,3vw,31px);font-weight:800;line-height:1.5;letter-spacing:.4px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.detail-hero .subline{margin-top:16px;font-size:14.5px;color:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;gap:8px}
.detail-hero .chips{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.detail-hero .chips span{font-size:13px;color:#fff;background:rgba(200,150,42,.22);border:1px solid rgba(200,150,42,.45);padding:5px 14px;border-radius:999px;letter-spacing:.5px}

/* ===== META ===== */
.detail-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:14px 36px;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted);background:var(--white)}
.detail-meta b{color:var(--text2);font-weight:600}
.detail-meta .dot{width:4px;height:4px;border-radius:50%;background:#cbd5e1}

/* ===== BODY ===== */
.detail-body{padding:36px 36px 46px}
.lead-text{font-size:16.5px;color:var(--text2);line-height:2;padding:16px 20px;background:linear-gradient(135deg,#fbf6ea,#fff);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;margin-bottom:30px}
.detail-body h2{font-size:21px;color:var(--primary);font-weight:800;margin:38px 0 14px;padding-left:14px;border-left:4px solid var(--accent);line-height:1.5}
.detail-body p{margin:12px 0;color:var(--text2);font-size:15.5px;line-height:1.95}
.detail-body strong{color:var(--primary);font-weight:700}
.detail-body em{color:var(--accent);font-style:normal;font-weight:700}

/* ===== FIGURE ===== */
figure{margin:26px 0;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 14px rgba(22,38,63,.08);line-height:0}
figure img{width:100%;height:auto;display:block}
figcaption{text-align:center;font-size:13px;color:var(--muted);padding:10px 8px 0;line-height:1.55;letter-spacing:.2px}

/* ===== 多图网格 ===== */
.figure-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0}
.figure-grid figure{margin:0}
@media(max-width:600px){.figure-grid{grid-template-columns:1fr}}

/* ===== 四卡网格 ===== */
.challenge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0}
.challenge-card{background:#fff;border:1px solid #eef1f6;border-top:3px solid var(--accent);border-radius:var(--radius);padding:18px 18px;box-shadow:0 2px 10px rgba(22,38,63,.06);transition:.2s}
.challenge-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(200,150,42,.16)}
.challenge-card h4{font-size:16px;color:var(--primary);margin-bottom:8px}
.challenge-card p{font-size:14px;color:var(--text2);margin:0;line-height:1.8}
@media(max-width:600px){.challenge-grid{grid-template-columns:1fr}}

/* ===== 引用块 ===== */
.quote-blk{margin:26px 0;padding:22px 26px;background:#f8fafc;border-radius:var(--radius);border:1px solid var(--border);font-size:16px;color:var(--primary);line-height:1.95;position:relative}
.quote-blk::before{content:"\201C";position:absolute;left:14px;top:-6px;font-size:52px;color:var(--accent);opacity:.22;font-family:Georgia,serif}
.quote-blk .by{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

/* ===== 关于/观察卡 ===== */
.about-card{margin:36px 0 0;background:linear-gradient(135deg,#fbf6ea,#fff);border:1px solid #ecd9a8;border-radius:var(--radius-lg);padding:26px 28px}
.about-card h3{font-size:17px;color:#8a6516;font-weight:800;margin-bottom:10px;display:inline-flex;align-items:center;gap:8px}
.about-card h3 .ic{width:22px;height:22px;border-radius:6px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.about-card p{font-size:14.5px;color:var(--text2);margin:6px 0;line-height:1.9}

/* ===== 返回 ===== */
.back-link{display:inline-flex;align-items:center;gap:6px;margin-top:28px;color:#b07d1a;font-size:14px;font-weight:600;text-decoration:none;transition:color .2s}
.back-link:hover{color:var(--accent)}

/* ===== 响应式 ===== */
@media(max-width:768px){
  .detail-hero{padding:36px 22px 32px}
  .detail-body{padding:26px 22px 36px}
  .detail-meta{padding:12px 22px}
}