/* ============================================================
   baokao-liucheng.css —— 报考流程 · 原型 L3 之字画廊
   图-文-图-文之字交错，各块边距错开；hero 斜线分割窄条
   ============================================================ */

/* ---------- Hero L3 斜线分割 ---------- */
.hero{
  position:relative; min-height:70vh; display:flex; align-items:center;
  padding:calc(var(--header-h) + 60px) 0 80px; overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,rgba(27,42,33,.9) 0%,rgba(44,74,58,.72) 55%,rgba(44,74,58,.2) 100%);
  clip-path:polygon(0 0,100% 0,100% 62%,0 100%);
}
.hero__content .breadcrumb{ color:rgba(251,248,241,.65); margin-bottom:22px; }
.hero__content .breadcrumb a{ color:var(--cream-100); }
.hero__eyebrow{ color:var(--brown-500); letter-spacing:.36em; font-size:13px; margin-bottom:16px; }
.hero h1{ color:var(--cream-50); font-size:clamp(38px,5.6vw,64px); margin-bottom:20px; }
.hero__lead{ color:rgba(251,248,241,.85); max-width:560px; margin-bottom:28px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- 之字步骤 ---------- */
.steps{ padding:clamp(50px,7vw,90px) 0; }
.zig{
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,70px);
  align-items:center; padding:clamp(34px,5vw,56px) 0; border-bottom:1px solid var(--line);
}
.zig--flip{ grid-template-columns:1.1fr 1fr; }
.zig:nth-child(odd) .zig__body{ margin-left:40px; }
.zig--flip .zig__body{ margin-left:0; margin-right:40px; }
.zig__pic img{ border-radius:var(--radius-m); box-shadow:var(--shadow-md); }
/* 纯数字视觉块（替代照片） */
.zig__pic--a,.zig__pic--b,.zig__pic--c{
  aspect-ratio:16/10; border-radius:var(--radius-m); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
}
.zig__pic--a{ background:linear-gradient(135deg,var(--green-800),var(--green-950)); }
.zig__pic--b{ background:linear-gradient(135deg,var(--brown-600),var(--brown-800)); }
.zig__pic--c{ background:linear-gradient(135deg,var(--green-700),var(--green-900)); }
.zig__mark{ color:rgba(251,248,241,.5); letter-spacing:.3em; font-size:13px; }
.zig__pic--a b,.zig__pic--b b,.zig__pic--c b{
  font-family:var(--font-serif); font-size:clamp(60px,9vw,110px); color:rgba(251,248,241,.92); line-height:1;
}
.zig__tag{
  display:inline-block; font-size:12.5px; letter-spacing:.12em; color:var(--brown-700);
  background:rgba(176,141,102,.14); padding:5px 14px; border-radius:var(--radius-round); margin-bottom:14px;
}
.zig__body h2{ font-size:clamp(24px,3vw,34px); margin-bottom:14px; }
.zig__body p{ margin-bottom:14px; }
.zig__body ul{ margin-top:6px; }
.zig__body ul li{
  padding:7px 0 7px 24px; position:relative; color:var(--ink-soft); font-size:14.5px;
}
.zig__body ul li::before{ content:""; position:absolute; left:0; top:15px; width:14px; height:1.5px; background:var(--green-700); }
.zig__body a{ color:var(--green-700); font-weight:600; }

/* ---------- 报名方式 ---------- */
.sec-head{ margin-bottom:34px; }
.sec-head.center{ text-align:center; }
.sec-head .eyebrow{ display:block; margin-bottom:12px; }
.sec-head h2{ margin-bottom:10px; }
.ways__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.way{
  background:var(--cream-50); padding:32px 30px; border-radius:var(--radius-m);
  border-left:4px solid var(--brown-500); box-shadow:var(--shadow-sm);
}
.way h3{ font-size:22px; margin-bottom:12px; }
.way p{ font-size:15px; }
.way a{ color:var(--green-700); font-weight:600; }

/* ---------- 到场要求 ---------- */
.attend__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.attend-item{ border-top:2px solid var(--green-800); padding:20px 18px; background:var(--cream-100); border-radius:0 0 var(--radius-s) var(--radius-s); }
.attend-item b{ display:block; font-family:var(--font-serif); color:var(--green-800); font-size:19px; margin-bottom:8px; }
.attend-item p{ font-size:14px; }

/* ---------- 常见卡点（深色） ---------- */
.stuck__grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.stuck-item{
  background:rgba(251,248,241,.06); border:1px solid rgba(251,248,241,.12);
  padding:26px 24px; border-radius:var(--radius-m);
}
.stuck-item h3{ color:var(--cream-100); font-size:19px; margin-bottom:10px; }
.stuck-item p{ color:rgba(251,248,241,.72); font-size:14.5px; }

/* ---------- FAQ ---------- */
.faq__list{ max-width:820px; margin-inline:auto; }
.faq-item{
  background:var(--cream-100); border-radius:var(--radius-m); margin-bottom:14px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:19px 24px; font-weight:600; color:var(--green-900); font-family:var(--font-serif); font-size:17px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary span{ flex:none; width:10px; height:10px; position:relative; }
.faq-item summary span::before,.faq-item summary span::after{
  content:""; position:absolute; background:var(--brown-600); top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-item summary span::before{ width:10px; height:1.5px; }
.faq-item summary span::after{ width:1.5px; height:10px; transition:opacity .3s; }
.faq-item[open] summary span::after{ opacity:0; }
.faq-item p{ padding:0 24px 20px; font-size:15px; }
.faq-item a{ color:var(--green-700); font-weight:600; }

/* ---------- 预约 ---------- */
.booking__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center;
  background:var(--green-900); border-radius:var(--radius-l); padding:clamp(30px,5vw,56px);
}
.booking__text h2{ color:var(--cream-100); margin:10px 0 14px; }
.booking__text p{ color:rgba(251,248,241,.75); }
.booking__phone{ margin-top:20px; }
.booking__phone a{ color:var(--cream-50); font-weight:700; font-size:20px; }
.booking__form{ display:grid; gap:15px; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .zig,.zig--flip{ grid-template-columns:1fr; }
  .zig:nth-child(odd) .zig__body,.zig--flip .zig__body{ margin:0; }
  .attend__list{ grid-template-columns:1fr 1fr; }
  .ways__grid,.stuck__grid,.booking__inner{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .attend__list{ grid-template-columns:1fr; }
}