/* ==========================================================================
   资质人员配置标准页 zizhi.css（周口八大员人才网 pzsr.cn）
   骨架：页面横幅(图文) → 配置标准大表格 → 人员数量悬浮卡(不等宽)
       → 常见配置组合卡 → 图文说明 → 数据条 → 下载CTA → 底部CTA
   前缀：zz-
   ========================================================================== */

/* ---------- 1. 页面横幅（图文双栏） ---------- */
.zz-hero{padding-top:calc(var(--nav-h) + 40px)}
.zz-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);
  align-items:center;margin-top:26px;
}
.zz-hero-txt .sub{margin-top:16px}
.zz-hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.zz-hero-img{position:relative}
.zz-hero-img img{
  width:100%;height:380px;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);border:6px solid rgba(255,255,255,.7);
}
.zz-hero-img::after{
  content:"";position:absolute;right:-18px;bottom:-18px;width:120px;height:120px;border-radius:28px;
  background:var(--grad-pink);opacity:.5;z-index:-1;
}

/* ---------- 2. 配置标准大表格 ---------- */
.zz-table-wrap{
  overflow-x:auto;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  background:var(--glass);backdrop-filter:blur(10px);
}
.zz-table{
  width:100%;border-collapse:collapse;table-layout:fixed;min-width:760px;
}
.zz-table thead th{
  background:var(--grad-purple);color:#fff;font-size:14px;font-weight:600;
  padding:15px 12px;text-align:center;letter-spacing:.5px;
}
.zz-table tbody td{
  padding:14px 12px;text-align:center;font-size:14px;color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.zz-table tbody tr:last-child td{border-bottom:none}
.zz-table tbody tr{transition:background .25s}
.zz-table tbody tr:hover{background:var(--purple-mist)}
.zz-table .zz-cat{
  text-align:left;font-weight:600;color:var(--ink);
  background:rgba(237,230,252,.55);
}
.zz-table .zz-note{font-size:12.5px;color:var(--ink-3)}
.zz-table-tip{
  max-width:900px;margin:22px auto 0;font-size:13.5px;color:var(--ink-3);
  text-align:center;
}
.zz-table-tip a{color:var(--purple-deep);font-weight:600}
.zz-table-tip a:hover{color:var(--pink-deep)}

/* ---------- 3. 人员数量悬浮卡（不等宽磁贴） ---------- */
.zz-float-sec{padding:var(--sec-pad) 0}
.zz-float-grid{
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,auto);gap:20px;
}
.zz-float{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 26px;display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);
  transition:transform .35s,box-shadow .35s,border-color .35s;position:relative;overflow:hidden;
}
.zz-float:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--purple-soft)}
.zz-float-lv{
  display:inline-flex;align-self:flex-start;font-size:12.5px;font-weight:600;
  padding:4px 14px;border-radius:var(--r-full);
  background:var(--purple-mist);color:var(--purple-deep);
}
.zz-float-lv.pink{background:var(--pink-soft);color:var(--pink-deep)}
.zz-float-lv.blue{background:var(--blue-mist);color:#3E8BC7}
.zz-float-num{font-size:44px;font-weight:800;line-height:1}
.zz-float-num span{font-size:16px;font-weight:600;margin-left:4px}
.zz-float p{font-size:13.5px;color:var(--ink-3)}
.zz-float a{margin-top:auto;font-size:13px;font-weight:600;color:var(--purple-deep)}
.zz-float a:hover{color:var(--pink-deep)}
/* 不等宽布局 */
.f-a{grid-column:span 5;grid-row:span 2}
.f-b{grid-column:span 4;grid-row:span 2}
.f-c{grid-column:span 3;grid-row:span 2}
.f-d{grid-column:span 12;grid-row:span 1;flex-direction:row;align-items:center;gap:18px}
.f-d .zz-float-num{font-size:32px}
.f-d p{max-width:520px}

/* ---------- 4. 常见配置组合卡 ---------- */
.zz-combo-sec{background:rgba(255,255,255,.5)}
.zz-combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.zz-combo{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .35s,box-shadow .35s;
}
.zz-combo:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.zz-combo-head h3{font-size:19px;margin-top:12px}
.zz-combo ul{display:grid;gap:9px}
.zz-combo ul li{font-size:14px;color:var(--ink-2);padding:8px 0;border-bottom:1px dashed var(--line)}
.zz-combo ul li b{color:var(--ink)}
.zz-combo-note{font-size:13px;color:var(--ink-3)}
.zz-combo-note a{color:var(--purple-deep)}
.zz-combo .btn{margin-top:auto;align-self:flex-start}

/* ---------- 5. 图文说明区 ---------- */
.zz-doc-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}
.zz-doc-img img{
  width:100%;height:360px;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.zz-doc-txt h2{font-size:clamp(22px,2.6vw,30px);margin:14px 0 16px}
.zz-doc-txt p{font-size:15px;margin-bottom:14px}
.zz-doc-txt p a{color:var(--purple-deep);font-weight:600}
.zz-doc-points{display:grid;gap:10px;margin-top:18px}
.zz-doc-points div{
  display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink);
}
.zz-doc-points svg{
  width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--pink-soft);color:var(--pink-deep);padding:4px;
}

