/* cailiaoyuan.css · 材料员岗位页 */

/* 题头 H1 全幅深色Banner图 */
.cl-hero{
  position:relative;min-height:460px;display:flex;align-items:center;
  padding:calc(var(--header-h) + 60px) 0 70px;color:var(--cream-100);
}
.cl-hero-bg{
  position:absolute;inset:0;
  background:url("../images/pos-cailiao-1.jpg") center/cover no-repeat;
}
.cl-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(36,20,7,.94) 30%,rgba(15,33,24,.82) 70%,rgba(15,33,24,.6));
}
.cl-hero-inner{position:relative;z-index:2}
.cl-hero-kicker{font-size:13px;letter-spacing:.24em;color:var(--brass-light);font-weight:600;margin:16px 0 10px}
.cl-hero h1{font-size:clamp(38px,5.5vw,62px);color:var(--cream-50);margin-bottom:16px}
.cl-hero-sub{max-width:600px;color:var(--cream-200);line-height:1.9;margin-bottom:26px}
.cl-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.cl-duty-note{margin-top:16px;font-size:14.5px;color:var(--brown-600);background:var(--cream-100);border-left:4px solid var(--brass);border-radius:var(--r-xs);padding:14px 16px;line-height:1.9}

/* ① B1变体 右图左文 */
.cl-duty{background:var(--cream-50)}
.cl-duty-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.cl-duty-body h2{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.cl-duty-body p{color:var(--ink-soft);margin-bottom:16px}
.cl-duty-points li{padding:9px 0;color:var(--ink-soft);font-size:14.5px;border-bottom:1px dashed var(--line)}
.cl-duty-points li:last-child{border-bottom:none}
.cl-duty-media{position:relative}
.cl-duty-media img{width:100%;height:340px;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--shadow-lg);border:3px solid var(--green-700)}
.cl-duty-plate{position:absolute;right:-12px;bottom:-14px;background:var(--brass);color:var(--cream-50);font-family:var(--font-display);font-weight:700;padding:10px 18px;border-radius:var(--r-xs);letter-spacing:.1em}

/* ② C4 斑马表（深棕底） */
.cl-table{overflow-x:auto;border:1px solid var(--line-dark);border-radius:var(--r-sm)}
.cl-table-inner th{background:var(--brown-900)}
.cl-table-inner tr:nth-child(even) td{background:rgba(251,247,236,.05)}
.cl-table-inner td{color:var(--cream-200);border-color:var(--line-dark)}
.cl-table-inner td:first-child{color:var(--brass-light)}
.cl-cond-note{text-align:center;margin-top:18px;color:var(--cream-200);font-size:13.5px}

/* ③ D4 楼梯式进度 */
.cl-exam{background:var(--cream-100)}
.cl-stairs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end}
.cl-stair{
  background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:24px 20px;border-top:4px solid var(--brown-600);
}
.cl-stair:nth-child(1){margin-top:60px}
.cl-stair:nth-child(2){margin-top:40px}
.cl-stair:nth-child(3){margin-top:20px}
.cl-stair b{display:inline-block;font-size:12px;letter-spacing:.14em;color:var(--brass);font-weight:700;margin-bottom:10px}
.cl-stair h3{font-size:18px;color:var(--brown-700);margin-bottom:8px}
.cl-stair p{font-size:13.5px;color:var(--ink-soft)}

/* ④ E3 进度条组 */
.cl-bars{max-width:760px;margin:0 auto;display:grid;gap:22px}
.cl-bar-head{display:flex;justify-content:space-between;font-size:15px;font-weight:600;color:var(--brown-700);margin-bottom:8px}
.cl-bar-head b{color:var(--green-600)}
.cl-bar-track{height:14px;background:var(--cream-200);border-radius:var(--r-xs);overflow:hidden}
.cl-bar-track i{display:block;height:100%;background:linear-gradient(90deg,var(--green-600),var(--brass));border-radius:var(--r-xs)}
.cl-bar-note{text-align:center;margin-top:26px;color:var(--muted);font-size:14px}
.cl-bar-note a{color:var(--green-600);font-weight:600}

