/* ============================================================
   gongzhong-zonglan.css · 特种作业工种大全 · 原型 L1 斜切对角
   ============================================================ */

/* ---------- Hero：clip-path 斜切对角 ---------- */
.hero-l1{
  position:relative; min-height:90vh; display:flex; align-items:center; overflow:hidden;
  padding:calc(var(--header-h) + 40px) 0 80px;
}
.hero-l1__img{
  position:absolute; inset:0;
  background:url("../images/scene-gongzhong-zonglan.jpg") center/cover no-repeat;
}
.hero-l1__veil{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(27,42,33,.94) 0%, rgba(27,42,33,.82) 48%, rgba(27,42,33,.35) 100%);
  clip-path:polygon(0 0, 72% 0, 56% 100%, 0 100%);
}
.hero-l1__inner{ position:relative; z-index:2; color:var(--cream-50); max-width:660px; }
.hero-l1 .breadcrumb{ color:rgba(251,248,241,.7); margin-bottom:26px; }
.hero-l1 .breadcrumb a{ color:var(--cream-100); }
.hero-l1__eyebrow{ font-size:13px; letter-spacing:.34em; color:var(--brown-500); margin-bottom:18px; }
.hero-l1__title{ color:var(--cream-50); margin-bottom:22px; }
.hero-l1__lead{ color:rgba(251,248,241,.84); font-size:17px; max-width:580px; margin-bottom:32px; }
.hero-l1__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- 目录分组 ---------- */
.catgroup-l1{ margin-bottom:38px; }
.catgroup-l1__title{
  font-size:20px; margin-bottom:18px; display:flex; align-items:center; gap:12px;
}
.catgroup-l1__title i{
  font-style:normal; font-family:var(--font-serif); font-size:15px; color:var(--brown-500);
}
.trade-l1__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trade-l1{
  display:block; background:var(--cream-50); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:20px 22px; transition:all .3s var(--ease);
}
.trade-l1:nth-child(3n+2){ transform:translateY(12px); }
.trade-l1:hover{
  border-color:var(--green-700); transform:translateY(0); box-shadow:var(--shadow-md);
}
.trade-l1 b{ font-family:var(--font-serif); font-size:17px; color:var(--green-900); display:block; }
.trade-l1 em{ font-style:normal; font-size:13px; color:var(--muted); }

/* ---------- 哪些人需要办证 ---------- */
.who-l1__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; }
.who-l1__copy h2{ margin:10px 0 16px; }
.who-l1__copy ul{ display:grid; gap:12px; margin-top:16px; }
.who-l1__copy li{ padding-left:22px; position:relative; color:var(--ink-soft); font-size:15px; }
.who-l1__copy li::before{ content:""; position:absolute; left:0; top:11px; width:8px; height:8px; background:var(--brown-500); transform:rotate(45deg); }
.who-l1__pic img{ border-radius:var(--radius-m); box-shadow:var(--shadow-md); transform:rotate(1deg); }

/* ---------- 通用条件：阶梯卡片 ---------- */
.cond-l1__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cc-l1{
  background:var(--cream-100); border-radius:var(--radius-m); padding:26px 20px; border:1px solid var(--line);
}
.cc-l1:nth-child(odd){ transform:translateY(10px); }
.cc-l1 b{ font-family:var(--font-serif); font-size:22px; color:var(--green-800); display:block; margin-bottom:10px; }
.cc-l1 p{ font-size:14px; }
.cond-l1__more{ margin-top:22px; font-size:14.5px; }
.cond-l1__more a{ color:var(--green-700); font-weight:600; }

/* ---------- 流程（深底） ---------- */
.flow-l1__steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.fs-l1{
  background:rgba(251,248,241,.05); border:1px solid rgba(251,248,241,.14);
  border-radius:var(--radius-m); padding:24px 20px;
}
.fs-l1 b{ font-family:var(--font-serif); font-size:26px; color:var(--brown-500); display:block; margin-bottom:10px; }
.fs-l1 h3{ color:var(--cream-100); font-size:17px; margin-bottom:8px; }
.fs-l1 p{ color:rgba(251,248,241,.72); font-size:13.5px; }

/* ---------- 证书查询与复审 ---------- */
.cert-l1__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cert-l1__item{
  border:1px solid var(--line-strong); border-radius:var(--radius-m); padding:clamp(26px,3vw,40px);
  background:var(--cream-50);
}
.cert-l1__item h3{ margin:6px 0 14px; }
.cert-l1__item a{ color:var(--green-700); font-weight:600; }

/* ---------- FAQ ---------- */
.faq-l1__list{ max-width:800px; margin:0 auto; display:grid; gap:12px; }
.faq-l1__item{ background:var(--cream-50); border:1px solid var(--line); border-radius:var(--radius-s); }
.faq-l1__item summary{
  cursor:pointer; list-style:none; padding:18px 24px; font-family:var(--font-serif);
  font-weight:700; font-size:16px; color:var(--green-900); display:flex; justify-content:space-between; gap:16px;
}
.faq-l1__item summary::-webkit-details-marker{ display:none; }
.faq-l1__item summary::after{ content:"＋"; color:var(--brown-500); font-weight:400; transition:transform .3s; }
.faq-l1__item[open] summary::after{ transform:rotate(45deg); }
.faq-l1__item p{ padding:0 24px 18px; font-size:14.5px; }

/* ---------- 预约 CTA ---------- */
.booking-l1{ background:var(--green-950); }
.booking-l1__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;
}
.booking-l1__head h2{ color:var(--cream-100); margin:10px 0 14px; }
.booking-l1__head p{ color:rgba(251,248,241,.74); }
.booking-l1__phone{ margin-top:16px; }
.booking-l1__phone a{ color:var(--brown-500); font-weight:700; font-size:20px; }
.booking-l1__form{
  background:var(--cream-50); padding:28px; border-radius:var(--radius-m);
  display:grid; gap:14px;
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-l1__veil{ clip-path:none; background:rgba(27,42,33,.82); }
  .trade-l1__grid{ grid-template-columns:repeat(2,1fr); }
  .who-l1__grid, .cert-l1__grid, .booking-l1__inner{ grid-template-columns:1fr; }
  .cond-l1__cards{ grid-template-columns:repeat(2,1fr); }
  .flow-l1__steps{ grid-template-columns:repeat(2,1fr); }
  .trade-l1:nth-child(3n+2){ transform:none; }
}
@media (max-width:640px){
  .trade-l1__grid, .cond-l1__cards, .flow-l1__steps{ grid-template-columns:1fr; }
}