/* ============================================
   case 实战案例页 · sg 体系专属样式（样式分离）
   依赖：home.css 的 :root 变量（--sg-navy/--sg-orange2/--sg-line 等）
        与通用 sg- 类（sg-hero/sg-tag/sg-sec-title/sg-btn/sg-stats）
   配色：深空蓝 + 品牌橙，与首页/关于/服务套餐保持一致。
   ============================================ */

/* ① 页头 Hero 差异化：栏目大图作为背景 + 深蓝蒙层 */
.sgcase-hero .sg-bg{opacity:.45}
.sgcase-hero .sg-bg img{width:100%; height:100%; object-fit:cover; display:block}
.sgcase-hero .sg-bg img[src=""],.sgcase-hero .sg-bg img:not([src]){display:none}

/* ② 分类筛选胶囊（原 innernav，动态分类 {pboot:nav}） */
.sgcase-cats{background:var(--sg-bg); padding:22px 0; border-bottom:1px solid var(--sg-line)}
.sgcase-cats .containe{max-width:1200px; margin:0 auto; padding:0 24px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:10px}
.sgcase-cat{display:inline-block; background:var(--sg-card); border:1px solid var(--sg-line); border-radius:20px; padding:8px 20px; font-size:14px; color:var(--sg-sub); transition:.2s; line-height:1.4}
.sgcase-cat:hover{border-color:var(--sg-orange2); color:var(--sg-orange2)}
.sgcase-cat.act{background:var(--sg-orange2); border-color:var(--sg-orange2); color:#fff; font-weight:600}

/* ③ 案例卡片网格（动态 {pboot:list}，封面 3:4 竖版） */
.sgcase-main{padding:60px 0 10px}
.sgcase-main .containe{max-width:1200px; margin:0 auto; padding:0 24px; box-sizing:border-box}
.sgcase-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px}
.sgcase-card{background:var(--sg-card); border:1px solid var(--sg-line); border-radius:14px; overflow:hidden; transition:.25s}
.sgcase-card:hover{box-shadow:0 12px 32px rgba(11,27,52,.10); transform:translateY(-4px)}
.sgcase-card .sgcase-cover{position:relative; padding-top:133%; overflow:hidden; background:var(--sg-bg)}
.sgcase-card .sgcase-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sgcase-card .sgcase-body{padding:16px 18px 18px}
.sgcase-card h3{font-size:16px; color:var(--sg-navy); margin:0 0 8px; line-height:1.45}
.sgcase-card .sgcase-desc{font-size:13.5px; color:var(--sg-sub); margin:0 0 12px; line-height:1.7}
.sgcase-card .sgcase-meta{display:flex; flex-wrap:wrap; gap:10px; padding-top:12px; border-top:1px dashed var(--sg-line); font-size:12.5px; color:var(--sg-sub)}
.sgcase-card .sgcase-meta span i{color:var(--sg-orange2); margin-right:3px}

/* ④ 分页（动态 {page:*}，覆盖旧 .pagination/.page-item 视觉） */
.sgcase-page{padding:30px 0 10px}
.sgcase-page .containe{max-width:1200px; margin:0 auto; padding:0 24px; box-sizing:border-box}
.sgcase-page .pagination{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.sgcase-page .pagination .page-item,
.sgcase-page .pagination .page-link,
.sgcase-page .pagination a,
.sgcase-page .pagination span{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--sg-line); border-radius:8px; font-size:14px; color:var(--sg-sub); background:var(--sg-card); transition:.2s; line-height:1}
.sgcase-page .pagination a:hover{border-color:var(--sg-orange2); color:var(--sg-orange2)}
.sgcase-page .pagination .cur,
.sgcase-page .pagination .current,
.sgcase-page .pagination .active{background:var(--sg-orange2); border-color:var(--sg-orange2); color:#fff; font-weight:600}

@media screen and (max-width:768px){
  .sgcase-cats{padding:16px 0}
  .sgcase-main{padding:40px 0 6px}
  .sgcase-grid{grid-template-columns:1fr 1fr; gap:14px}
  .sgcase-card h3{font-size:15px}
}
@media screen and (max-width:480px){
  .sgcase-grid{grid-template-columns:1fr}
}