/* ============================================================
   dksg.cn · show.html 资讯详情页专属样式
   布局：曲线页头 + 正文/侧栏 + 相关推荐网格
   ============================================================ */

/* ---------- 板块 1：文章页头 ---------- */
.s-hero{
  position:relative;
  background:
    linear-gradient(94deg,rgba(28,26,23,.88) 0%,rgba(28,26,23,.62) 60%,rgba(28,26,23,.36) 100%),
    url(/images/banner-news.jpg) center/cover no-repeat;
  padding:126px 0 138px;
  color:var(--cream);
  /* 曲线柔化裁切 */
  clip-path:polygon(0 0,100% 0,100% 80%,94% 86%,84% 90.5%,70% 93.5%,55% 95%,41% 95.5%,28% 94.5%,17% 92.5%,8% 89.6%,3% 86%,0 82%);
}
.s-hero-inner{ max-width:1260px; margin:0 auto; padding:0 24px; }
.s-hero .crumb a{ color:rgba(242,232,213,.75); }
.s-hero .crumb a:hover{ color:var(--tan); }
.s-hero .crumb span{ color:rgba(242,232,213,.55); }
.s-hero h1{ color:var(--cream); font-size:clamp(26px,3.6vw,40px); margin:18px 0 16px; line-height:1.45; }
.s-meta{ display:flex; align-items:center; gap:12px; }
.s-meta .keycap{ background:rgba(242,232,213,.12); color:var(--tan); border-color:rgba(242,232,213,.35); box-shadow:0 3px 0 rgba(242,232,213,.2); }
.s-meta time{ font-family:var(--font-mono); font-size:14px; color:rgba(242,232,213,.8); }

/* ---------- 板块 2：正文与侧栏 ---------- */
.s-body-sec{ padding:64px 0 40px; }
.s-layout{ display:grid; grid-template-columns:1fr 330px; gap:42px; align-items:start; }
.article-body{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:44px 46px 50px; box-shadow:var(--shadow-sm);
}
.s-title{ font-size:24px; margin-bottom:8px; }
.s-time{ font-family:var(--font-mono); font-size:13px; color:var(--tan); margin-bottom:22px; }
.s-side{ display:flex; flex-direction:column; gap:20px; position:sticky; top:94px; }
.s-side-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:24px 22px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
.s-side-card h3{ font-size:16.5px; margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid var(--brown-3); }
.s-side-card p{ font-size:13.8px; color:var(--brown-3); line-height:1.85; margin-bottom:14px; }
.s-side-card ul li{ padding:9px 0; border-bottom:1px dashed var(--line); }
.s-side-card ul li:last-child{ border-bottom:0; }
.s-side-card ul li a{ font-size:14px; color:var(--ink-2); }
.s-side-card ul li a:hover{ color:var(--brown-3); padding-left:6px; }
.s-tel{ display:block; margin-top:12px; font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--brown-2); }

/* ---------- 板块 3：相关推荐 ---------- */
/* overflow-wrap 兜底：CMS 模板标签（<%set/%foreach 长英文无空格）在静态预览时
   以文本节点参与布局，允许任意断行避免撑破网格 min-content */
.s-rec{ padding:30px 0 40px; overflow-wrap:anywhere; word-break:break-word; }
.s-rec .rec-grid, .s-rec .rec-block, .s-rec .rec-item{ min-width:0; }
.rec-title{
  font-size:20px; color:var(--ink); margin-bottom:22px; padding-left:16px; position:relative;
}
.rec-title::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px;
  background:var(--brown-3); border-radius:3px;
}
.rec-card{ display:flex; gap:20px; padding:18px 0; border-bottom:1px dashed var(--line); }
.rec-pic{ flex:none; width:360px; height:230px; overflow:hidden; border-radius:12px; }
.rec-pic img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.rec-card:hover .rec-pic img{ transform:scale(1.05); }
.rec-body h3{ font-size:17px; margin-bottom:8px; }
.rec-body h3 a:hover{ color:var(--brown-3); }
.rec-body p{ font-size:13.8px; color:var(--brown-3); line-height:1.8; margin-bottom:8px; }
.rec-body time{ font-family:var(--font-mono); font-size:12.5px; color:var(--tan); }

