.article-detail{background:#fff;padding:28px;border-radius:var(--card-radius);box-shadow:var(--card-shadow)}
.article-header{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #eee}
.article-title{font-size:2rem;margin-bottom:12px;color:var(--dark);line-height:1.25}
.article-meta-detail{display:flex;gap:18px;color:#666;font-size:.95rem;flex-wrap:wrap}
.article-cover{margin:20px 0;text-align:center}
.cover-image{max-width:100%;height:auto;border-radius:8px;box-shadow:var(--card-shadow)}
.article-summary-box{background:#f8f9fa;padding:16px;border-left:4px solid var(--primary);margin-bottom:18px;border-radius:4px}
.article-content-detail{line-height:1.75;font-size:1.04rem;color:#333}
.article-content-detail img{max-width:100%;height:auto;border-radius:6px;margin:18px 0;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.article-navigation{display:flex;gap:12px;margin-top:28px;border-top:1px solid #eee;padding-top:18px;flex-wrap:wrap}
.btn-outline{border:1px solid var(--primary);color:var(--primary);background:transparent}
.btn-outline:hover{background:var(--primary);color:#fff}
/* 相关文章区域整体 */
.related-articles {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.related-articles h3 {
    font-size: 1.6rem;
    color: var(--dark);
    margin-bottom: 18px;
}

/* 相关文章网格 */
.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* 单个相关文章卡片 */
.related-article-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.related-article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

/* 文章封面图 */
.related-article-card img {
    width: 100%;
    height: 180px; /* 调整高度和首页一致 */
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #f1f1f1;
}

/* 卡片内容 */
.related-article-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 标题 */
.related-article-content h4 {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
    color: var(--dark);
}
.related-article-content h4 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}
.related-article-content h4 a:hover {
    color: var(--primary);
}

/* 摘要 */
.related-article-content p {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 发布时间 */
.related-date {
    color: #666;
    font-size: 0.85rem;
    margin-top: auto;
}

@media (max-width:768px){
    .article-title{font-size:1.6rem}
    .article-navigation{flex-direction:column}
	.related-articles-grid {
        grid-template-columns: 1fr;
    }
}