/* ============================================================
   meikuang.css · 煤矿安全作业 · 原型 L4 大留白禅意
   ============================================================ */

/* ---------- Hero：极简竖排大字 + 小照片偏移 ---------- */
.hero-l4{
  position:relative; min-height:88vh; display:flex; align-items:center;
  padding:calc(var(--header-h) + 50px) 0 70px; background:var(--cream-50);
  overflow:hidden;
}
.hero-l4__vert{
  position:absolute; right:clamp(16px,5vw,70px); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-family:var(--font-serif); font-size:clamp(20px,2.6vw,32px);
  letter-spacing:.5em; color:var(--green-900); opacity:.18;
}
.hero-l4__inner{ position:relative; z-index:2; max-width:680px; }
.hero-l4 .breadcrumb{ margin-bottom:24px; }
.hero-l4__title{ margin-bottom:10px; }
.hero-l4__sub{
  font-family:var(--font-serif); color:var(--brown-600); letter-spacing:.14em;
  font-size:16px; margin-bottom:22px;
}
.hero-l4__lead{ max-width:560px; margin-bottom:30px; }
.hero-l4__pic{
  position:absolute; right:clamp(40px,12vw,180px); bottom:-40px; width:min(420px,38vw);
  border:10px solid var(--cream-50); box-shadow:var(--shadow-lg);
}
.hero-l4__pic img{ width:100%; }

/* ---------- 类别概览：细线行 ---------- */
.overview-l4__head{ margin-bottom:40px; }
.overview-l4__rows{ border-top:1px solid var(--line); }
.ovl4{
  display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:baseline;
  padding:26px 8px; border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease);
}
.ovl4:hover{ padding-left:20px; }
.ovl4 b{ font-family:var(--font-serif); font-size:19px; color:var(--green-900); }
.ovl4 p{ font-size:14.5px; }

/* ---------- 类别表 ---------- */
.table-l4__wrap{ border-radius:var(--radius-s); overflow:hidden; box-shadow:var(--shadow-sm); }

/* ---------- 报考条件：左右 ---------- */
.cond-l4__layout{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,60px); }
.cond-l4__copy h2{ margin:10px 0 16px; }
.cond-l4__list{ display:grid; gap:0; border-top:1px solid var(--line); }
.cond-l4__list li{
  display:grid; grid-template-columns:90px 1fr; gap:16px; padding:18px 4px;
  border-bottom:1px solid var(--line); align-items:baseline;
}
.cond-l4__list b{ color:var(--green-800); font-family:var(--font-serif); }
.cond-l4__list span{ color:var(--ink-soft); font-size:14.5px; }
.cond-l4__note{ margin-top:22px; font-size:14.5px; }
.cond-l4__note a{ color:var(--green-700); font-weight:600; }

/* ---------- 考试内容：两块细线框 ---------- */
.exam-l4__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.exam-l4__theory, .exam-l4__practice{
  border:1px solid var(--line-strong); border-radius:var(--radius-m); padding:clamp(26px,3vw,40px);
  background:var(--cream-50);
}
.exam-l4__theory h3, .exam-l4__practice h3{ margin:8px 0 12px; }
.exam-l4__note{ margin-top:22px; font-size:14.5px; }
.exam-l4__note a{ color:var(--green-700); font-weight:600; }

/* ---------- 复审 ---------- */
.review-l4__inner{ max-width:820px; margin:0 auto; }
.review-l4__inner h2{ margin:10px 0 14px; }
.review-l4__lead{ margin-bottom:28px; }
.review-l4__points{ display:grid; gap:0; border-top:1px solid var(--line); }
.rp-l4{
  display:grid; grid-template-columns:180px 1fr; gap:18px; padding:18px 4px;
  border-bottom:1px solid var(--line); align-items:baseline;
}
.rp-l4 b{ font-family:var(--font-serif); color:var(--brown-600); font-size:17px; }
.rp-l4 span{ color:var(--ink-soft); font-size:14.5px; }
.rp-l4 a{ color:var(--green-700); font-weight:600; }

/* ---------- 持证意义 ---------- */
.mean-l4__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.mean-l4__pic img{ border-radius:var(--radius-s); box-shadow:var(--shadow-md); }
.mean-l4__copy h2{ margin:10px 0 16px; }
.mean-l4__copy p{ margin-bottom:12px; }

/* ---------- FAQ ---------- */
.faq-l4__list{ max-width:780px; margin:0 auto; }
.faq-l4__item{ border-bottom:1px solid var(--line); }
.faq-l4__item summary{
  cursor:pointer; list-style:none; padding:20px 4px; font-family:var(--font-serif);
  font-weight:700; font-size:17px; color:var(--green-900);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-l4__item summary::-webkit-details-marker{ display:none; }
.faq-l4__item summary::after{
  content:"＋"; flex:none; font-size:22px; color:var(--brown-500); font-weight:400;
  transition:transform .3s var(--ease);
}
.faq-l4__item[open] summary::after{ transform:rotate(45deg); }
.faq-l4__item p{ padding:0 40px 20px 4px; font-size:14.5px; }

/* ---------- 预约 CTA：线框 ---------- */
.booking-l4{ background:var(--cream-50); }
.booking-l4__inner{
  border:1px solid var(--line-strong); border-radius:var(--radius-l);
  padding:clamp(30px,5vw,60px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,50px);
  background:var(--cream-100);
}
.booking-l4__head h2{ margin:10px 0 14px; }
.booking-l4__phone{ margin-top:18px; font-size:16px; }
.booking-l4__phone a{ color:var(--brown-600); font-weight:700; font-size:20px; }
.booking-l4__form{ display:grid; gap:14px; align-content:start; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-l4__pic{ position:relative; right:auto; bottom:auto; width:100%; margin-top:30px; }
  .hero-l4__vert{ display:none; }
  .cond-l4__layout, .exam-l4__grid, .mean-l4__grid, .booking-l4__inner{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .ovl4, .cond-l4__list li, .rp-l4{ grid-template-columns:1fr; gap:6px; }
}