/* =========================================================
   shouji.css · 手机/响应式网站
   布局特征：左文右图大数字 + CSS设备栏示意 + 粗标签列表 + 单案例通栏
   ========================================================= */

.banner-liuyan{background-image:url('../images/banner-liuyan.jpg')}
.sj-ice{background:var(--c-ice-2)}

/* ---------- 左文右图 ---------- */
.sj-what-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sj-what-text h2{font-size:clamp(24px,3vw,34px);margin-bottom:18px}
.sj-what-text p{color:var(--c-text-2);margin-bottom:16px}
.sj-big-num{display:flex;gap:44px;margin:24px 0 28px}
.sj-big-num .stat-num{color:var(--c-accent)}
.sj-big-num span{display:block;font-size:13.5px;color:var(--c-muted);margin-top:6px}
.sj-what-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}

/* ---------- 三端示意 ---------- */
.sj-dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sj-dev-card{
  background:#fff;border-radius:var(--radius-lg);padding:34px 28px;text-align:center;box-shadow:var(--shadow);transition:all var(--trans);
}
.sj-dev-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.sj-dev-bar{
  margin:0 auto 22px;background:var(--c-ice);border-radius:8px 8px 0 0;border-bottom:3px solid var(--c-accent);
}
.sj-pc{width:100%;height:96px}
.sj-tab{width:72%;height:80px}
.sj-mob{width:44%;height:66px;border-radius:12px 12px 0 0}
.sj-dev-card h3{font-size:18px;margin-bottom:8px}
.sj-dev-card p{font-size:14px;color:var(--c-text-2)}

/* ---------- 粗标签列表 ---------- */
.sj-focus-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px}
.sj-focus-item{
  display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px dashed var(--c-line);
}
.sj-focus-item b{
  flex-shrink:0;width:74px;font-size:16px;color:var(--c-primary);background:var(--c-ice);
  border-radius:8px;text-align:center;padding:6px 0;
}
.sj-focus-item p{font-size:14.5px;color:var(--c-text-2)}

/* ---------- 单案例通栏 ---------- */
.sj-case-band{max-width:860px;margin:0 auto}
.sj-case-band a{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.sj-case-band img{width:100%;transition:transform .6s ease}
.sj-case-band a:hover img{transform:scale(1.04)}
.sj-case-mask{
  position:absolute;left:0;right:0;bottom:0;padding:56px 26px 20px;color:#fff;
  background:linear-gradient(to top,rgba(15,31,61,.9),transparent);
}
.sj-case-mask h3{color:#fff;font-size:19px;margin-bottom:6px}
.sj-case-mask p{font-size:14px;color:#C9DAF5}

/* ---------- 费用chips ---------- */
.sj-price p a{color:var(--c-accent);font-weight:700}
.sj-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sj-chips span{
  font-size:14.5px;font-weight:600;color:var(--c-primary);background:#fff;border:1.5px solid var(--c-line);
  padding:10px 22px;border-radius:999px;box-shadow:var(--shadow);
}

/* ---------- 互链 ---------- */
.sj-relate-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sj-relate-card{
  background:#fff;border-radius:14px;padding:24px 26px;box-shadow:var(--shadow);display:block;
  border:1px solid var(--c-line);transition:all var(--trans);
}
.sj-relate-card:hover{border-color:var(--c-accent);transform:translateY(-5px)}
.sj-relate-card h3{font-size:17px;margin-bottom:8px}
.sj-relate-card p{font-size:14px;color:var(--c-text-2)}

.contact-sec{padding-top:0}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .sj-what-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:768px){
  .sj-dev-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .sj-focus-list{grid-template-columns:1fr}
  .sj-relate-row{grid-template-columns:1fr}
}