/* ============================================================
   show.html 资讯详情页专属样式
   版式签名：居中窄阅读栏 + 左侧悬浮作者卡 + 底部五组文章错落墙
   ============================================================ */

/* 详情横幅（窄） */
.article-banner{
  position:relative;padding:170px 0 0;color:var(--cream);overflow:hidden;
  background:
    linear-gradient(115deg,rgba(46,26,12,.92),rgba(74,44,23,.6) 70%,rgba(74,44,23,.32)),
    url("/images/news-2.jpg") center/cover no-repeat;
}
.article-banner .crumb{margin-top:20px;color:rgba(251,244,232,.55);font-size:13px}
.article-banner .crumb a{color:var(--gold-bright)}
.article-banner .crumb i{color:rgba(251,244,232,.4)}

/* 正文区 */
.article-wrap{position:relative;margin-top:-56px;z-index:3}
.article-cols{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:start}
.art-side .side-note{margin-top:14px;font-size:12px}

/* 延伸服务速览（静态区块） */
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.sv-card{
  position:relative;display:block;padding:28px 26px 26px;border:1px solid var(--line);
  border-radius:14px;background:var(--paper);overflow:hidden;text-decoration:none;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.sv-card::after{
  content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-deep));
  opacity:0;transition:opacity .35s ease;
}
.sv-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(74,44,23,.12);border-color:var(--gold)}
.sv-card:hover::after{opacity:1}
.sv-ic{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:12px;background:var(--cream-deep);color:var(--brown);
  border:1px solid var(--line);margin-bottom:16px;
}
.sv-ic svg{width:26px;height:26px;stroke:currentColor}
.sv-card h3{font-family:var(--font-serif);font-size:18px;color:var(--ink);margin-bottom:8px}
.sv-card p{font-size:13px;line-height:1.7;color:var(--muted)}
.sv-line{
  margin-top:34px;padding:20px 26px;border-radius:14px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--cream-deep);border:1px dashed var(--gold);
}
.sv-line span{font-family:var(--font-serif);font-size:17px;color:var(--ink)}
.sv-line b{font-size:22px;color:var(--brown);letter-spacing:.5px}
.sv-line .btn{margin-left:auto}
@media (max-width:960px){.sv-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.sv-grid{grid-template-columns:1fr}}
.article-main{
  border-radius:22px;background:var(--paper);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-md);padding:clamp(28px,5vw,56px);position:relative;
}
.article-main .art-cat{
  display:inline-block;background:rgba(233,180,76,.16);color:var(--gold-deep);border:1px solid rgba(233,180,76,.5);
  font-size:12px;letter-spacing:.2em;padding:5px 16px;border-radius:999px;margin-bottom:20px;
}
.article-main h1{font-size:clamp(26px,3.6vw,40px);line-height:1.4;margin-bottom:18px}
.article-main .art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding-bottom:22px;margin-bottom:26px;
  border-bottom:1px dashed var(--line);color:var(--muted);font-size:13px;
}
.article-main .art-meta span{display:inline-flex;align-items:center;gap:6px}
.article-main .art-meta svg{width:15px;height:15px;stroke:var(--gold-deep)}
.article-body{font-size:15.5px;line-height:2.05;color:var(--brown-soft)}
.article-body p{margin-bottom:18px;color:var(--brown-soft)}
.article-body img{border-radius:14px;margin:22px 0;box-shadow:var(--shadow-sm)}
.article-body h2,.article-body h3{margin:28px 0 14px;color:var(--brown)}
.article-body blockquote{
  border-left:4px solid var(--gold);background:var(--cream);padding:16px 22px;border-radius:0 12px 12px 0;
  margin:22px 0;color:var(--brown-soft);font-size:14.5px;
}
.article-body ul,.article-body ol{padding-left:22px;margin-bottom:18px}
.article-body li{margin-bottom:8px}
/* 侧边联系卡 */
.art-side{
  position:sticky;top:110px;border-radius:20px;background:var(--paper);border:1px solid var(--line-soft);
  padding:26px 22px;box-shadow:var(--shadow-sm);text-align:center;
}
.art-side .stamp{width:64px;height:64px;font-size:11px;margin:0 auto 16px}
.art-side h4{font-size:16px;margin-bottom:8px}
.art-side p{font-size:13px;line-height:1.9;margin-bottom:16px}
.art-side .side-tel{font-family:var(--font-serif);font-size:22px;font-weight:700;color:var(--gold-deep);display:block;margin-bottom:14px}
.art-side .side-btn{display:block;border-radius:999px;padding:11px 0;background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:var(--brown-dark);font-weight:600;font-size:14px;transition:transform .25s,box-shadow .25s}
.art-side .side-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold)}

/* 五组文章错落墙（相关/最新/周/日/月） */
.rel-title{display:flex;align-items:center;gap:16px;margin:56px 0 30px}
.rel-title h2{white-space:nowrap;font-size:24px}
.rel-title::before,.rel-title::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 18px);opacity:.5}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rel-card{
  border-radius:18px;overflow:hidden;background:var(--paper);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;
}
.rel-card:nth-child(3n+2){transform:translateY(18px)}
.rel-card:nth-child(3n+3){transform:translateY(34px)}
.rel-card:hover{transform:translateY(0);box-shadow:var(--shadow-md)}
.rel-card .rel-thumb{display:block;overflow:hidden;aspect-ratio:16/9}
.rel-card .rel-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.rel-card:hover .rel-thumb img{transform:scale(1.07)}
.rel-card .rel-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.rel-card .rel-body h3{font-size:15.5px;line-height:1.55;margin-bottom:10px}
.rel-card .rel-body h3 a:hover{color:var(--gold-deep)}
.rel-card .rel-body p{font-size:13px;color:var(--muted);flex:1;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rel-card .rel-body time{font-size:12px;color:var(--sand);letter-spacing:.06em;border-top:1px dashed var(--line-soft);padding-top:10px}

/* 响应式 */
@media(max-width:1024px){
  .art-side{position:static;margin-top:24px}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .rel-card:nth-child(3n+2),.rel-card:nth-child(3n+3){transform:none}
}
@media(max-width:768px){
  .rel-grid{grid-template-columns:1fr}
  .article-main{padding:26px 20px}
}