/* ============================================
   成功案例内容模板 v2 —— 4款图片布局
   调用方式：<link href="/skin/default/css/case_tpl.css">
   图片由模板标签 {IMG1} {IMG2} {IMG3} 控制
   ============================================ */
.sc-wrap{max-width:1600px;margin:0 auto;padding:0 20px 40px}
.sc-crumb{font-size:13px;color:#888;padding:14px 0}
.sc-crumb a{color:#1667D8;text-decoration:none}
.sc-article{background:#fff;border-radius:14px;padding:36px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:24px}
.sc-article-header{text-align:center;margin-bottom:30px;padding-bottom:24px;border-bottom:2px solid #f0f0f0}
.sc-article-title{font-size:28px;color:#2c3e50;margin:0 0 14px;line-height:1.4}
.sc-article-meta{display:flex;justify-content:center;gap:22px;font-size:13px;color:#999;flex-wrap:wrap}
.sc-article-info{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:#f7f9fc;padding:18px;border-radius:10px;margin-bottom:24px}
.sc-article-info-item{text-align:center}
.sc-article-info-label{font-size:12px;color:#999;margin-bottom:5px}
.sc-article-info-value{font-size:15px;color:#2c3e50;font-weight:600}
.sc-article-content{font-size:15px;line-height:2;color:#444}
.sc-article-content p{margin-bottom:16px}
.sc-article-content strong{color:#0E4FA8}
.sc-article-content img{max-width:100%;border-radius:8px;margin:16px 0}
.sc-related{background:#fff;border-radius:14px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:24px}
.sc-related-title{font-size:18px;color:#2c3e50;margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid #1667D8}
.sc-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sc-related-item{padding:13px;background:#f7f9fc;border-radius:8px;border-left:3px solid #1667D8}
.sc-related-item h4{margin:0 0 5px;font-size:13px}
.sc-related-item a{color:#2c3e50;text-decoration:none}
.sc-related-item p{margin:0;font-size:12px;color:#999}

/* ---- 模板A：通栏主图 + 双列图组 ---- */
.tpl-a .hero-banner{border-radius:12px;overflow:hidden;margin-bottom:22px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.tpl-a .hero-banner img{width:100%;display:block}
.tpl-a .dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.tpl-a .dual-grid figure{margin:0;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.tpl-a .dual-grid img{width:100%;display:block}
.tpl-a .dual-grid figcaption{background:#f7f9fc;padding:9px 13px;font-size:13px;color:#555}

/* ---- 模板B：时间线 ---- */
.tpl-b .tl{position:relative;padding-left:34px;margin:22px 0}
.tpl-b .tl::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:linear-gradient(#1667D8,#10B981)}
.tpl-b .tl-step{position:relative;margin-bottom:24px}
.tpl-b .tl-step::before{content:"";position:absolute;left:-29px;top:8px;width:13px;height:13px;border-radius:50%;background:#1667D8;border:3px solid #dbeafe}
.tpl-b .tl-step.done::before{background:#10B981}
.tpl-b .tl-step h4{margin:0 0 7px;font-size:16px;color:#0E4FA8}
.tpl-b .tl-step .t{font-size:12px;color:#999;margin-left:8px}
.tpl-b .tl-step img{width:100%;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.1);margin:7px 0}
.tpl-b .tl-step p{margin:0;font-size:14px;line-height:1.8;color:#555}

/* ---- 模板C：卡片网格 + 数据条 ---- */
.tpl-c .card-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.tpl-c .card-grid .wide{grid-column:1/-1}
.tpl-c .mcard{border-radius:12px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.1);background:#fff}
.tpl-c .mcard img{width:100%;display:block}
.tpl-c .mcard .cap{padding:11px 15px}
.tpl-c .mcard .cap b{display:block;font-size:14px;color:#2c3e50;margin-bottom:3px}
.tpl-c .mcard .cap span{font-size:12px;color:#888}
.tpl-c .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.tpl-c .stat-strip .s{background:linear-gradient(135deg,#0E4FA8,#1667D8);color:#fff;border-radius:10px;padding:14px;text-align:center}
.tpl-c .stat-strip .s .n{font-size:20px;font-weight:700}
.tpl-c .stat-strip .s .l{font-size:11px;opacity:.85}

/* ---- 模板D：浮动图文 + 前后对比 ---- */
.tpl-d .float-demo .fl{float:left;width:46%;margin:6px 16px 12px 0;border-radius:10px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.tpl-d .float-demo .fr{float:right;width:38%;margin:6px 0 12px 16px;border-radius:10px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.tpl-d .float-demo img{width:100%;display:block}
.tpl-d .float-demo .clear{clear:both}
.tpl-d .compare{display:grid;grid-template-columns:1fr 40px 1fr;gap:10px;align-items:center;margin:18px 0}
.tpl-d .compare figure{margin:0;text-align:center}
.tpl-d .compare img{width:100%;border-radius:10px}
.tpl-d .compare figcaption{font-size:12px;color:#888;margin-top:5px}
.tpl-d .vs{display:flex;align-items:center;justify-content:center;font-weight:700;color:#e74c3c;font-size:18px}

@media(max-width:800px){
  .sc-article-info{grid-template-columns:repeat(2,1fr)}
  .tpl-a .dual-grid,.tpl-c .card-grid,.sc-related-grid{grid-template-columns:1fr}
  .tpl-d .float-demo .fl,.tpl-d .float-demo .fr{float:none;width:100%;margin:10px 0}
  .tpl-c .stat-strip{grid-template-columns:repeat(2,1fr)}
  .tpl-d .compare{grid-template-columns:1fr 30px 1fr}
}