/* ============================================================
   dianli-dianlan.css — 电力电缆作业（L7 左固定右流动）
   左侧固定竖排视觉列，右侧内容流式滚动
   ============================================================ */

/* ---------- Hero 不对称分割 ---------- */
.dl-hero{
  position:relative; min-height:88vh; display:grid; grid-template-columns:1fr 1fr;
  padding-top:var(--header-h);
}
.dl-hero__media{ position:relative; }
.dl-hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dl-hero__panel{
  background:var(--green-900); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,6vw,80px);
}
.dl-hero .breadcrumb{ color:rgba(251,248,241,.6); margin-bottom:20px; }
.dl-hero .breadcrumb a{ color:var(--cream-100); }
.dl-hero .breadcrumb .cur{ color:rgba(251,248,241,.85); }
.dl-hero__eyebrow{ font-size:13px; letter-spacing:.34em; color:var(--brown-500); margin-bottom:16px; }
.dl-hero h1{ color:var(--cream-50); }
.dl-hero__lead{ color:rgba(251,248,241,.8); margin:20px 0 30px; font-size:16px; }
.dl-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- L7 骨架 ---------- */
.dl-shell{
  display:grid; grid-template-columns:240px 1fr; gap:clamp(30px,5vw,60px);
  width:min(1180px,92%); margin-inline:auto; padding:clamp(50px,7vw,90px) 0;
}
.dl-side{
  position:sticky; top:calc(var(--header-h) + 24px); align-self:start;
  padding-right:24px; border-right:1px solid var(--line);
}
.dl-side__num{
  font-family:var(--font-serif); font-size:60px; color:var(--cream-200); line-height:1; display:block;
}
.dl-side__v{
  display:block; writing-mode:vertical-rl; font-size:12px; letter-spacing:.4em;
  color:var(--brown-600); margin:20px 0 26px; height:150px;
}
.dl-side__nav{ display:flex; flex-direction:column; gap:4px; }
.dl-side__nav a{
  padding:9px 12px; font-size:14.5px; color:var(--ink-soft); border-left:2px solid transparent;
  transition:all .3s var(--ease);
}
.dl-side__nav a:hover{ color:var(--green-800); border-left-color:var(--brown-500); background:rgba(176,141,102,.08); }

/* ---------- 流动内容块 ---------- */
.dl-flow{ min-width:0; }
.dl-block{ padding:clamp(34px,4vw,54px) 0; border-bottom:1px solid var(--line); }
.dl-block--tint{ background:var(--cream-100); margin:0 -9999px; padding-left:9999px; padding-right:9999px; }
.dl-block__no{
  font-family:var(--font-serif); font-size:14px; letter-spacing:.2em; color:var(--brown-500);
}
.dl-block h2{ margin:6px 0 16px; }
.dl-block p{ margin-bottom:14px; }
.dl-block p a{ color:var(--green-700); text-decoration:underline; text-underline-offset:4px; }
.dl-block__more{ font-size:14.5px; }
.dl-block__more a{ color:var(--brown-700); text-decoration:underline; }

/* 技能三卡 */
.dl-skills{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:10px; }
.dl-skill{
  background:var(--cream-50); border-radius:var(--radius-m); padding:22px;
  border-top:3px solid var(--green-700);
}
.dl-skill b{ font-family:var(--font-serif); font-size:18px; color:var(--green-900); display:block; margin-bottom:8px; }
.dl-skill p{ font-size:14px; }

/* 图 + 清单 */
.dl-fig{ margin:20px 0; }
.dl-fig img{ width:100%; height:320px; object-fit:cover; border-radius:var(--radius-m); }
.dl-fig figcaption{ font-size:13px; color:var(--muted); margin-top:8px; }
.dl-list{ display:grid; gap:10px; margin-top:14px; }
.dl-list li{ padding-left:24px; position:relative; color:var(--ink-soft); }
.dl-list li::before{ content:"—"; position:absolute; left:0; color:var(--brown-500); }

/* 报考条件 2x2 */
.dl-reqgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
.dl-reqgrid > div{ border:1px solid var(--line); border-radius:var(--radius-s); padding:16px 18px; background:var(--cream-50); }
.dl-reqgrid b{ color:var(--green-900); font-family:var(--font-serif); }
.dl-reqgrid p{ font-size:14px; margin:6px 0 0; }

/* 考试双栏 */
.dl-examcols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:16px; }
.dl-examcol{ border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; }
.dl-examcol h3{ font-size:18px; margin-bottom:14px; }
.dl-examcol ol{ display:grid; gap:10px; counter-reset:dlc; }
.dl-examcol ol li{ padding-left:8px; color:var(--ink-soft); font-size:14.5px; list-style:decimal inside; }
.dl-examcol--line{ background:var(--green-900); }
.dl-examcol--line h3{ color:var(--cream-100); }
.dl-examcol--line ol li{ color:rgba(251,248,241,.78); }

/* 复审数据条 */
.dl-fush{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0; }
.dl-fush__item{
  text-align:center; background:var(--cream-50); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:22px 10px;
}
.dl-fush__item b{ font-family:var(--font-serif); font-size:30px; color:var(--green-800); display:block; }
.dl-fush__item span{ font-size:13px; color:var(--muted); }

/* FAQ */
.dl-faq{ display:grid; gap:12px; }
.dl-faq__item{ border:1px solid var(--line); border-radius:var(--radius-s); background:var(--cream-50); padding:0 20px; }
.dl-faq__item summary{ cursor:pointer; list-style:none; padding:16px 0; font-weight:600; color:var(--green-900); font-size:15.5px; }
.dl-faq__item summary::-webkit-details-marker{ display:none; }
.dl-faq__item summary::before{ content:"Q "; color:var(--brown-600); font-family:var(--font-serif); }
.dl-faq__item p{ padding-bottom:18px; font-size:14.5px; }
.dl-faq__item p a{ color:var(--green-700); text-decoration:underline; }

/* CTA */
.dl-block--cta{ background:var(--green-900); margin:40px -9999px 0; padding:50px 9999px; }
.dl-block--cta h2{ color:var(--cream-100); }
.dl-block--cta p{ color:rgba(251,248,241,.75); }
.dl-block--cta p a{ color:var(--brown-500); }
.dl-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.dl-form .field textarea{ min-height:90px; }
.dl-form .field:nth-child(3){ grid-column:1 / -1; }
.dl-form .btn{ align-self:end; grid-column:1 / -1; }
.dl-form .field input,.dl-form .field textarea{ background:rgba(251,248,241,.95); }

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .dl-hero{ grid-template-columns:1fr; min-height:auto; }
  .dl-hero__media{ height:300px; }
  .dl-shell{ grid-template-columns:1fr; }
  .dl-side{ position:static; display:flex; flex-wrap:wrap; align-items:center; gap:16px; border-right:0; border-bottom:1px solid var(--line); padding-bottom:18px; }
  .dl-side__v{ display:none; }
  .dl-side__nav{ flex-direction:row; flex-wrap:wrap; }
  .dl-side__nav a{ border-left:0; border-bottom:2px solid transparent; }
  .dl-skills,.dl-examcols,.dl-fush{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .dl-reqgrid{ grid-template-columns:1fr; }
  .dl-form{ grid-template-columns:1fr; }
}