/* ============================================================
   hangang.css —— 熔化焊接与热切割作业（焊工证）
   布局原型 L1：斜切对角。深绿斜块压图、错位图文、阶梯卡片。
   ============================================================ */

/* ---------- Hero：斜切对角 ---------- */
.hv-hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  color:var(--cream-50); overflow:hidden;
  padding-top:var(--header-h);
}
.hv-hero__media{ position:absolute; inset:0; }
.hv-hero__media img{ width:100%; height:100%; object-fit:cover; }
/* 深绿斜块压图：右侧斜切 */
.hv-hero__diag{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(27,42,33,.35) 0%,rgba(27,42,33,.72) 100%); }
.hv-hero__diag::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:52%;
  background:var(--green-950); opacity:.94;
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
}
.hv-hero__content{ position:relative; z-index:2; padding:0 0 clamp(60px,9vw,110px); max-width:760px; }
.hv-hero__content .breadcrumb{ color:rgba(251,248,241,.72); margin-bottom:22px; }
.hv-hero__content .breadcrumb a{ color:var(--cream-100); }
.hv-hero__eyebrow{
  font-size:13px; letter-spacing:.34em; color:var(--brown-500);
  margin-bottom:16px; text-transform:uppercase;
}
.hv-hero h1{ color:var(--cream-50); margin-bottom:20px; }
.hv-hero__lead{ color:rgba(251,248,241,.82); font-size:17px; max-width:560px; margin-bottom:30px; }
.hv-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hv-hero__stamp{
  position:absolute; right:6%; bottom:12%; z-index:2;
  width:110px; height:110px; border-radius:50%;
  border:1.5px dashed rgba(176,141,102,.65);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(12deg); color:var(--cream-100);
}
.hv-hero__stamp span{ font-family:var(--font-serif); font-size:22px; letter-spacing:.2em; }
.hv-hero__stamp b{ font-size:11px; letter-spacing:.24em; color:var(--brown-500); margin-top:4px; font-weight:600; }

/* ---------- 01 定义与作业范围：错位图文 ---------- */
.hv-intro__grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,6vw,80px); align-items:center;
}
.hv-intro__pic{ position:relative; }
.hv-intro__pic::before{
  content:""; position:absolute; inset:16px -16px -16px 16px;
  border:1.5px solid var(--brown-500); z-index:-1;
}
.hv-intro__pic img{
  border-radius:var(--radius-m); box-shadow:var(--shadow-lg);
  transform:rotate(-1.5deg);
}
.hv-intro__pic figcaption{
  margin-top:16px; font-size:13px; color:var(--muted); padding-left:14px;
  border-left:2px solid var(--brown-500);
}
.hv-intro__copy p{ margin-bottom:16px; }
.hv-intro__copy strong{ color:var(--green-800); }
.hv-intro__links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }

/* ---------- 02 作业范围：阶梯卡片 ---------- */
.hv-scopes__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px;
}
.hv-scope{
  background:var(--cream-50); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:30px 28px; position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.hv-scope:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.hv-scope--1{ transform:translateY(0); }
.hv-scope--2{ transform:translateY(28px); }
.hv-scope--3{ transform:translateY(0); }
.hv-scope--4{ transform:translateY(28px); }
.hv-scope__no{
  font-family:var(--font-serif); font-size:34px; color:rgba(176,141,102,.4);
  display:block; line-height:1; margin-bottom:12px;
}
.hv-scope h3{ margin-bottom:10px; }
.hv-scope p{ font-size:14.5px; }
.hv-scope a{ color:var(--brown-600); border-bottom:1px solid var(--brown-500); }

/* ---------- 03 就业方向 ---------- */
.hv-jobs{ background:var(--cream-50); }
.hv-jobs__list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1.5px solid var(--line-strong);
}
.hv-job{ padding:34px 26px 10px; border-bottom:1.5px solid var(--line-strong); position:relative; }
.hv-job + .hv-job{ border-left:1.5px solid var(--line-strong); }
.hv-job b{
  font-family:var(--font-serif); font-size:22px; color:var(--green-800);
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.hv-job b::before{
  content:""; width:26px; height:2px; background:var(--brown-500); flex:none;
}
.hv-job p{ font-size:14.5px; }

/* ---------- 04 报考条件 ---------- */
.hv-cond__list{ display:grid; gap:0; max-width:860px; }
.hv-cond__list li{
  display:flex; gap:22px; padding:24px 0; border-bottom:1px dashed var(--line-strong);
}
.hv-cond__dot{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:var(--green-800); color:var(--cream-50);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:20px;
}
.hv-cond__list h3{ margin-bottom:6px; }
.hv-cond__list p{ font-size:14.5px; }

/* ---------- 05 考试内容表格 ---------- */
.hv-exam__table{
  border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-sm);
}
.hv-exam__note{ margin-top:18px; font-size:14.5px; color:var(--muted); }
.hv-exam__note strong{ color:var(--green-800); }
.hv-exam__note a{ color:var(--brown-600); border-bottom:1px solid var(--brown-500); }