/* 最新/周/日/月 四块并排（按原排列顺序：最新→周→日→月） */
.rec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:34px; }
.rec-block{ background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:20px 18px 8px; }
.rec-block-title{ font-size:15px; color:var(--brown-2); margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid var(--brown-3); }
.rec-item{ padding:11px 0; border-bottom:1px dashed var(--line); }
.rec-item:last-child{ border-bottom:0; }
.rec-item h4{ font-size:14px; line-height:1.5; margin-bottom:4px; }
.rec-item h4 a:hover{ color:var(--brown-3); }
.rec-item p{ font-size:12.6px; color:var(--brown-3); line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rec-item time{ display:inline-block; margin-top:4px; font-family:var(--font-mono); font-size:11.5px; color:var(--tan); }

/* ---------- 板块 2.5：文章导读 ---------- */
.s-guide{ padding:20px 0 10px; }
.s-guide-inner{ background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:30px 34px; display:grid; grid-template-columns:280px 1fr; gap:34px; align-items:start; }
.s-guide-head{ position:sticky; top:110px; }
.s-guide-head h2{ font-size:22px; line-height:1.5; margin-top:12px; }
.s-guide-body p{ font-size:14px; color:var(--brown-3); line-height:1.95; margin-bottom:14px; }
.s-guide-body ul li{ padding:10px 0 10px 18px; position:relative; font-size:13.8px; color:var(--brown-3); line-height:1.8; border-bottom:1px dashed var(--line); }
.s-guide-body ul li:last-child{ border-bottom:0; }
.s-guide-body ul li::before{ content:""; position:absolute; left:0; top:17px; width:7px; height:7px; background:var(--brown-3); border-radius:2px; transform:rotate(45deg); }
.s-guide-body b{ color:var(--ink-2); }

/* ---------- 板块 3.5：看完还想了解 ---------- */
.s-more{ padding:40px 0 50px; }
.s-more-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:34px; align-items:start; }
.s-more-svc h2, .s-more-faq h2{ font-size:19px; margin:10px 0 16px; }
.s-more-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.s-more-card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 18px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:transform .25s ease, box-shadow .25s ease;
}
.s-more-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.s-more-card b{ display:block; font-family:var(--font-head); font-size:14.5px; color:var(--ink-2); margin-bottom:6px; }
.s-more-card p{ font-size:12.8px; color:var(--brown-3); line-height:1.7; }
.s-more-faq .s-more-item{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:0 18px; margin-bottom:12px;
}
.s-more-faq summary{ cursor:pointer; list-style:none; padding:15px 0; font-size:14.5px; font-family:var(--font-head); color:var(--ink-2); position:relative; padding-right:26px; }
.s-more-faq summary::-webkit-details-marker{ display:none; }
.s-more-faq summary::after{
  content:""; position:absolute; right:4px; top:18px; width:8px; height:8px;
  border-right:2px solid var(--brown-3); border-bottom:2px solid var(--brown-3);
  transform:rotate(45deg); transition:transform .3s ease;
}
.s-more-faq details[open] summary::after{ transform:rotate(225deg); }
.s-more-faq p{ font-size:13.2px; color:var(--brown-3); line-height:1.85; padding:0 0 15px; }
.s-more-faq .btn{ margin-top:6px; }

/* ---------- 板块 4：底部 CTA ---------- */
.s-cta{
  background:var(--ink);
  clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);
  padding:104px 0 92px;
  color:var(--cream);
}
.s-cta-inner{ text-align:center; }
.s-cta h2{ color:var(--cream); font-size:27px; margin-bottom:10px; }
.s-cta p{ color:rgba(242,232,213,.75); font-size:15px; margin-bottom:26px; }
.s-cta .btn-ghost{ color:var(--cream); border-color:rgba(242,232,213,.5); }
.s-cta .btn-ghost:hover{ border-color:var(--cream); color:var(--cream); }

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .s-layout{ grid-template-columns:1fr; }
  .s-side{ position:static; flex-direction:row; flex-wrap:wrap; }
  .s-side-card{ flex:1 1 260px; }
  .rec-grid{ grid-template-columns:repeat(2,1fr); }
  .s-guide-inner{ grid-template-columns:1fr; }
  .s-guide-head{ position:static; }
  .s-more-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .article-body{ padding:26px 20px 32px; }
  .rec-card{ flex-direction:column; }
  .rec-pic{ width:100%; height:auto; aspect-ratio:16/9; }
  .rec-grid{ grid-template-columns:1fr; }
  .s-hero{ padding:104px 0 118px; }
  .s-more-cards{ grid-template-columns:1fr; }
}