/* =========================================================
   业务详情页专属布局（五大业务单页）
   复用 style.css / page.css 的 design tokens 与组件类
   本文件仅承载「各页差异化版式」，风格与全站统一
   ========================================================= */

/* ---------- 业务 Hero（全幅背景图 + 蒙版，保证文字可读与品牌一致） ---------- */
.bhero{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:24px 0 54px}
.bhero__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.bhero__mask{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(8,24,44,.95) 0%,rgba(11,32,58,.86) 46%,rgba(12,38,68,.58) 76%,rgba(12,38,68,.38) 100%);
}
.bhero__inner{position:relative}
.bhero__tag{
  display:inline-block;height:28px;padding:0 14px;border-radius:999px;line-height:28px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);font-size:12.5px;color:#DCE7F5;letter-spacing:.5px;
}
.bhero h1{margin:16px 0 14px;font-size:36px;line-height:1.32;color:#fff;letter-spacing:.4px}
.bhero h1 em{display:block;margin-top:10px;font-style:normal;font-size:18px;font-weight:500;color:#9DC2EE}
.bhero__lead{max-width:560px;font-size:15.5px;color:rgba(255,255,255,.82);line-height:1.85}
.bhero__btns{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.bhero__stats{display:flex;gap:30px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);flex-wrap:wrap}
.bhero__stats li{display:flex;flex-direction:column}
.bhero__stats strong{font-size:26px;line-height:1.2;color:#fff;font-weight:700}
.bhero__stats span{font-size:12.5px;color:rgba(255,255,255,.66)}

/* Hero 内面包屑浅色适配（hero 为深色背景） */
.bhero .crumbs{padding-top:14px;color:rgba(255,255,255,.7)}
.bhero .crumbs a{color:rgba(255,255,255,.85)}
.bhero .crumbs a:hover{color:#fff}
.bhero .crumbs b{color:#fff}
.bhero .crumbs span{opacity:.4}

/* 变体：左文右图（split） */
.bhero--split .bhero__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.bhero__media{
  position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14);aspect-ratio:4/3;background:var(--bg-soft);
}
.bhero__media img{width:100%;height:100%;object-fit:cover}
.bhero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,24,44,.35))}

/* 变体：居中（center） */
.bhero--center .bhero__inner{max-width:880px;margin:0 auto;text-align:center}
.bhero--center .bhero__lead{margin-left:auto;margin-right:auto}
.bhero--center .bhero__stats{justify-content:center}
.bhero--center .bhero__btns{justify-content:center}
.bhero--center .bhero__banner{margin-top:30px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:21/9}
.bhero--center .bhero__banner img{width:100%;height:100%;object-fit:cover}

/* 变体：左图右文（media-left），大件运输用 */
.bhero--media-left .bhero__inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:center;direction:rtl}
.bhero--media-left .bhero__inner > *{direction:ltr}

