/* ==========================================================================
   show.css — 资讯详情页（show.html）私有样式
   设计语言：阅读长文感 · 米白纸面 + 衬线标题 + 深绿强调
   ========================================================================== */

/* ---------- 1. 面包屑 ---------- */
.sh-crumb{
  margin-top:calc(var(--header-h) + var(--topbar-h));
  background:var(--cream-2);border-bottom:1px solid var(--line);
}
.sh-crumb-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 0;font-size:13.5px;color:var(--ink-faint);
}
.sh-crumb a{color:var(--ink-soft)}
.sh-crumb a:hover{color:var(--green-deep)}
.sh-crumb .sh-sep{color:var(--line)}
.sh-crumb .sh-here{color:var(--wood-deep);font-weight:600;max-width:420px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 2. 文章主区 ---------- */
.sh-main{padding:44px 0 30px;background:var(--cream-3)}
.sh-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}

.sh-article{
  background:var(--white);border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);
  box-shadow:var(--shadow-sm);padding:44px 48px;
}
.sh-article-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:3px;color:var(--green-deep);font-weight:600;
  margin-bottom:14px;
}
.sh-article-kicker::before{content:"";width:24px;height:2px;background:var(--wood-light)}
.sh-article h1{
  font-size:clamp(24px,3vw,34px);line-height:1.45;letter-spacing:1px;color:var(--ink);
}
.sh-article-meta{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  margin-top:18px;padding:14px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
  font-size:13.5px;color:var(--ink-faint);
}
.sh-article-meta .sh-date{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft)}
.sh-article-meta .sh-date::before{
  content:"";width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle,var(--wood-light) 0 40%,transparent 42%);
}
.sh-article-meta .sh-source{color:var(--green-deep);font-weight:600}

/* 正文排版 */
.sh-prose{margin-top:26px;font-size:16px;line-height:2.05;color:var(--ink-soft)}
.sh-prose p{margin-bottom:18px}
.sh-prose h2{font-size:21px;margin:30px 0 14px;color:var(--ink);padding-left:14px;border-left:4px solid var(--wood)}
.sh-prose h3{font-size:18px;margin:24px 0 10px;color:var(--ink)}
.sh-prose img{
  width:100%;border-radius:var(--radius-sm);margin:10px 0 22px;
  box-shadow:var(--shadow-sm);
}
.sh-prose ul,.sh-prose ol{margin:0 0 18px 1.4em}
.sh-prose li{margin-bottom:8px;list-style:disc}
.sh-prose a{color:var(--green-deep);border-bottom:1px solid var(--wood-light)}
.sh-prose strong{color:var(--ink)}
.sh-prose blockquote{
  margin:22px 0;padding:16px 20px;border-radius:12px;
  background:var(--cream-2);border-left:4px solid var(--green);
  color:var(--ink-soft);font-size:15px;
}

/* 文章底部提示条 */
.sh-note{
  margin-top:30px;padding:18px 22px;border-radius:12px;
  background:var(--cream-2);border:1px dashed var(--wood-light);
  font-size:14px;color:var(--ink-soft);line-height:1.9;
}
.sh-note strong{color:var(--wood-deep)}

/* ---------- 3. 侧栏 ---------- */
.sh-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:calc(var(--header-h) + 22px)}
.sh-side-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.sh-side-title{
  display:flex;align-items:center;gap:10px;padding:15px 20px;
  font-size:15.5px;letter-spacing:2px;color:#f4f1e6;background:var(--green-dark);
  font-family:var(--font-serif);
}
.sh-side-title::before{content:"";width:6px;height:16px;background:var(--wood-light);border-radius:2px}
.sh-side-list{padding:6px 20px 14px}
.sh-side-list li{border-bottom:1px dashed var(--line)}
.sh-side-list li:last-child{border-bottom:0}
.sh-side-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;font-size:13.5px;color:var(--ink-soft);line-height:1.5;
}
.sh-side-list a:hover{color:var(--green-deep)}
.sh-side-list a:hover .sh-arrow{transform:translateX(4px);color:var(--wood)}
.sh-arrow{transition:.25s var(--ease);color:var(--ink-faint);flex-shrink:0}

