/* ==========================================================================
   diangong-high.html 高压电工证 私有样式
   版式：右文左图 hero + 双栏条件对照 + 警示条 + 三栏考核卡
   ========================================================================== */

/* ---------- Hero：右文左图 ---------- */
.gh-hero{
  padding:calc(var(--topbar-h) + var(--header-h) + 64px) 0 88px;
  background:
    radial-gradient(900px 460px at 108% 0%, rgba(185,138,94,.20), transparent 58%),
    linear-gradient(165deg, var(--cream) 0%, var(--cream-3) 100%);
}
.gh-hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.gh-kicker{font-size:13px;letter-spacing:3px;color:var(--wood-deep);font-weight:600;margin-bottom:18px}
.gh-title{font-size:clamp(30px,4vw,46px);line-height:1.28;letter-spacing:2px;margin-bottom:20px}
.gh-line{display:block;opacity:0;filter:blur(10px);transform:translateX(-18px);animation:ghBlur .9s var(--ease) forwards}
.gh-line-2{color:var(--green-dark);animation-delay:.25s}
@keyframes ghBlur{to{opacity:1;filter:blur(0);transform:translateX(0)}}
.gh-desc{font-size:15.5px;line-height:2;max-width:560px;margin-bottom:28px}
.gh-actions{display:flex;gap:14px;flex-wrap:wrap}

.gh-photo{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  border:10px solid var(--white);outline:1px solid var(--line);
}
.gh-photo img{width:100%;height:auto}

/* ---------- 双栏条件对照 ---------- */
.gh-compare{background:var(--white)}
.gh-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.gh-col{background:var(--cream-3);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow-sm)}
.gh-col-title{
  font-size:19px;letter-spacing:1px;padding-bottom:14px;margin-bottom:18px;
  border-bottom:2px solid var(--line);position:relative;
}
.gh-col-title::after{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:2px}
.gh-col-a::after{background:var(--green-deep)}
.gh-col-b::after{background:var(--wood-deep)}
.gh-col-list{display:flex;flex-direction:column;gap:16px}
.gh-col-list li{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.gh-col-list li:last-child{border-bottom:0;padding-bottom:0}
.gh-col-list strong{font-size:15px;color:var(--ink)}
.gh-col-list span{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- 安全须知条 ---------- */
.gh-warnband{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gh-warn-inner{display:flex;gap:16px;align-items:flex-start;padding:22px 0}
.gh-warn-ic{width:44px;height:44px;border-radius:50%;background:#c0604a;color:#fff;display:grid;place-items:center;flex-shrink:0}
.gh-warn-inner p{font-size:14.5px;line-height:1.9;color:var(--ink)}
.gh-warn-inner strong{color:#c0604a}

/* ---------- 考核内容 ---------- */
.gh-exam{background:var(--cream)}
.gh-exam-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gh-exam-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  box-shadow:var(--shadow-sm);border-top:4px solid var(--green);transition:transform .35s var(--ease);
}
.gh-exam-item:hover{transform:translateY(-5px)}
.gh-exam-item:nth-child(2){border-top-color:var(--wood)}
.gh-exam-item:nth-child(3){border-top-color:var(--green-dark)}
.gh-exam-tag{
  display:inline-block;font-size:12px;letter-spacing:2px;font-weight:700;color:var(--green-deep);
  background:rgba(143,174,138,.18);padding:4px 12px;border-radius:999px;margin-bottom:14px;
}
.gh-exam-tag-b{color:var(--wood-deep);background:rgba(185,138,94,.16)}
.gh-exam-tag-c{color:var(--green-dark);background:rgba(63,90,69,.14)}
.gh-exam-item h3{font-size:17.5px;margin-bottom:10px}
.gh-exam-item p{font-size:14px;line-height:1.9}

/* ---------- 材料 + 费用 ---------- */
.gh-material{background:var(--white)}
.gh-mat-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.gh-h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:1px;margin:8px 0 22px}
.gh-mat-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);position:relative;margin-bottom:22px}
.gh-mat-photo img{width:100%;height:auto}
.gh-mat-photo figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(58,53,45,.7));color:#f6f2e6;font-size:12.5px;padding:28px 16px 10px;letter-spacing:1px}
.gh-mat-list{display:flex;flex-direction:column;gap:10px}
.gh-mat-list li{
  font-size:14px;color:var(--ink-soft);padding:11px 16px 11px 38px;position:relative;
  background:var(--cream-3);border-radius:10px;
}
.gh-mat-list li::before{content:"";position:absolute;left:16px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--green)}

.gh-fee-box{
  background:var(--green-dark);color:#eef2e7;border-radius:var(--radius);padding:32px 28px;
  box-shadow:var(--shadow-md);position:sticky;top:110px;
}
.gh-fee-box h3{color:#f6f2e6;font-size:19px;margin-bottom:12px;letter-spacing:1px}
.gh-fee-box p{color:#c6d1bd;font-size:14px;line-height:1.9;margin-bottom:12px}
.gh-fee-box strong{color:#f0e8d0}
.gh-fee-small{font-size:12.5px !important;color:#aebba5 !important}

/* ---------- FAQ ---------- */
.gh-faq{background:var(--cream)}
.gh-faq-wrap{max-width:840px}
.gh-faq-list{display:flex;flex-direction:column;gap:12px}
.gh-faq-item{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gh-faq-item summary{
  cursor:pointer;list-style:none;padding:17px 22px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;gap:14px;
}
.gh-faq-item summary::-webkit-details-marker{display:none}
.gh-faq-item summary::after{content:"＋";color:var(--wood-deep);font-size:19px;flex-shrink:0;transition:transform .3s}
.gh-faq-item[open] summary::after{transform:rotate(45deg)}
.gh-faq-item p{padding:0 22px 16px;font-size:14px;line-height:1.9}

/* ---------- 相关阅读 ---------- */
.gh-rel{background:var(--white)}
.gh-rel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gh-rel{background:var(--cream-3);border:1px solid var(--line);border-radius:12px;padding:20px 22px;transition:border-color .3s,transform .3s}
.gh-rel:hover{border-color:var(--wood);transform:translateY(-3px)}
.gh-rel h3{font-size:15px;margin-bottom:6px}
.gh-rel p{font-size:12.5px;color:var(--ink-faint)}

/* ---------- 底部 CTA ---------- */
.gh-cta{background:linear-gradient(135deg,var(--wood-deep),var(--wood));position:relative;overflow:hidden}
.gh-cta::after{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,253,246,.08)}
.gh-cta-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center;padding:72px 0;position:relative;z-index:1}
.gh-cta-copy h2{color:#fff;font-size:clamp(22px,2.8vw,32px);letter-spacing:1.5px;line-height:1.5;margin:10px 0 12px}
.gh-cta-copy p{color:#f6ecdd;font-size:14.5px}
.gh-cta-btn{display:flex;flex-direction:column;align-items:flex-start}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .gh-hero-grid{grid-template-columns:1fr;gap:40px}
  .gh-hero-media{max-width:620px;margin:0 auto;order:-1}
  .gh-compare-grid{grid-template-columns:1fr}
  .gh-exam-wrap{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .gh-mat-grid{grid-template-columns:1fr;gap:36px}
  .gh-fee-box{position:static}
  .gh-rel-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .gh-hero{padding-top:calc(var(--topbar-h) + var(--header-h) + 30px)}
  .gh-rel-row{grid-template-columns:1fr}
  .gh-cta-inner{grid-template-columns:1fr;padding:52px 0}
  .gh-cta-btn{align-items:stretch}
}