/* ============ 方案卡（A 方案：整卡 <a> 包住）+ 三类封面 ============ */

/* ===== v2 增量 C：方案库预览卡（Badge 硬要求） ===== */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.case-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:.18s}

.case-card:hover{border-color:var(--brand-200);box-shadow:var(--sh-1);transform:translateY(-2px)}

.case-cover{aspect-ratio:16/10;background:linear-gradient(150deg,#0B1D2A,#07141D);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px}

.case-cover::before{content:"";position:absolute;width:240px;height:240px;right:-50px;top:-60px;background:radial-gradient(circle,rgba(0,180,228,.20),transparent 70%)}

.case-cover::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(240px 160px at 70% 30%,#000,transparent 80%);mask-image:radial-gradient(240px 160px at 70% 30%,#000,transparent 80%)}

.case-cover .i{position:absolute;right:16px;bottom:14px;color:rgba(127,220,242,.45);width:32px;height:32px}

.case-cover-t{color:#fff;font-size:13.5px;font-weight:600;position:relative;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.4)}

.case-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}

.case-badge{position:absolute;left:14px;top:12px;z-index:2;font-size:20px;font-weight:600;line-height:1.3;color:#8A5A00;background:#FFF7E6;border:1px solid #F0D9A8;border-radius:6px;padding:2px 10px}

.case-t{font-size:20px;font-weight:600;line-height:1.4;color:var(--t-1);text-wrap:balance}

.case-p{font-size:14px;line-height:1.65;color:var(--t-2)}

.case-arch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}

.case-arch b{font-weight:500;font-size:11.5px;color:var(--t-2);background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:3px 7px}

.case-arch .i{width:12px;height:12px;color:var(--t-3)}

.case-meta{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px}

.case-gain{font-size:13px;color:var(--action);font-weight:600;line-height:1.4}

.case-gain small{display:block;font-size:12px;color:var(--t-2);font-weight:400;margin-top:3px}

.case-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}

.case-tags span{font-size:10.5px;color:var(--brand-800);background:var(--brand-50);padding:2px 7px;border-radius:999px;white-space:nowrap}

.lead,.pain-desc,.adv-d,.proc-d,.case-p,.guard-d,.faq-a{text-wrap:pretty}

@media (max-width:880px){
  .case-grid{grid-template-columns:1fr}
  .case-badge,.case-t{font-size:18px}
}

/* 案例封面三类（v3，跨页共用） */
/* 封面三类：真截图 / 线框 / 图标 */
.case-cover.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,24,0) 60%,rgba(6,16,24,.35) 100%)}

.cover-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}

.case-cover.shot .case-cover-t{background:rgba(5,15,23,.78);color:#fff;padding:4px 10px;border-radius:6px;text-shadow:none}

.cover-wire{position:absolute;inset:0;width:100%;height:100%;opacity:.9}

.wire-box{fill:rgba(255,255,255,.045);stroke:rgba(53,200,238,.38);stroke-width:1}

.wire-line{stroke:rgba(53,200,238,.55);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.cover-wire text{font-size:12px;fill:#E3EEF4;font-weight:500}

.cover-wire .wire-sub{font-size:10px;fill:#7FA6B8;font-weight:400}

.cover-icon{position:absolute;right:22px;top:48%;transform:translateY(-50%);width:104px;height:104px;border-radius:26px;background:radial-gradient(circle at 30% 20%,rgba(0,180,228,.22),rgba(255,255,255,.02));border:1px solid rgba(53,200,238,.22);display:grid;place-items:center;color:#35C8EE}

.cover-icon .i{width:46px;height:46px}

.cover-kw{position:absolute;right:22px;bottom:16px;font-size:11px;letter-spacing:.10em;color:#7FDCF2;opacity:.85}

@media (max-width:880px){
  .case-meta{flex-direction:column;align-items:flex-start;gap:8px}
  .case-tags{justify-content:flex-start}
}