/* ---------- 06 实操要点（深绿底） ---------- */
.hv-skills__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.hv-skill{
  border:1px solid rgba(251,248,241,.16); border-radius:var(--radius-m);
  padding:26px 22px; position:relative; background:rgba(251,248,241,.04);
}
.hv-skill__num{
  font-family:var(--font-serif); font-size:15px; letter-spacing:.2em;
  color:var(--brown-500); display:block; margin-bottom:14px;
}
.hv-skill h3{ font-size:19px; margin-bottom:10px; }
.hv-skill p{ font-size:13.5px; color:rgba(251,248,241,.68); line-height:1.85; }

/* ---------- 07 有效期时间轴（三列 grid） ---------- */
.hv-valid__timeline{
  display:grid; gap:0; max-width:900px; margin:0 auto 26px;
}
.hv-tl{
  display:grid; grid-template-columns:110px 44px 1fr; gap:0; align-items:stretch;
}
.hv-tl__time{
  font-family:var(--font-serif); font-size:18px; color:var(--brown-600);
  padding:22px 0; text-align:right; padding-right:18px;
}
.hv-tl__axis{ position:relative; }
.hv-tl__axis::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:var(--line-strong); transform:translateX(-50%);
}
.hv-tl__axis i{
  position:absolute; left:50%; top:28px; width:14px; height:14px; border-radius:50%;
  background:var(--green-800); border:3px solid var(--cream-100);
  box-shadow:0 0 0 2px var(--green-800); transform:translateX(-50%); z-index:1;
}
.hv-tl__body{ padding:22px 0 26px 24px; }
.hv-tl__body h3{ margin-bottom:6px; }
.hv-tl__body p{ font-size:14.5px; }
.hv-valid__more{ text-align:center; font-size:14.5px; color:var(--muted); }
.hv-valid__more a{ color:var(--brown-600); border-bottom:1px solid var(--brown-500); }

/* ---------- 08 FAQ ---------- */
.hv-faq__list{ max-width:860px; margin:0 auto; }
.hv-faq__item{ border-bottom:1px solid var(--line-strong); }
.hv-faq__item summary{
  display:flex; align-items:center; gap:14px; padding:20px 4px;
  cursor:pointer; list-style:none; font-family:var(--font-serif);
  font-size:17px; color:var(--green-900);
}
.hv-faq__item summary::-webkit-details-marker{ display:none; }
.hv-faq__no{
  flex:none; font-size:12px; letter-spacing:.1em; color:var(--brown-600);
  border:1px solid var(--brown-500); border-radius:4px; padding:2px 8px;
}
.hv-faq__arrow{
  margin-left:auto; flex:none; width:10px; height:10px;
  border-right:2px solid var(--green-700); border-bottom:2px solid var(--green-700);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.hv-faq__item[open] .hv-faq__arrow{ transform:rotate(-135deg); }
.hv-faq__item p{
  padding:0 4px 22px 52px; font-size:14.5px;
}

/* ---------- 09 预约 CTA：横切深绿块 ---------- */
.hv-book{ background:var(--green-950); }
.hv-book__inner{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,6vw,70px);
  align-items:center;
}
.hv-book__copy h2{ color:var(--cream-100); margin-bottom:16px; }
.hv-book__copy p{ color:rgba(251,248,241,.7); margin-bottom:18px; }
.hv-book__phone{ font-size:18px; }
.hv-book__phone a{
  color:var(--brown-500); font-family:var(--font-serif); font-size:24px;
  letter-spacing:.04em;
}
.hv-book__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.hv-book__tags li{
  font-size:12.5px; letter-spacing:.1em; color:var(--cream-100);
  border:1px solid rgba(251,248,241,.22); border-radius:999px; padding:5px 14px;
}
.hv-book__form{
  background:var(--cream-50); border-radius:var(--radius-l);
  padding:34px 30px; display:grid; gap:16px; box-shadow:var(--shadow-lg);
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hv-intro__grid{ grid-template-columns:1fr; }
  .hv-intro__pic{ max-width:560px; }
  .hv-scopes__grid{ grid-template-columns:1fr; }
  .hv-scope--2,.hv-scope--4{ transform:none; }
  .hv-jobs__list{ grid-template-columns:1fr; }
  .hv-job + .hv-job{ border-left:0; }
  .hv-skills__grid{ grid-template-columns:repeat(2,1fr); }
  .hv-book__inner{ grid-template-columns:1fr; }
  .hv-hero__stamp{ display:none; }
}
@media (max-width:640px){
  .hv-skills__grid{ grid-template-columns:1fr; }
  .hv-tl{ grid-template-columns:74px 30px 1fr; }
  .hv-tl__time{ font-size:15px; }
  .hv-faq__item p{ padding-left:0; }
  .hv-book__form{ padding:26px 20px; }
}