/* 人员详情页皮肤（定版 2026-10-21）
 * 1) 基本信息 / 个人简介 / 单位介绍 / 党员介绍 / 专家介绍 / 服务介绍 —— 各自独立成块
 * 2) 基本信息卡：高饱和渐变底 + 白字；颜色 = 入口优先，无特殊入口时按人员身份
 *    入口：党员风采→红 / 服务中心→橙 / 专家园地→紫
 *    身份：专家紫 > 会长·书记·监事会 暗青 > 按 group 取卡片竖条色
 * 3) 区块标题居中 + 英文装饰 + 两端渐隐的艺术分割线
 * 4) 所有区块与照片轮播统一圆角 --r
 * 5) 标签胶囊：白灰外框 + 半透明玻璃质感
 */

.person-detail{--r:10px}

/* ── 基本信息卡：高饱和渐变底 + 白字（取卡片页竖条的高饱和端） ── */
.person-detail-head{
  --gc:#1565C0; --gc-deep:#0A3A6B;   /* 默认：品牌蓝（--gc 高饱和端 / --gc-deep 渐变深端） */
  display:flex;align-items:center;gap:24px;text-align:left;   /* PC：头像居左 */
  padding:20px 22px;margin-bottom:2px;color:#fff;
  background:linear-gradient(135deg,var(--gc-deep),var(--gc));
  border:0;border-radius:var(--r);
}
/* 头像在饱和底上加一圈纯白外框，避免边缘糊在一起 */
.person-detail-head .person-avatar.lg{box-shadow:0 0 0 3px #fff}
/* 身份兜底色（仅当没有特殊入口 data-from 时生效） */
.person-detail-head[data-role="leader"]{--gc:#257C7C;--gc-deep:#0E3E3E}   /* 会长 / 党支部书记 / 监事会：暗青 */
.person-detail-head[data-role="expert"]{--gc:#6C4F9E;--gc-deep:#2E1F49}   /* 专家·紫 */
/* 常务副会长 / 副会长 / 理事 / 会员：取卡片网格左侧竖条渐变的高饱和端 */
.person-detail-head[data-role="standing"]{--gc:#257C7C;--gc-deep:#0E3E3E}  /* 常务副会长·暗青 */
.person-detail-head[data-role="vp"]{--gc:#6C4F9E;--gc-deep:#2E1F49}       /* 副会长·暗紫 */
.person-detail-head[data-role="director"]{--gc:#4C607C;--gc-deep:#1E2A38} /* 理事·石墨蓝灰 */
.person-detail-head[data-role="member"],
.person-detail-head[data-role="staff"]{--gc:#1565C0;--gc-deep:#0A3A6B}    /* 会员·品牌蓝 */

/* 入口优先：从党员风采 / 服务中心 / 专家园地进入时按入口取色（覆盖上面按身份的取值） */
.person-detail-head[data-from="dyfc"]{--gc:#C0392B;--gc-deep:#7C1F22}    /* 党员风采进入·党建红 */
.person-detail-head[data-from="center"]{--gc:#E87722;--gc-deep:#8A4A12}  /* 服务中心进入·橙 */
.person-detail-head[data-from="zjjs"]{--gc:#6C4F9E;--gc-deep:#2E1F49}    /* 专家园地进入·紫 */

.person-detail-meta h2{color:#fff}
.person-detail-meta .person-org{color:rgba(255,255,255,.88)}
.person-detail-meta .person-phone{color:#fff}
.person-detail-meta .person-phone .pp-icon{color:#fff;opacity:.9}
/* 头像居中后姓名区与标签行一并居中（移动端才居中，PC 保持居左） */
.person-detail-meta{text-align:left}
.person-detail .person-tags{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin:8px 0 0}

/* ── 介绍区块：每块独立成卡、统一圆角 ── */
.person-block{
  --bc:#0E57A3; --bc-soft:#EEF4FB; --bc-line:#CFE0F5;
  margin-top:22px;padding:16px 20px 18px;
  background:var(--bc-soft);border:1px solid var(--bc-line);border-radius:var(--r);
}
.person-block[data-block="intro"]{--bc:#0E57A3;--bc-soft:#EEF4FB;--bc-line:#CFE0F5}        /* 个人简介·主蓝 */
.person-block[data-block="orgIntro"]{--bc:#1F6B4F;--bc-soft:#EBF5F0;--bc-line:#C9E5D9}    /* 单位介绍·墨绿 */
.person-block[data-block="partyIntro"]{--bc:#C0392B;--bc-soft:#FBEEEC;--bc-line:#F0CFCB}  /* 党员介绍·红 */
.person-block[data-block="expertIntro"]{--bc:#45306B;--bc-soft:#F2EDF9;--bc-line:#D9CFEA} /* 专家介绍·紫 */
.person-block[data-block="specIntro"]{--bc:#E87722;--bc-soft:#FDF0E4;--bc-line:#F5D9B8}   /* 服务介绍·橙 */

/* 标题：独立成行 + 与正文之间分割线（无竖线前缀） */
/* 标题：居左 + 英文装饰 + 下方两端渐隐的艺术分割线（参照文章详情 .art-head-sticky::after） */
.person-block-title{
  position:relative;margin:0;font-size:17px;line-height:1.4;color:var(--bc);font-weight:600;text-align:center;
  padding-bottom:12px;border-bottom:0;
}
.pb-en{margin-left:10px;font-size:11px;font-weight:400;letter-spacing:1.6px;
  color:var(--bc);opacity:.6;text-transform:uppercase}
.person-block-title::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--bc),transparent);
}
/* 正文按换行分段：每段首行缩进 2em，段间距加大 */
.person-block-body{padding-top:14px;color:#3a3a3a;font-size:16px;line-height:1.95;white-space:normal;word-break:break-word}
.person-block-body p{margin:0 0 1.3em;text-indent:2em}
.person-block-body p:last-child{margin-bottom:0}

/* ── Markdown 渲染结果（作者显式书写，无自动猜测） ── */
/* 行内 */
.person-block-body strong{font-weight:700;color:var(--bc)}
.person-block-body em{font-style:italic}
.person-block-body u{text-decoration:underline;text-underline-offset:2px}
.person-block-body mark{background:rgba(232,119,34,.22);color:inherit;padding:1px 3px;border-radius:3px}
.person-block-body del{opacity:.6}
.person-block-body code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;
  background:rgba(127,127,127,.12);padding:1px 5px;border-radius:4px}
.person-block-body a{color:var(--bc);text-decoration:underline}

/* 标题 # / ## / ### / ####：不缩进、主题色、上疏下密 */
.person-block-body p.pb-h{text-indent:0;font-weight:700;color:var(--bc);margin:1.2em 0 .5em}
.person-block-body p.pb-h:first-child{margin-top:0}
.person-block-body p.pb-h1{font-size:18px}
.person-block-body p.pb-h2{font-size:17px}
.person-block-body p.pb-h3{font-size:16px}
.person-block-body p.pb-h4{font-size:15px}
/* 分隔线 --- */
.person-block-body hr.pb-hr{border:0;height:1px;margin:1.2em 0;
  background:linear-gradient(90deg,var(--bc),transparent)}

/* ── 无序列表（行首 - 或 ●） ── */
.person-block-body ul.pb-list{
  margin:0 0 1.1em;padding:0;list-style:none;   /* front.css 全局 ul{list-style:none}，符号自绘 */
  display:grid;gap:6px;
}
.person-block-body ul.pb-list li{
  position:relative;padding-left:20px;text-indent:0;
  font-size:15.5px;line-height:1.75;color:#2f3742;
}
.person-block-body ul.pb-list li::before{
  content:'';position:absolute;left:5px;top:.72em;width:5px;height:5px;
  border-radius:1px;background:var(--bc);transform:rotate(45deg);  /* 菱形点，取本块主题色 */
}

/* ── 有序列表（原文行首 1. / 1、 / 1） / ①～ 的行）：编号用 CSS counter 生成，行距自动放宽 ── */
.person-block-body ul.pb-num{counter-reset:pbnum;gap:7px}
.person-block-body ul.pb-num li{padding-left:28px;line-height:1.85}
.person-block-body ul.pb-num li::before{
  counter-increment:pbnum;content:counter(pbnum) ".";
  width:auto;height:auto;background:none;border-radius:0;transform:none;
  left:2px;top:0;font-size:.92em;font-weight:600;line-height:inherit;
  color:var(--bc);font-variant-numeric:tabular-nums;opacity:.85;
}
/* 段 ↔ 列表 交界处的间距：段落自带 1.3em 下边距，这里只补列表下方与列表→段落的上方 */
.person-block-body ul.pb-list:last-child{margin-bottom:0}
.person-block-body ul.pb-list + p{margin-top:1.1em}
.person-block-body p.pb-h + ul.pb-list,
.person-block-body p + ul.pb-list{margin-top:-.2em}

/* PC：视频按钮与上方区块拉开距离（移动端由下方断点收紧） */
.person-video{margin-top:34px}

/* ── 照片轮播：圆角与区块保持一致 ── */
.person-detail .gal-wrap{border-radius:var(--r);overflow:hidden;margin-top:22px}
.person-detail .gal-viewport{border-radius:var(--r)}

/* 详情页胶囊：采用党员 / 专家卡片网格的「白灰外框 + 半透明」玻璃质感（参照 .pty-tag / .expert-tag）。
   详情页标签坐在饱和渐变头部卡上，白半透明底 + 白字正合适 */
.person-detail .person-tag{
  display:inline-block;margin:4px 4px 0 0;padding:2px 10px;border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.3px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
/* 大卡片页（会长 / 党支部书记 / 监事会 等 cards-person 列表）胶囊同样补轮廓线 */
.person-grid .person-tagline .person-tag{border:1px solid #A9C6F2}

/* ── 深色主题 ── */
html.dark-theme .person-detail-head[data-role="leader"]{--gc:#4FB3B3}    /* 暗青组 */
html.dark-theme .person-detail-head[data-role="standing"]{--gc:#4FB3B3}  /* 常务副会长·暗青 */
html.dark-theme .person-detail-head[data-role="vp"]{--gc:#A88BE0}        /* 副会长·紫 */
html.dark-theme .person-detail-head[data-role="director"]{--gc:#8FA8C9}  /* 理事·蓝灰 */
html.dark-theme .person-detail-head[data-role="member"],
html.dark-theme .person-detail-head[data-role="staff"]{--gc:#58A6FF}     /* 会员·蓝 */
html.dark-theme html.dark-theme /* 入口优先（深色） */
html.dark-theme .person-detail-head[data-from="dyfc"]{--gc:#FF7B72}
html.dark-theme .person-detail-head[data-from="center"]{--gc:#F0883E}
html.dark-theme .person-detail-head[data-from="zjjs"]{--gc:#A88BE0}
html.dark-theme .person-detail-meta h2{color:#fff}
html.dark-theme .person-detail-meta .person-org{color:rgba(255,255,255,.85)}
html.dark-theme .person-detail-meta .person-phone{color:#fff}

html.dark-theme .person-block{--bc-soft:#161b22;--bc-line:#30363d}
html.dark-theme .person-block[data-block="intro"]{--bc:#58A6FF}
html.dark-theme .person-block[data-block="orgIntro"]{--bc:#7BC8A4;--bc-line:#2F4A41} /* 单位介绍·墨绿（深色下提亮） */
html.dark-theme .person-block[data-block="partyIntro"]{--bc:#FF7B72}
html.dark-theme .person-block[data-block="expertIntro"]{--bc:#A88BE0}
html.dark-theme .person-block[data-block="specIntro"]{--bc:#F0883E}
html.dark-theme .person-block-body{color:#c9d1d9}
html.dark-theme .person-block-body ul.pb-list li{color:#c9d1d9}
/* 深色：玻璃胶囊稍降透明度 */
html.dark-theme .person-detail .person-tag{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38);color:#fff}
html.dark-theme .person-grid .person-tagline .person-tag{border-color:#2F4F7A}

/* ── 手机端 ── */
@media (max-width:767px){
  /* 移动端：头像居中竖排 */
  .person-detail-head{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:18px 16px}
  /* 移动端：头像 / 姓名 / 单位+职务 / 标签组 全部居中
     注意必须写成 .person-detail .person-tags（0,2,0），否则压不过 person.ejs 底部内联的 .person-tags */
  .person-detail .person-tags{justify-content:center;gap:6px;margin:8px 0 0}
  .person-detail-meta{text-align:center}
  .person-detail-meta h2{font-size:21px}
  /* 视频按钮去掉外框后，移动端补上间距 */
  .person-video{margin-top:18px}
  .person-video-link{width:100%;justify-content:center}
  .person-block{margin-top:18px;padding:14px 16px 16px}
  .person-block-title{font-size:16px;padding-bottom:9px}
  .person-block-body{font-size:17px;line-height:1.95;padding-top:12px}
  .person-block-body ul.pb-list{gap:8px}
  .person-block-body ul.pb-list li{font-size:16.5px;line-height:1.8}
  .person-detail .gal-wrap{margin-top:18px}
}