/* ==========================================================================
   证书政策解读专用样式 zhengce.css（周口八大员人才网 pzsr.cn）
   骨架：页头横幅 → 彩色分类标签条 → 重点政策置顶大卡 → 政策卡片瀑布
       → 政策发布时间线 → 政策专题入口 → 订阅 CTA
   说明：本页专属前缀 zc-，不污染全局
   ========================================================================== */

/* ---------- 页头横幅（在 .page-hero 基础上叠加图文） ---------- */
.zc-hero{padding-bottom:clamp(60px,8vw,100px)}
.zc-hero .hero-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.25fr .85fr;gap:clamp(26px,4vw,56px);align-items:center;
}
.zc-hero .crumbs{margin-bottom:18px}
.zc-hero .hero-visual{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
}
.zc-hero .hero-visual img{width:100%;height:340px;object-fit:cover}
.zc-hero .hero-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(58,53,80,.35));
}
.zc-hero .hero-visual .v-tag{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-size:13px;color:#fff;background:rgba(58,53,80,.55);
  padding:6px 14px;border-radius:var(--r-full);backdrop-filter:blur(6px);
}
.zc-hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- 彩色分类标签条 ---------- */
.zc-catsec{padding-block:34px 10px}
.zc-cats{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.zc-cat{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;border-radius:var(--r-full);font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:transform .3s,box-shadow .3s;
}
.zc-cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.zc-cat::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.zc-cat.c-purple{background:var(--purple-mist);color:var(--purple-deep)}
.zc-cat.c-pink{background:var(--pink-soft);color:var(--pink-deep)}
.zc-cat.c-blue{background:var(--blue-mist);color:#3E8BC7}
.zc-cat.c-green{background:#DDF5E4;color:#2F8A55}
.zc-cat.c-orange{background:#FFEAD3;color:#C9741A}
.zc-cat.c-red{background:#FFE0E0;color:#C0392B}

/* ---------- 重点政策置顶大卡 ---------- */
.zc-featured{
  display:grid;grid-template-columns:1fr 1.15fr;gap:0;
  background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);
  backdrop-filter:blur(12px);
}
.zc-featured .f-img{position:relative;min-height:320px}
.zc-featured .f-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zc-featured .f-img .f-badge{
  position:absolute;top:18px;left:18px;z-index:2;
  background:var(--grad-pink);color:#fff;font-size:13px;font-weight:600;
  padding:7px 16px;border-radius:var(--r-full);box-shadow:var(--shadow-pink);
}
.zc-featured .f-body{padding:clamp(26px,3.5vw,46px)}
.zc-featured .f-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.zc-featured h2{font-size:clamp(22px,2.6vw,30px);line-height:1.4;margin-bottom:14px}
.zc-featured p{font-size:15px;color:var(--ink-2);margin-bottom:14px}
.zc-featured .f-points{display:grid;gap:10px;margin:18px 0 24px}
.zc-featured .f-points li{
  display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);
}
.zc-featured .f-points svg{width:18px;height:18px;color:var(--purple-deep);flex:none;margin-top:3px}

/* ---------- 政策卡片瀑布 ---------- */
.zc-masonry{
  columns:3;column-gap:22px;
}
.zc-card{
  display:inline-block;width:100%;margin-bottom:22px;
  background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);
  backdrop-filter:blur(10px);break-inside:avoid;
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.zc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--purple-soft)}
.zc-card .zc-tag{
  display:inline-block;font-size:12px;font-weight:600;
  padding:4px 12px;border-radius:var(--r-full);margin-bottom:14px;
}
.zc-tag.t-purple{background:var(--purple-mist);color:var(--purple-deep)}
.zc-tag.t-pink{background:var(--pink-soft);color:var(--pink-deep)}
.zc-tag.t-blue{background:var(--blue-mist);color:#3E8BC7}
.zc-tag.t-green{background:#DDF5E4;color:#2F8A55}
.zc-tag.t-orange{background:#FFEAD3;color:#C9741A}
.zc-card h3{font-size:18px;line-height:1.45;margin-bottom:10px}
.zc-card p{font-size:14px;color:var(--ink-3);margin-bottom:14px}
.zc-card .zc-date{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.zc-card .zc-date svg{width:13px;height:13px}
.zc-card .zc-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:14px;font-weight:600;color:var(--purple-deep);
}
.zc-card .zc-more svg{width:14px;height:14px;transition:transform .3s}
.zc-card:hover .zc-more svg{transform:translateX(4px)}

/* ---------- 政策时间线 ---------- */
.zc-timeline{position:relative;max-width:860px;margin-inline:auto;padding-left:30px}
.zc-timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;
  background:var(--grad-purple);border-radius:3px;
}
.zc-tl-item{position:relative;padding:0 0 34px 26px}
.zc-tl-item:last-child{padding-bottom:0}
.zc-tl-item::before{
  content:"";position:absolute;left:-30px;top:6px;width:19px;height:19px;
  border-radius:50%;background:#fff;border:4px solid var(--purple);
  box-shadow:0 0 0 5px var(--purple-mist);
}
.zc-tl-item.tl-pink::before{border-color:var(--pink);box-shadow:0 0 0 5px var(--pink-soft)}
.zc-tl-item.tl-blue::before{border-color:var(--blue);box-shadow:0 0 0 5px var(--blue-mist)}
.zc-tl-item .tl-date{
  display:inline-block;font-size:13px;font-weight:700;color:var(--purple-deep);
  background:var(--purple-mist);padding:3px 12px;border-radius:var(--r-full);margin-bottom:10px;
}
.zc-tl-item h3{font-size:18px;margin-bottom:8px}
.zc-tl-item p{font-size:14px;color:var(--ink-3)}

/* ---------- 政策专题入口 ---------- */
.zc-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.zc-topic{
  display:flex;flex-direction:column;gap:12px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-sm);
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.zc-topic:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--purple-soft)}
.zc-topic .zt-ico{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--purple-mist);color:var(--purple-deep);
}
.zc-topic .zt-ico svg{width:22px;height:22px}
.zc-topic.pink .zt-ico{background:var(--pink-soft);color:var(--pink-deep)}
.zc-topic.blue .zt-ico{background:var(--blue-mist);color:#3E8BC7}
.zc-topic h3{font-size:17px}
.zc-topic p{font-size:14px;color:var(--ink-3)}
.zc-topic .zt-more{font-size:14px;font-weight:600;color:var(--purple-deep);display:inline-flex;align-items:center;gap:6px}

/* ---------- 订阅 CTA ---------- */
.zc-subsec{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#7C6CD9 0%,#FF7EBC 55%,#6FBFF3 100%);
  padding:clamp(50px,7vw,80px) 0;border-radius:var(--r-xl);
  width:min(1200,92%);margin:0 auto var(--sec-pad);
}
.zc-subsec::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 220px at 12% 20%,rgba(255,255,255,.25),transparent 60%),
             radial-gradient(380px 220px at 90% 80%,rgba(255,255,255,.2),transparent 60%);
}
.zc-subsec .container{position:relative;z-index:2;text-align:center}
.zc-subsec h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.zc-subsec p{color:rgba(255,255,255,.92);max-width:560px;margin:0 auto 26px}
.zc-subform{
  display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap;justify-content:center;
}
.zc-subform input{
  flex:1;min-width:220px;padding:14px 20px;border-radius:var(--r-full);
  border:none;outline:none;font-size:15px;
}
.zc-subform .btn{box-shadow:0 10px 26px rgba(0,0,0,.18)}
.zc-subnote{font-size:12px;color:rgba(255,255,255,.8);margin-top:14px}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .zc-hero .hero-grid{grid-template-columns:1fr}
  .zc-hero .hero-visual img{height:260px}
  .zc-featured{grid-template-columns:1fr}
  .zc-featured .f-img{min-height:220px}
  .zc-masonry{columns:2}
  .zc-topics{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .zc-masonry{columns:1}
  .zc-topics{grid-template-columns:1fr}
}
@media (max-width:480px){
  .zc-hero .hero-visual img{height:200px}
  .zc-featured .f-body{padding:22px}
  .zc-subsec{border-radius:var(--r-lg)}
}