/* ========== 新闻详情页 ========== */
.news-detail{
    width: 100%;
}
.news-detail .box{
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
}

/* ========== 左侧文章 ========== */
.article-left{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.article{
    background: #ffffff;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 30px 35px;
}

/* 文章标题 */
.article-title{
    font-size: 26px;
    font-weight: 700;
    color: #333333;
    line-height: 1.3;
    padding-bottom: 20px;
}

/* 文章信息 */
.article-info{
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.article-info .info-item{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #999999;
}

.article-info .info-item i{
    color: #53a8ff;
    font-size: 14px;
}

/* 分享按钮 */
.article-share{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.article-share span{
    font-size: 14px;
    color: #999999;
}

.share-btn{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.share-btn.wechat{
    background: #07c160;
}
.share-btn.weibo{
    background: #e6162d;
}
.share-btn.qq{
    background: #12b7f5;
}
.share-btn.qzone{
    background: #ffce00;
}

.share-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}



/* 文章正文 */
.article-body{
    color: #333333;
    line-height: 1.8;
    font-size: 15px;
}

.article-lead{
    background: #fff7e6;
    border-left: 4px solid #faad14;
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 4px;
}

.article-lead p{
    margin-bottom: 0px !important;
    color: #666666;
    font-size: 14px;
    line-height: 1.6;
}

.article-body h2{
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    margin: 30px 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.article-body h3{
    font-size: 17px;
    font-weight: 600;
    color: #333333;
    margin: 20px 0 12px;
    color: #409EFF;
}

.article-body p{
    margin-bottom: 15px;
    color: #555555;
}

.article-body ul{
    margin: 15px 0;
    padding-left: 20px;
}

.article-body ul li{
    margin-bottom: 10px;
    list-style: disc;
    color: #555555;
}

.article-body strong{
    color: #409EFF;
    font-weight: 600;
}




/* 文章底部 */
.article-footer{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
    padding-top: 20px;

}

.article-tags{
    flex: 1;
}

.article-tags span{
    font-size: 14px;
    color: #666666;
    margin-right: 10px;
}

.article-tags span i{
    margin-right: 5px;
    color: #53a8ff;
}

.article-tags a{
    display: inline-block;
    margin: 5px 8px 5px 0;
    padding: 6px 14px;
    background: #ecf5ff;
    color: #409EFF;
    border-radius: 15px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.article-tags a:hover{
    background: #409EFF;
    color: #ffffff;
}



/* 上一篇/下一篇 */
.article-nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

.nav-link{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-link:hover{
    background: #409EFF;
    transform: translateY(-2px);
}

.nav-link:hover .nav-label,
.nav-link:hover .nav-title,
.nav-link:hover i{
    color: #ffffff;
}

.nav-link.prev{
    align-items: flex-start;
}

.nav-link.next{
    align-items: flex-end;
    text-align: right;
}

.nav-link i{
    color: #53a8ff;
    transition: color 0.3s ease;
}

.nav-label{
    font-size: 14px;
    color: #999999;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-title{
    font-size: 14px;
    color: #333333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ========== 右侧侧边栏 ========== */
.article-right{
    display: flex;
    flex-direction: column;
    gap: 25px;
}



@media (max-width: 960px){
    .news-detail .box{
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .breadcrumb{
        overflow-x: auto;
        white-space: nowrap;
    }
    .article{
        padding: 25px 20px;
    }
    .article-title{
        font-size: 22px;
    }
    .article-info{
        gap: 15px;
    }
    .article-info .info-item{
        font-size: 12px;
    }
    .article-share{
        flex-wrap: wrap;
    }
    .article-body{
        font-size: 14px;
    }
    .article-body h2{
        font-size: 18px;
    }
    .article-body h3{
        font-size: 16px;
    }
    .article-footer{
        flex-direction: column;
        gap: 20px;
    }
    .article-qr{
        padding-left: 0;
    }
    .article-nav{
        grid-template-columns: 1fr;
    }
    .nav-link.next{
        text-align: left;
        align-items: flex-start;
    }
    .related-news{
        padding: 25px 20px;
    }
    .related-item{
        flex-direction: column;
    }
    .related-img{
        width: 100%;
        height: 80px;
    }
}