/* ---------- 6. 服务数据条 ---------- */
.zz-data-bar{
  padding:clamp(40px,5vw,64px) 0;
  background:linear-gradient(120deg,var(--purple-mist),var(--pink-soft) 55%,var(--blue-mist));
}
.zz-data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.zz-data .num{font-size:clamp(30px,3.6vw,44px);font-weight:800}
.zz-data .lbl{font-size:13.5px;color:var(--ink-2);margin-top:4px}

/* ---------- 7. 下载 CTA ---------- */
.zz-dl-cta{padding:var(--sec-pad) 0}
.zz-dl-card{
  display:grid;grid-template-columns:.9fr 1.1fr;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);
}
.zz-dl-img{min-height:280px}
.zz-dl-img img{width:100%;height:100%;object-fit:cover}
.zz-dl-txt{padding:clamp(28px,4vw,48px)}
.zz-dl-txt h2{font-size:clamp(22px,2.8vw,32px);margin:12px 0 14px}
.zz-dl-txt p{font-size:15px;color:var(--ink-2);margin-bottom:22px}
.zz-dl-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 8. 底部 CTA ---------- */
.zz-bottom-cta{
  text-align:center;padding:clamp(56px,8vw,90px) 0;
  background:linear-gradient(135deg,var(--purple-mist),var(--pink-soft) 55%,var(--blue-mist));
}
.zz-bottom-cta h2{font-size:clamp(24px,3.4vw,38px);margin-bottom:12px}
.zz-bottom-cta p{color:var(--ink-2);margin-bottom:26px;font-size:clamp(14px,1.5vw,16px)}
.zz-bottom-cta .btn{margin:0 6px}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .zz-hero-grid{grid-template-columns:1fr}
  .zz-hero-img img{height:300px}
  .zz-float-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .f-a,.f-b,.f-c,.f-d{grid-column:auto;grid-row:auto}
  .f-d{flex-direction:column;align-items:flex-start}
  .zz-combo-grid{grid-template-columns:1fr}
  .zz-doc-grid{grid-template-columns:1fr}
  .zz-doc-img{max-width:560px}
  .zz-data-grid{grid-template-columns:1fr 1fr}
  .zz-dl-card{grid-template-columns:1fr}
  .zz-dl-img{min-height:220px}
}
@media (max-width:768px){
  .zz-float-grid{grid-template-columns:1fr}
  .zz-table thead th{font-size:13px;padding:12px 8px}
  .zz-table tbody td{font-size:13px;padding:11px 8px}
}
@media (max-width:480px){
  .zz-hero-btns .btn{width:100%}
  .zz-float-num{font-size:36px}
  .zz-data-grid{grid-template-columns:1fr 1fr;gap:12px}
  .zz-data .num{font-size:26px}
  .zz-dl-btns .btn{width:100%}
}


/* 自动生成：列宽规则（原 <th style=width> 迁移，禁止内联样式） */
.zz-table-wrap th:nth-child(1){width:20%}
.zz-table-wrap th:nth-child(2){width:11%}
.zz-table-wrap th:nth-child(3){width:11%}
.zz-table-wrap th:nth-child(4){width:11%}
.zz-table-wrap th:nth-child(5){width:11%}
.zz-table-wrap th:nth-child(6){width:11%}
.zz-table-wrap th:nth-child(7){width:11%}
.zz-table-wrap th:nth-child(8){width:14%}

/* ---------- 8. 配置常见误区 FAQ ---------- */
.zz-mis-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.zz-mis-list details{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 22px;box-shadow:var(--shadow-sm);transition:border-color .3s;
}
.zz-mis-list details[open]{border-color:var(--purple-soft)}
.zz-mis-list summary{
  cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);list-style:none;
  display:flex;align-items:center;gap:10px;
}
.zz-mis-list summary::-webkit-details-marker{display:none}
.zz-mis-list summary::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--grad-pink);flex:none;
}
.zz-mis-list details p{font-size:14px;color:var(--ink-2);margin-top:12px;padding-left:18px}

/* ---------- 9. 配置数据条 ---------- */
.zz-stat-sec{padding:clamp(46px,6vw,72px) 0;background:rgba(255,255,255,.5)}
.zz-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.zz-stat .num{font-size:clamp(30px,3.6vw,44px);font-weight:800}
.zz-stat .lbl{font-size:13.5px;color:var(--ink-3);margin-top:6px}
.zz-stat-note{max-width:760px;margin:26px auto 0;font-size:13px;color:var(--ink-3);text-align:center}
.zz-stat-note a{color:var(--purple-deep);font-weight:600}

@media (max-width:1024px){
  .zz-stat-grid{grid-template-columns:1fr 1fr}
}