/* ---------- 区块通用间距 ---------- */
.bsec{padding:72px 0}
.bsec--soft{background:var(--bg-soft);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* ---------- 横向流程步骤（bsteps） ---------- */
.bsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;position:relative;margin-top:8px}
.bsteps__item{position:relative;padding:22px 18px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-align:center;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.bsteps__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bsteps__no{
  display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:17px;font-weight:700;
}
.bsteps__item h4{font-size:16px}
.bsteps__item p{margin-top:7px;font-size:13px;color:var(--ink-3);line-height:1.7}

/* ---------- 两种模式对比卡（轿车托运） ---------- */
.bmode{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bmode__item{
  position:relative;padding:28px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.bmode__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#C9D8EC}
.bmode__item--accent{border-top:3px solid var(--accent)}
.bmode__badge{position:absolute;right:0;top:0;padding:5px 14px;border-bottom-left-radius:10px;font-size:12.5px;font-weight:600;color:#fff;background:var(--accent)}
.bmode__badge--ghost{background:var(--brand)}
.bmode__ico{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;background:var(--brand-100);color:var(--brand)}
.bmode__ico svg{width:28px;height:28px}
.bmode__item h3{font-size:20px}
.bmode__item p{margin-top:8px;font-size:14px;color:var(--ink-3);line-height:1.8}
.bmode__list{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.bmode__list li{position:relative;padding-left:18px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.bmode__list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55}
.bmode__price{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.bmode__price b{color:var(--accent-600);font-size:18px;font-weight:700}

/* ---------- 实拍画廊（轿车托运） ---------- */
.bgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bgallery__item{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-soft);aspect-ratio:4/3}
.bgallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.bgallery__item:hover img{transform:scale(1.04)}
.bgallery--2{grid-template-columns:repeat(2,1fr)}
.bgallery__more{margin-top:18px;text-align:center;font-size:14px;color:var(--brand);font-weight:600}
.bgallery__more:hover{color:var(--accent)}

/* ---------- 大件运输：左图右文交错滚动 ---------- */
.bsplit{display:grid;grid-template-columns:380px minmax(0,1fr);gap:44px;align-items:start}
.bsplit__side{position:sticky;top:calc(var(--header-h) + 18px)}
.bsplit__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:3/4;background:var(--bg-soft)}
.bsplit__media img{width:100%;height:100%;object-fit:cover}
.bsplit__side .btn{margin-top:16px;width:100%}
.browse{display:flex;flex-direction:column;gap:18px}
.bcard{padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);border-left:4px solid var(--slate)}
.bcard h3{display:flex;align-items:center;gap:10px;font-size:18px}
.bcard__tag{height:22px;padding:0 9px;border-radius:4px;font-size:12px;font-weight:600;background:var(--brand-100);color:var(--brand);line-height:22px}
.bcard p{margin-top:10px;font-size:14.5px;color:var(--ink-2);line-height:1.8}
.bcard__meta{display:flex;gap:22px;margin-top:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.bcard__meta b{color:var(--ink);font-weight:600}

/* ---------- 合规清单（危险品运输） ---------- */
.bcheck{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bcheck__col{padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.bcheck__col h3{display:flex;align-items:center;gap:9px;font-size:16px;margin-bottom:14px}
.bcheck__col h3 svg{width:22px;height:22px;color:#15803D}
.bcheck ul{display:flex;flex-direction:column;gap:11px}
.bcheck li{position:relative;padding-left:30px;font-size:14px;color:var(--ink-2);line-height:1.7}
.bcheck li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:#E6F6EC;border:1px solid #BFE6CC;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center;
}

/* ---------- 路线卡片栅格（货运专线） ---------- */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ---------- 相关业务推荐（每页底部内链） ---------- */
.brel{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.brel .card__more{display:inline-flex;align-items:center;gap:4px}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .bhero--split .bhero__inner,.bhero--media-left .bhero__inner{grid-template-columns:1fr;gap:28px}
  .bhero--media-left .bhero__media{order:-1}
  .bsplit{grid-template-columns:1fr;gap:26px}
  .bsplit__side{position:static}
  .bsplit__media{aspect-ratio:16/9}
  .route-grid{grid-template-columns:repeat(2,1fr)}
  .brel{grid-template-columns:repeat(2,1fr)}
  .bgallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .bhero h1{font-size:28px}
  .bhero h1 em{font-size:15px}
  .bmode{grid-template-columns:1fr}
  .bcheck{grid-template-columns:1fr}
  .bsec{padding:54px 0}
}
@media (max-width:640px){
  .bhero{padding:16px 0 40px}
  .bhero h1{font-size:23px}
  .bhero__stats{gap:18px}
  .bhero__stats strong{font-size:21px}
  .bhero__banner{aspect-ratio:16/9}
  .route-grid,.brel,.bgallery{grid-template-columns:1fr}
  .bsteps{grid-template-columns:1fr 1fr}
  .bhero__btns .btn{flex:1}
}