.sh-consult{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);
}
.sh-consult-body{
  background:linear-gradient(150deg,var(--green-dark),#4c6b52);
  padding:22px;color:#eef2e7;
}
.sh-consult-body h3{color:#fdf6ea;font-size:18px;letter-spacing:1px}
.sh-consult-body p{color:#cfdac7;font-size:13.5px;margin-top:8px;line-height:1.85}
.sh-consult-body .btn{margin-top:14px;width:100%}

/* ---------- 4. 相关文章区（五段连续，无小标题） ---------- */
.sh-related{padding:20px 0 70px;background:var(--cream-3)}

/* a 相关新闻：3 张大卡 */
.sh-rel-a{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sh-rel-a-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:.3s var(--ease);display:flex;flex-direction:column;
}
.sh-rel-a-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.sh-rel-a-pic{display:block;aspect-ratio:16/9;overflow:hidden}
.sh-rel-a-pic img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.sh-rel-a-card:hover .sh-rel-a-pic img{transform:scale(1.06)}
.sh-rel-a-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.sh-rel-a-body h3{font-size:15.5px;line-height:1.6}
.sh-rel-a-body h3 a{color:var(--ink)}
.sh-rel-a-body h3 a:hover{color:var(--green-deep)}
.sh-rel-a-body p{
  margin-top:8px;font-size:13px;color:var(--ink-faint);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sh-rel-a-body span{margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--ink-faint)}

/* b 最新新闻：2 列紧凑图文 */
.sh-rel-b{
  margin-top:44px;background:var(--white);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 2px);padding:26px 28px;box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;
}
.sh-rel-b-item{display:flex;gap:14px;align-items:flex-start}
.sh-rel-b-item .sh-rel-b-pic{
  flex-shrink:0;width:110px;height:76px;border-radius:8px;overflow:hidden;
}
.sh-rel-b-item .sh-rel-b-pic img{width:100%;height:100%;object-fit:cover}
.sh-rel-b-item h3{font-size:14.5px;line-height:1.55}
.sh-rel-b-item h3 a{color:var(--ink)}
.sh-rel-b-item h3 a:hover{color:var(--green-deep)}
.sh-rel-b-item span{display:block;margin-top:5px;font-size:12px;color:var(--ink-faint)}

/* c 周 / d 日 / d 月：三种节奏的列表行，连续排列不加标题 */
.sh-rel-c{
  margin-top:44px;background:var(--white);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 2px);padding:8px 28px;box-shadow:var(--shadow-sm);
}
.sh-rel-c-item{
  display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px dashed var(--line);
}
.sh-rel-c-item:last-child{border-bottom:0}
.sh-rel-c-num{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--cream-2);
  color:var(--wood-deep);font-family:var(--font-serif);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;
}
.sh-rel-c-item h3{flex:1;font-size:15px;line-height:1.5}
.sh-rel-c-item h3 a{color:var(--ink)}
.sh-rel-c-item h3 a:hover{color:var(--green-deep)}
.sh-rel-c-item span{flex-shrink:0;font-size:12.5px;color:var(--ink-faint)}

.sh-rel-d{
  margin-top:44px;background:var(--white);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 2px);padding:8px 28px;box-shadow:var(--shadow-sm);
}
.sh-rel-d-item{
  display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px dashed var(--line);
}
.sh-rel-d-item:last-child{border-bottom:0}
.sh-rel-d-item::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.sh-rel-d-item h3{flex:1;font-size:15px}
.sh-rel-d-item h3 a{color:var(--ink)}
.sh-rel-d-item h3 a:hover{color:var(--green-deep)}
.sh-rel-d-item span{flex-shrink:0;font-size:12.5px;color:var(--ink-faint)}

.sh-rel-e{
  margin-top:44px;background:var(--white);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 2px);padding:26px 28px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:0;
}
.sh-rel-e-item{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:14px 0;border-bottom:1px dashed var(--line);align-items:center}
.sh-rel-e-item:last-child{border-bottom:0}
.sh-rel-e-item .sh-rel-e-pic{border-radius:8px;overflow:hidden;aspect-ratio:16/10}
.sh-rel-e-item .sh-rel-e-pic img{width:100%;height:100%;object-fit:cover}
.sh-rel-e-item h3{font-size:15px;line-height:1.55}
.sh-rel-e-item h3 a{color:var(--ink)}
.sh-rel-e-item h3 a:hover{color:var(--green-deep)}
.sh-rel-e-item p{font-size:12.5px;color:var(--ink-faint);margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 5. FAQ + CTA ---------- */
.sh-faq{padding:60px 0 70px;background:var(--cream)}
.sh-faq-list{max-width:860px;margin:36px auto 0;display:flex;flex-direction:column;gap:13px}
.sh-faq-item{
  background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
}
.sh-faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:13px;
  padding:16px 20px;font-family:var(--font-serif);font-weight:700;font-size:15.5px;color:var(--ink);
}
.sh-faq-item summary::-webkit-details-marker{display:none}
.sh-faq-item summary::before{
  content:"问";flex-shrink:0;width:26px;height:26px;border-radius:8px;
  background:var(--cream-2);color:var(--wood-deep);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;
}
.sh-faq-item summary::after{
  content:"+";margin-left:auto;color:var(--wood);font-size:19px;font-weight:400;transition:.3s;
}
.sh-faq-item[open] summary::after{transform:rotate(45deg)}
.sh-faq-item div{padding:0 20px 16px 59px;font-size:14px;color:var(--ink-soft);line-height:1.95}

.sh-cta{
  background:linear-gradient(120deg,var(--green-dark) 0%,#4c6b52 100%);
  color:#eef2e7;padding:54px 0;
}
.sh-cta-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center}
.sh-cta h2{color:#fdf6ea;font-size:clamp(21px,2.6vw,28px);letter-spacing:1.5px;line-height:1.5}
.sh-cta p{color:#cfdac7;margin-top:12px;font-size:15px}
.sh-cta-actions{display:flex;flex-direction:column;gap:12px}

/* ---------- 6. 响应式 ---------- */
@media (max-width:1080px){
  .sh-layout{grid-template-columns:1fr}
  .sh-side{position:static}
  .sh-rel-a{grid-template-columns:1fr}
  .sh-rel-b{grid-template-columns:1fr}
  .sh-cta-inner{grid-template-columns:1fr}
}
@media (max-width:680px){
  .sh-article{padding:26px 20px}
  .sh-rel-b,.sh-rel-c,.sh-rel-d,.sh-rel-e{padding:18px 16px}
  .sh-rel-e-item{grid-template-columns:1fr;gap:10px}
  .sh-rel-b-item .sh-rel-b-pic{width:90px;height:64px}
  .sh-rel-c-item span{display:none}
  .sh-faq-item div{padding-left:20px}
}