/* ============================================================
   layout_L3.css — 长文型变体 L3「步骤卡片型」专属布局层
   ------------------------------------------------------------
   配套渲染函数：layout_engine.render_L3_step_cards()
   输出结构：
     <div class="l3-wrap container">
       {intro}
       <div class="step-card">
         <div class="step-num">N</div>
         <div class="step-body">
           <div class="step-head"><span class="step-svg">{svg}</span><h3>标题</h3></div>
           <p>描述</p>
           <div class="step-tip">提示</div>
         </div>
       </div> × N
     </div>
   说明：每步一张卡片，左数字 + 右内容，卡片间连接线表示流程顺序。
        配图用 SVG 线性图标（step-svg），零截图依赖。
   颜色/字体/圆角全部继承 seo_global.css 变量，零硬编码。
   ============================================================ */

.l3-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* 步骤卡片 */
.l3-wrap .step-card {
  position: relative;
  display: flex;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

/* 卡片间连接线 */
.l3-wrap .step-card::before {
  content: "";
  position: absolute;
  left: 41px;
  top: 100%;
  width: 2px;
  height: 14px;
  background: var(--gray-200);
}

.l3-wrap .step-card:last-of-type::before {
  display: none;
}

/* 左侧编号块 */
.l3-wrap .step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cta-grad);
  color: var(--white);
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 右侧内容区 */
.l3-wrap .step-body {
  flex: 1;
  min-width: 0;
}

.l3-wrap .step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.l3-wrap .step-svg {
  width: 26px;
  height: 26px;
  color: var(--blue);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.l3-wrap .step-svg svg {
  width: 100%;
  height: 100%;
}

.l3-wrap .step-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.l3-wrap .step-body p {
  font-size: 14px;
  color: var(--gray-600);
  margin: 0;
}

/* 提示行 */
.l3-wrap .step-tip {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gray-600);
  background: var(--gray-50);
  padding: 6px 10px;
  border-radius: 6px;
}

/* 响应式 */
@media (max-width: 768px) {
  .l3-wrap .step-card {
    gap: 14px;
    padding: 16px 18px;
  }
  .l3-wrap .step-card::before {
    left: 37px;
  }
}