/* ⑤ B7 圆角缺角图 */
.cl-local{background:var(--cream-50)}
.cl-local-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,60px);align-items:center}
.cl-local-media img{
  width:100%;height:360px;object-fit:cover;
  border-radius:60px 8px 60px 8px;box-shadow:var(--shadow-lg);
}
.cl-local-body h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px}
.cl-local-body p{color:var(--ink-soft);margin-bottom:14px}

/* ⑥ C2 工业窗格 */
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cl-win{
  background:rgba(251,247,236,.05);border:1px solid var(--line-dark);border-radius:var(--r-sm);
  padding:28px 24px;border-top:3px solid var(--brass);
}
.cl-win h3{color:var(--cream-50);font-size:19px;margin-bottom:10px}
.cl-win p{color:var(--cream-200);font-size:14px;line-height:1.9}

/* ⑦ F1 手风琴变体 */
.cl-faq{background:var(--cream-100)}
.cl-acc{max-width:820px;margin:0 auto}
.cl-acc-item{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;overflow:hidden}
.cl-acc-q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-size:16px;font-weight:600;color:var(--brown-800)}
.cl-sign{color:var(--brass);font-size:20px;transition:transform .25s}
.cl-acc-item.open .cl-sign{transform:rotate(45deg)}
.cl-acc-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.cl-acc-a p{padding:0 22px 18px;color:var(--ink-soft);line-height:1.9;font-size:14.5px}

/* ⑧ G3 电话横幅 */
.cl-cta{background:linear-gradient(120deg,var(--green-900),var(--green-700));padding:clamp(44px,6vw,68px) 0;border-top:4px solid var(--brass)}
.cl-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cl-cta-text h2{color:var(--cream-50);font-size:clamp(24px,3vw,34px);margin-bottom:8px}
.cl-cta-text p{color:var(--cream-200)}
.cl-cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* 列宽与进度宽度（替代内联style） */
.cl-table-inner .cw-a{width:30%}
.cl-table-inner .cw-b,.cl-table-inner .cw-c{width:35%}
.cl-cond-note a{color:var(--brass-light)}
.cl-bar-track .w85{width:85%}
.cl-bar-track .w80{width:80%}
.cl-bar-track .w70{width:70%}

/* 新·关联岗位导航（深色底，8芯片云） */
.cl-nav{background:linear-gradient(120deg,var(--brown-900),var(--brown-700))}
.cl-nav .sec-lead{color:var(--cream-200);max-width:600px;margin:0 auto}
.cl-pos-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:860px;margin-top:26px}
.cl-pos-chips a{padding:11px 22px;border:1px solid var(--line-dark);border-radius:var(--r-xs);color:var(--cream-200);font-size:14.5px;font-weight:600;background:rgba(251,247,236,.05)}
.cl-pos-chips a:hover{border-color:var(--brass);color:var(--brass-light)}
.cl-pos-chips a.active{background:var(--brass);border-color:var(--brass);color:var(--cream-50)}

/* 新·双城对比（三列对照表） */
.cl-dual-table{max-width:820px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.cl-dual-row{display:grid;grid-template-columns:120px 1fr 1fr;border-bottom:1px solid var(--line)}
.cl-dual-row>span,.cl-dual-row>b{padding:14px 18px;font-size:14px}
.cl-dual-row>b{color:var(--brown-700);font-weight:700}
.cl-dual-row:not(.cl-dual-head)>span{color:var(--ink-soft);border-left:1px dashed var(--line)}
.cl-dual-head{background:var(--green-700);color:var(--cream-50);font-weight:700}
.cl-dual-head span{color:var(--cream-50)}
.cl-dual-note{max-width:820px;margin-top:16px;font-size:13.5px;color:var(--muted)}

@media(max-width:900px){
  .cl-duty-wrap,.cl-local-wrap{grid-template-columns:1fr}
  .cl-stairs,.cl-grid{grid-template-columns:1fr}
  .cl-stair{margin-top:0 !important}
  .cl-dual-row{grid-template-columns:1fr}
  .cl-dual-row:not(.cl-dual-head)>span{border-left:none;border-top:1px dashed var(--line)}
}