/* ================================================================
   mhpn.cn · 材料 / 证书分片私有样式（pages-cailiao.css）
   适用：cailiao-yushen / cailiao-qingdan / shenfenzheng /
        xueli-zhengming / tijian-biaozhun / zhaopian-yaoqiu /
        zhengshu-chaxun / zhengshu-heyan / zhengshu-fangwei
   说明：仅引用 base.css 令牌；各页以命名空间类区分骨架，
        保证 9 页不同构。禁止内联样式。
   ================================================================ */

/* ============ 通用页首 Hero（画册大图 + 眉题） ============ */
.c-hero{
  position:relative; min-height:460px; display:flex; align-items:flex-end;
  color:var(--paper-3); overflow:hidden; padding:120px 0 64px;
}
.c-hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.c-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(25,21,16,.42) 0%, rgba(25,21,16,.62) 100%);
}
.c-hero__inner{ position:relative; z-index:2; max-width:820px; }
.c-hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.c-hero__kicker::before{ content:""; width:28px; height:1px; background:var(--gold); }
.c-hero__title{
  font-size:clamp(30px,4.4vw,52px); line-height:1.25; color:var(--paper-3);
  text-shadow:0 2px 18px rgba(25,21,16,.35);
}
.c-hero__desc{ margin-top:18px; font-size:16.5px; line-height:1.9; color:rgba(244,238,226,.86); max-width:680px; }
.c-hero__tags{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.c-hero__tags .chip{ background:rgba(25,21,16,.35); border-color:rgba(201,169,106,.5); color:var(--paper-3); }

/* 面包屑容器 */
.crumb-wrap{ padding-top:26px; }

/* ============ 图文对开（左右分栏） ============ */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.split--rev{ grid-template-columns:.95fr 1.05fr; }
.split--rev .split__fig{ order:-1; }
.split__fig{ position:relative; }
.split__fig img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; }
.split__seal{
  position:absolute; right:-14px; bottom:-16px;
  background:var(--brown); color:var(--paper-3);
  padding:14px 20px; border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transform:rotate(-2deg);
}
.split__seal b{ display:block; font-family:var(--font-serif); font-size:18px; letter-spacing:.06em; }
.split__seal span{ font-size:12px; letter-spacing:.14em; color:var(--gold); }
.split__copy h2{ font-size:clamp(24px,2.6vw,34px); margin-bottom:18px; }
.split__copy p{ color:var(--ink-2); margin-bottom:14px; }
.split__copy ul{ margin-top:8px; display:grid; gap:12px; }
.split__copy li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); }
.split__copy li svg{ flex:none; width:19px; height:19px; margin-top:4px; color:var(--gold); }

/* ============ 卡片网格（3 / 4 列） ============ */
.card3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feat{
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feat:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold); }
.feat__icon{
  width:46px; height:46px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); color:var(--brown); margin-bottom:16px;
}
.feat__icon svg{ width:24px; height:24px; }
.feat h3{ font-size:18px; margin-bottom:10px; }
.feat p{ font-size:14px; color:var(--ink-2); line-height:1.85; }

/* 错落卡片：不同列高度差 */
.feat-masonry{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.feat-masonry .feat:nth-child(1){ transform:translateY(0); }
.feat-masonry .feat:nth-child(2){ transform:translateY(26px); }
.feat-masonry .feat:nth-child(3){ transform:translateY(0); }
.feat-masonry .feat:nth-child(4){ transform:translateY(26px); }
.feat-masonry .feat:nth-child(5){ transform:translateY(0); }
.feat-masonry .feat:nth-child(6){ transform:translateY(26px); }

/* ============ 表格增强 ============ */
.tbl-wrap{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.tbl-note{ margin-top:14px; font-size:13px; color:var(--brown-3); }
.tbl .tag-ok{ color:var(--ok); font-weight:700; }
.tbl .tag-no{ color:var(--danger); font-weight:700; }

/* ============ 对比双栏（合格 / 不合格） ============ */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.duo__col{ border-radius:var(--radius-lg); padding:28px; border:1px solid var(--line-soft); background:var(--paper-3); }
.duo__col--good{ border-top:3px solid var(--ok); }
.duo__col--bad{ border-top:3px solid var(--danger); }
.duo__col h3{ display:flex; align-items:center; gap:10px; font-size:19px; margin-bottom:16px; }
.duo__col--good h3{ color:var(--ok); }
.duo__col--bad h3{ color:var(--danger); }
.duo__col ul{ display:grid; gap:11px; }
.duo__col li{ display:flex; gap:9px; font-size:14.5px; color:var(--ink-2); }
.duo__col li svg{ flex:none; width:18px; height:18px; margin-top:4px; }
.duo__col--good li svg{ color:var(--ok); }
.duo__col--bad li svg{ color:var(--danger); }

/* ============ FAQ（原生 details，无 JS 依赖） ============ */
.faq{ display:grid; gap:14px; max-width:880px; margin-inline:auto; }
.faq__item{
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); overflow:hidden;
}
.faq__q{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; font-family:var(--font-serif); font-size:16.5px; color:var(--ink);
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{ content:"+"; flex:none; font-size:22px; color:var(--gold); transition:transform var(--transition); }
.faq__item[open] .faq__q::after{ transform:rotate(45deg); }
.faq__a{ padding:0 24px 20px; font-size:14.5px; color:var(--ink-2); line-height:1.9; }

/* ============ 纵向编号清单（学历/流程类） ============ */
.numlist{ display:grid; gap:0; max-width:820px; }
.numlist__row{
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--line-soft); align-items:start;
}
.numlist__row:last-child{ border-bottom:0; }
.numlist__no{
  font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--gold); line-height:1;
}
.numlist__row h4{ font-size:17.5px; margin-bottom:6px; }
.numlist__row p{ font-size:14.5px; color:var(--ink-2); }

