/* ==========================================================================
   p-baoming-liucheng.css · 报名流程详解专属样式
   布局：左纵向图文步骤 + 右粘性侧栏清单
   ========================================================================== */

/* ---------- Hero ---------- */
.bl-hero{padding:64px 0 70px;border-bottom:1px solid var(--line);background:linear-gradient(115deg,#140504,#0E0E13 60%)}
.bl-hero-title{font-size:clamp(26px,3.4vw,40px);color:#fff;font-weight:900;margin:20px 0 12px}
.bl-hero-sub{color:var(--muted);font-size:16px;max-width:660px;line-height:1.9}

/* ---------- 主布局 ---------- */
.bl-main{background:var(--bg)}
.bl-layout{display:grid;grid-template-columns:1.9fr 1fr;gap:44px;align-items:start}

/* ---------- 步骤 ---------- */
.bl-step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;margin-bottom:26px;transition:all .3s}
.bl-step:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.bl-step-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.bl-step-no{flex-shrink:0;padding:5px 14px;background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;font-size:13px;font-weight:700;border-radius:999px;box-shadow:var(--shadow-red)}
.bl-step-head h2{font-size:20px;color:#fff}
.bl-step-body{display:grid;grid-template-columns:1fr 1.2fr;gap:22px;align-items:center}
.bl-step-body img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.bl-step-text p{color:var(--muted);font-size:14.5px;line-height:1.9;margin-bottom:10px}
.bl-step-text a{color:var(--gold-soft)}

/* ---------- 侧栏 ---------- */
.bl-side{position:sticky;top:130px;display:flex;flex-direction:column;gap:18px}
.bl-side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.bl-side-card h2{font-size:17px;color:#fff;margin-bottom:14px;padding-left:12px;position:relative}
.bl-side-card h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;background:linear-gradient(var(--red),var(--gold));border-radius:2px}
.bl-side-card ul li{padding:8px 0 8px 22px;position:relative;color:var(--muted);font-size:13.5px;line-height:1.7;border-bottom:1px dashed var(--line)}
.bl-side-card ul li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,var(--gold) 55%,transparent 60%)}
.bl-side-card .btn-red{margin-top:16px;width:100%}
.bl-side-cta{background:linear-gradient(150deg,#1A0605,#16161D);border-color:rgba(224,38,29,.45)}
.bl-side-cta p{color:var(--muted);font-size:13.5px;line-height:1.8;margin-bottom:6px}

/* ---------- CTA ---------- */
.bl-cta h2{font-size:28px;color:#fff;margin-bottom:12px}
.bl-cta p{color:var(--muted)}
.bl-cta p a{color:var(--gold-soft)}

/* ---------- 周期速算 ---------- */
.bl-time-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bl-time-card{padding:24px 18px;background:var(--card);border:1px solid var(--line);border-radius:12px;text-align:center;transition:all .3s}
.bl-time-card b{display:block;font-size:19px;font-weight:900;color:var(--gold-soft);margin-bottom:8px}
.bl-time-card h3{color:#fff;font-size:15px;margin-bottom:8px}
.bl-time-card p{color:var(--muted);font-size:12.5px;line-height:1.75}
.bl-time-card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow)}
.bl-time-note{margin-top:26px;color:var(--muted-2);font-size:13.5px;max-width:720px;margin-left:auto;margin-right:auto}

/* ---------- 常见卡点 ---------- */
.bl-pitfalls-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bl-pit-card{padding:24px 22px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:all .3s}
.bl-pit-card h3{color:#fff;font-size:15.5px;margin-bottom:8px}
.bl-pit-card p{color:var(--muted);font-size:13.5px;line-height:1.85}
.bl-pit-card:hover{transform:translateY(-5px);border-color:var(--red)}

/* ---------- 报名后 ---------- */
.bl-after{background:var(--bg)}
.bl-after-inner{max-width:900px;margin:0 auto;text-align:center}
.bl-after-inner h2{font-size:26px;color:#fff;margin-bottom:16px}
.bl-after-inner p{color:var(--muted);font-size:15.5px;line-height:2;margin-bottom:12px}

/* ---------- 报名FAQ ---------- */
.bm-faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.bm-faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 22px}
.bm-faq-item summary{cursor:pointer;color:#fff;font-size:15px;font-weight:600;padding:16px 0;list-style:none}
.bm-faq-item summary::before{content:"Q";display:inline-block;margin-right:10px;color:var(--gold);font-weight:800}
.bm-faq-item p{color:var(--muted);font-size:13.5px;line-height:1.85;padding-bottom:16px}
.bm-faq-item[open]{border-color:var(--gold)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .bl-layout{grid-template-columns:1fr;gap:30px}
  .bl-side{position:static}
  .bl-step-body{grid-template-columns:1fr}
  .bl-time-grid{grid-template-columns:repeat(2,1fr)}
  .bl-pitfalls-grid{grid-template-columns:repeat(2,1fr)}
  .bm-faq-list{grid-template-columns:1fr}
}
@media (max-width:720px){
  .bl-step{padding:22px 18px}
  .bl-step-head{flex-wrap:wrap}
  .bl-time-grid{grid-template-columns:1fr}
  .bl-pitfalls-grid{grid-template-columns:1fr}
  .bm-faq-list{grid-template-columns:1fr}
}