/* ==========================================================================
   hangong.html 焊工证 私有样式
   版式：上下分层 hero + 条件四宫格 + 横向四步流程 + 实操要点卡
   ========================================================================== */

/* ---------- Hero：上下分层 ---------- */
.hg-hero{padding-top:calc(var(--topbar-h) + var(--header-h));background:var(--cream)}
.hg-hero-media{height:min(46vw,460px);overflow:hidden}
.hg-hero-media img{width:100%;height:100%;object-fit:cover}
.hg-hero-body{
  background:
    radial-gradient(800px 300px at 90% -20%, rgba(185,138,94,.16), transparent 60%),
    var(--cream);
  padding:56px 0 72px;position:relative;
}
.hg-kicker{font-size:13px;letter-spacing:3px;color:var(--wood-deep);font-weight:600;margin-bottom:16px}
.hg-title{font-size:clamp(30px,4.4vw,52px);line-height:1.25;letter-spacing:2px;margin-bottom:18px}
.hg-block{display:block;overflow:hidden;padding-bottom:4px}
.hg-block{opacity:0;transform:translateX(-30px);animation:hgSlide .8s var(--ease) forwards}
.hg-block-2{color:var(--green-dark);animation-delay:.22s}
@keyframes hgSlide{to{opacity:1;transform:translateX(0)}}
.hg-desc{max-width:680px;font-size:15.5px;line-height:2;margin-bottom:26px}
.hg-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 报考条件四宫格 ---------- */
.hg-cond{background:var(--white)}
.hg-cond-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hg-cond-item{
  background:var(--cream-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;text-align:center;transition:transform .35s var(--ease),box-shadow .35s;
}
.hg-cond-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.hg-cond-item strong{display:block;font-family:var(--font-serif);font-size:20px;color:var(--green-dark);margin-bottom:8px;letter-spacing:1px}
.hg-cond-item span{font-size:13px;color:var(--ink-soft);line-height:1.8}

/* ---------- 横向四步流程 ---------- */
.hg-flow{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.hg-flow-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.hg-flow-list::before{
  content:"";position:absolute;top:27px;left:12%;right:12%;height:2px;
  background:repeating-linear-gradient(90deg,var(--wood-light) 0 8px,transparent 8px 16px);
}
.hg-flow-item{position:relative;padding-top:64px}
.hg-flow-dot{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;background:var(--white);
  border:2px solid var(--wood);color:var(--wood-deep);
  display:grid;place-items:center;font-family:var(--font-serif);font-size:22px;font-weight:700;
  box-shadow:var(--shadow-sm);
}
.hg-flow-item h3{font-size:16.5px;text-align:center;margin-bottom:8px}
.hg-flow-item p{font-size:13.5px;color:var(--ink-soft);text-align:center;line-height:1.85}

/* ---------- 实操要点卡 ---------- */
.hg-practice{background:var(--white)}
.hg-prac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hg-prac{
  background:var(--cream-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;transition:transform .35s var(--ease),box-shadow .35s;
}
.hg-prac:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.hg-prac-ic{
  width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--wood),var(--wood-deep));
  color:#fff;display:grid;place-items:center;margin-bottom:18px;
}
.hg-prac h3{font-size:18px;margin-bottom:10px;letter-spacing:1px}
.hg-prac p{font-size:14px;line-height:1.9}
.hg-prac-note{max-width:760px;margin:30px auto 0;font-size:13px;color:var(--ink-faint);text-align:center}

/* ---------- 材料 + 费用 ---------- */
.hg-material{background:var(--cream)}
.hg-mat-flex{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.hg-h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:1px;margin-bottom:22px}
.hg-mat-list{display:flex;flex-direction:column;gap:12px}
.hg-mat-list li{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px 14px 44px;position:relative;font-size:14.5px;
}
.hg-mat-list li::before{
  content:"";position:absolute;left:18px;top:19px;width:10px;height:10px;
  border:2px solid var(--green-deep);border-radius:50%;
}
.hg-fee{
  background:var(--white);border:1px solid var(--line);border-top:4px solid var(--green-deep);
  border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm);position:sticky;top:110px;
}
.hg-fee h3{font-size:19px;margin-bottom:12px}
.hg-fee p{font-size:14px;line-height:1.9;margin-bottom:12px}
.hg-fee-small{font-size:12.5px;color:var(--ink-faint)}

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

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

/* ---------- 底部 CTA ---------- */
.hg-cta{background:var(--green-dark);position:relative;overflow:hidden}
.hg-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 280px at 10% 100%,rgba(217,185,140,.18),transparent 60%)}
.hg-cta-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center;padding:74px 0;position:relative;z-index:1}
.hg-cta-inner h2{color:#f6f2e6;font-size:clamp(22px,2.8vw,32px);letter-spacing:1.5px;line-height:1.5;margin:10px 0 12px}
.hg-cta-inner p{color:#c6d1bd;font-size:14.5px}
.hg-cta-btn{display:flex;flex-direction:column;align-items:flex-start}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hg-hero-media{height:300px}
  .hg-cond-grid{grid-template-columns:repeat(2,1fr)}
  .hg-flow-list{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .hg-flow-list::before{display:none}
  .hg-prac-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .hg-mat-flex{grid-template-columns:1fr;gap:36px}
  .hg-fee{position:static}
  .hg-rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .hg-cond-grid,.hg-flow-list,.hg-rel-grid{grid-template-columns:1fr}
  .hg-cta-inner{grid-template-columns:1fr;padding:52px 0}
  .hg-cta-btn{align-items:stretch}
}