/* ============ chip 驳回/要点清单 ============ */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chips .chip{ padding:8px 16px; font-size:13.5px; }

/* ============ CTA 通栏 ============ */
.cta-band{ background:var(--brown); color:var(--paper-3); }
.cta-band--dark{ background:var(--ink); }
.cta-band__inner{
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding:56px 0; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(22px,2.6vw,32px); color:var(--paper-3); margin-bottom:8px; }
.cta-band p{ color:rgba(244,238,226,.78); font-size:15px; }

/* 表单卡片 */
.form-card{
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow);
}
.form-card h3{ font-size:21px; margin-bottom:6px; }
.form-card .form-sub{ font-size:13.5px; color:var(--brown-3); margin-bottom:20px; }
.form-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* ============ 相关链接 ============ */
.rel{ padding:40px 0 80px; }
.rel__title{ font-size:15px; letter-spacing:.2em; color:var(--brown-2); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.rel__title::before{ content:""; width:20px; height:1px; background:var(--gold); }
.rel__list{ display:flex; flex-wrap:wrap; gap:12px; }
.rel__list a{
  padding:9px 18px; border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; color:var(--brown-2); background:var(--paper-3);
  transition:all var(--transition);
}
.rel__list a:hover{ border-color:var(--brown); color:var(--paper-3); background:var(--brown); transform:translateY(-2px); }

/* ============ 数据条（数字统计） ============ */
.stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; background:var(--ink); border-radius:var(--radius-lg); padding:36px 20px; }
.stats-bar .stat__num{ color:var(--gold); }
.stats-bar .stat__label{ color:rgba(244,238,226,.7); }

/* 警示区（假证风险） */
.warn-band{ background:var(--ink); color:var(--paper-3); }
.warn-band .sec-head__title{ color:var(--paper-3); }
.warn-band .sec-head__desc{ color:rgba(244,238,226,.7); }
.warn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.warn-item{ border:1px solid rgba(201,169,106,.35); border-radius:var(--radius-lg); padding:26px 22px; background:rgba(244,238,226,.04); }
.warn-item h3{ color:var(--gold); font-size:17px; margin-bottom:10px; }
.warn-item p{ font-size:14px; color:rgba(244,238,226,.78); line-height:1.85; }

/* ============ 工具类（替代内联样式） ============ */
.fig-plain{ margin-top:40px; }
.fig-plain img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; }
.fig-plain--sm{ margin-top:22px; }
.hl{ color:var(--brown); font-weight:700; }
.hl--gold{ color:var(--gold); font-weight:700; }
.mt-24{ margin-top:24px; }
.mt-16{ margin-top:16px; }

/* ============ 响应式 ============ */
@media (max-width:1080px){
  .split,.split--rev{ grid-template-columns:1fr; gap:34px; }
  .split--rev .split__fig{ order:0; }
  .card3,.card4,.feat-masonry,.warn-grid{ grid-template-columns:1fr 1fr; }
  .feat-masonry .feat:nth-child(even){ transform:none; }
}
@media (max-width:768px){
  .c-hero{ min-height:380px; padding:100px 0 48px; }
  .card3,.card4,.feat-masonry,.warn-grid,.duo,.form-grid2,.stats-bar{ grid-template-columns:1fr; }
  .split__seal{ right:8px; bottom:-12px; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
  .numlist__row{ grid-template-columns:44px 1fr; gap:14px; }
  .numlist__no{ font-size:24px; }
}

/* ============ 时间轴骨架（学历·遗失补办） ============ */
.timeline{ max-width:820px; margin:0 auto; }
.tl-node{ display:grid; grid-template-columns:88px 28px 1fr; gap:18px; align-items:start; }
.tl-node__time{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--brown); text-align:right; padding-top:3px; }
.tl-node__axis{ position:relative; height:100%; display:flex; justify-content:center; }
.tl-node__dot{ width:13px; height:13px; border-radius:50%; background:var(--gold); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line); margin-top:4px; }
.tl-node__axis::before{ content:""; position:absolute; top:16px; bottom:-14px; width:2px; background:var(--line); left:50%; transform:translateX(-50%); }
.tl-node:last-child .tl-node__axis::before{ display:none; }
.tl-node__body{ padding:0 0 26px; }
.tl-node__body h4{ font-size:17px; margin-bottom:6px; color:var(--ink); }
.tl-node__body p{ color:var(--ink-2); font-size:15px; line-height:1.8; }
@media (max-width:768px){
  .tl-node{ grid-template-columns:64px 22px 1fr; gap:12px; }
  .tl-node__time{ font-size:12px; }
}