/* ============================================================
   资讯详情页专属样式 - 居中长读 + 相关聚散网格
   ============================================================ */

/* 详情头 */
.show-head { padding: 150px 0 30px; background: var(--cream-2); position: relative; overflow: hidden; }
.show-head::after {
    content: ""; position: absolute; right: -60px; top: -40px; width: 220px; height: 220px; border-radius: 50%;
    background: rgba(226,196,188,.2);
}
.show-head .wrap-narrow { position: relative; z-index: 2; }
.show-cat { display: inline-block; font-size: .78rem; color: var(--lotus-deep); letter-spacing: 2px; margin-bottom: 16px; padding: 4px 14px; background: var(--white); border-radius: 20px; }
.show-head h1 { margin-bottom: 18px; line-height: 1.4; }
.show-meta { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; font-size: .88rem; color: var(--ink-mute); padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.show-meta .time { color: var(--lotus-deep); font-weight: 500; }
.show-share { display: flex; gap: 10px; margin-left: auto; }
.show-share a { width: 34px; height: 34px; border-radius: 50%; background: var(--white); display: grid; place-items: center; color: var(--ink-soft); transition: .3s; }
.show-share a:hover { background: var(--lotus-deep); color: var(--white); }

/* 正文 */
.show-body { padding: 50px 0; }
.show-article { font-size: 1.02rem; line-height: 2; color: var(--ink-soft); }
.show-article p { margin-bottom: 22px; }
.show-article img { border-radius: var(--radius); margin: 26px auto; box-shadow: var(--shadow-sm); }
.show-article h2, .show-article h3 { margin: 36px 0 16px; color: var(--ink); }
.show-article ul, .show-article ol { margin: 0 0 22px 22px; }
.show-article li { margin-bottom: 8px; }

/* 返回列表 */
.show-back { text-align: center; padding: 30px 0 10px; }

/* 相关资讯聚散网格（5种列表混合，无小标题） */
.related { background: var(--cream-2); }
.related-head { text-align: center; margin-bottom: 40px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rel-card {
    background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
    transition: transform .4s, box-shadow .4s; display: flex; flex-direction: column;
}
.rel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.rel-card .pic { height: 150px; overflow: hidden; }
.rel-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.rel-card:hover .pic img { transform: scale(1.06); }
.rel-card .body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.rel-card .date { font-size: .76rem; color: var(--lotus-deep); margin-bottom: 8px; }
.rel-card h4 { font-size: .98rem; line-height: 1.5; margin-bottom: 8px; }
.rel-card .zh { font-size: .84rem; color: var(--ink-soft); flex: 1; }

@media (max-width: 1024px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
    .related-grid { grid-template-columns: 1fr; }
    .show-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
    .show-share { margin-left: 0; }
}