/* =========================================================
   苏州大自然门窗 · 工程案例页
   视觉与首页/产品/关于我们统一：墨绿近黑 + 香槟金
   依赖全局变量（home.css :root）：--ink/--gold/--green/--wrap
   ========================================================= */

/* ---- 区块底色：与 news.php 的 .artsec 一致（浅灰 --paper2），
   深色筛选按钮在灰底上更清晰；此前纯白底导致按钮「糊」在背景里。 ---- */
.casesec{background:var(--paper2,#F4F6F4);padding:64px 0 90px;}

/* ---- 筛选栏（配色与 article.css .news-tabs 完全对齐） ---- */
.case-filter{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:0 auto 34px;
}
.case-filter button{
  appearance:none;font-family:inherit;cursor:pointer;
  border:1px solid var(--line,rgba(12,20,17,.10));
  background:var(--paper,#fff);color:var(--text,#16201B);
  padding:9px 22px;border-radius:30px;font-size:14px;letter-spacing:.04em;
  transition:all .3s var(--ease,ease);
}
.case-filter button .n{font-size:12px;opacity:.5;margin-left:6px;}
.case-filter button:hover{border-color:rgba(198,161,91,.5);}
.case-filter button.on{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--ink);border-color:transparent;font-weight:600;
}
.case-filter button.on .n{opacity:.7;}

/* ---- 案例网格 ---- */
.case-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.case-card{
  display:block;text-decoration:none;color:inherit;
  position:relative;border-radius:4px;overflow:hidden;background:var(--ink2,#121C18);
  border:1px solid transparent;cursor:pointer;
  box-shadow:0 10px 28px -20px rgba(12,20,17,.55);
  transition:transform .5s var(--ease,ease),border-color .4s,box-shadow .5s;
}
.case-card:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 24px 50px -20px rgba(0,0,0,.65);}
.case-card.hide{display:none;}

.case-thumb{position:relative;height:260px;overflow:hidden;background:linear-gradient(150deg,var(--ink3,#18241F),var(--ink,#0C1411));}
.case-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease,ease);}
.case-card:hover .case-thumb img{transform:scale(1.07);}
.case-thumb .cat{
  position:absolute;left:18px;top:18px;z-index:2;
  font-size:12px;letter-spacing:.1em;color:var(--gold2);
  background:rgba(12,20,17,.7);border:1px solid rgba(198,161,91,.4);
  padding:5px 12px;border-radius:2px;backdrop-filter:blur(4px);
}
.case-thumb .ov{
  position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  padding:20px;background:linear-gradient(180deg,transparent 30%,rgba(12,20,17,.92));
  opacity:0;transition:opacity .45s var(--ease,ease);
}
.case-card:hover .case-thumb .ov{opacity:1;}
.case-thumb .ov .go{
  color:var(--gold2);font-size:13.5px;letter-spacing:.08em;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;transform:translateY(10px);
  transition:transform .45s var(--ease,ease);
}
.case-card:hover .case-thumb .ov .go{transform:translateY(0);}
.case-thumb .ov .go:after{content:"→";font-size:16px;}

.case-body{padding:22px 22px 24px;}
.case-body .nm{font-size:18px;font-weight:600;color:#fff;letter-spacing:.01em;margin-bottom:8px;}
.case-body .meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:rgba(255,255,255,.55);margin-bottom:14px;}
.case-body .meta b{color:var(--gold2);font-weight:600;font-variant-numeric:tabular-nums;}
.case-body .ds{font-size:14px;line-height:1.75;color:rgba(255,255,255,.62);margin-bottom:16px;}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;}
/* 标签位于深色卡片内，用金系（与 page.css .pdh-tags 深色区标签统一）；
   原墨绿字 #2E5A4A 在深墨绿底上对比度不足，几乎看不清。 */
.case-tags span{
  font-size:12px;color:var(--gold2,#E2C795);
  background:rgba(198,161,91,.12);border:1px solid rgba(198,161,91,.34);
  padding:3px 10px;border-radius:2px;
}

/* 空态提示在浅灰网格区，需深色文字 */
.case-empty{grid-column:1/-1;text-align:center;color:var(--muted,#6E7A74);padding:50px 0;font-size:15px;display:none;}

/* ---- 详情页正文（位于 .pwhy 深色区，需用浅色文字） ---- */
.case-rich{max-width:900px;font-size:15.5px;line-height:2.05;color:rgba(255,255,255,.72);}
.case-rich p{margin:0 0 20px;}
.case-rich h2,.case-rich h3{color:#fff;font-weight:600;margin:34px 0 16px;line-height:1.5;}
.case-rich h2{font-size:22px;}
.case-rich h3{font-size:18px;}
.case-rich ul,.case-rich ol{margin:0 0 20px;padding-left:24px;}
.case-rich li{margin-bottom:10px;}
.case-rich strong{color:var(--gold2,#E2C795);font-weight:600;}
.case-rich a{color:var(--gold2,#E2C795);text-decoration:underline;}
.case-rich blockquote{
  margin:24px 0;padding:16px 22px;border-left:3px solid var(--gold,#C6A15B);
  background:rgba(198,161,91,.08);color:rgba(255,255,255,.8);border-radius:0 4px 4px 0;
}
.case-rich img{max-width:100%;border-radius:4px;margin:16px 0;display:block;}

/* ---- 响应式 ---- */
@media (max-width:1080px){
  .casesec{padding:48px 0 64px;}
  .case-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
  .case-thumb{height:220px;}
}
@media (max-width:640px){
  .case-grid{grid-template-columns:1fr;gap:18px;}
  .case-filter{gap:10px;margin-bottom:28px;}
  .case-filter button{padding:9px 16px;font-size:13px;}
}