/* =========================================================
   layout-v2.css
   结构层 CSS（不负责颜色 / 皮肤 / 品牌）
   ========================================================= */

/* ========= Reset & Base ========= */

html,body{
    margin:0;
    padding:0;
}

body{
    line-height:1.6;
}

main,header,footer,nav,section,article{
    display:block;
}

ul,ol{
    margin:0;
    padding:0;
    list-style:none;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

/* ========= 通用容器 ========= */

.wrap{
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
}

/* ========= Header ========= */

.site-header{
    width:100%;
}

.site-header .wrap{
    display:flex;
    align-items:center;
    min-height:64px;
}

.logo,
.logo a{
    font-size:24px;
    font-weight:700;
    line-height:1;
}

/* ========= 主导航 ========= */

.site-nav{
    width:100%;
}

.site-nav ul{
    display:flex;
    flex-wrap:wrap;
}

.site-nav li{
    margin-right:20px;
}

.site-nav a{
    display:inline-block;
    padding:10px 0;
    font-size:15px;
    white-space:nowrap;
}

/* ========= 首页结构 ========= */

.home{
    margin-top:24px;
}

/* 首页首屏推荐 */

.home-feature{
    margin-bottom:40px;
}

.home-feature h2{
    font-size:22px;
    margin:0 0 16px 0;
}

.home-feature ul{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;
}

.home-feature li{
    padding:16px;
}

/* 首页栏目分区 */

.home-columns{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:32px;
}

.column-box h3{
    font-size:18px;
    margin:0 0 12px 0;
}

.column-box ul{
    margin:0;
    padding:0;
}

.column-box li{
    padding:8px 0;
}

/* ========= 栏目页结构 ========= */

.list-page{
    margin-top:32px;
}

.list-header{
    margin-bottom:24px;
}

.list-header h1{
    font-size:28px;
    margin:0;
}

/* 文章列表 */

.article-list{
    display:flex;
    flex-direction:column;
}

.article-item{
    padding:20px 0;
}

.article-item h2{
    font-size:20px;
    margin:0 0 8px 0;
}

.article-item time{
    font-size:13px;
    opacity:.7;
}

/* 分页 */

.pagination{
    margin:40px 0;
    text-align:center;
}

/* ========= 内容页结构 ========= */

.article-page{
    margin-top:32px;
    max-width:860px;
}

/* 面包屑 */

.breadcrumb{
    font-size:13px;
    margin-bottom:20px;
}

/* 正文主体 */

.article{
    padding-bottom:40px;
}

.article h1{
    font-size:32px;
    line-height:1.3;
    margin:0 0 16px 0;
}

.article .meta{
    font-size:13px;
    margin-bottom:32px;
    opacity:.75;
}

.article .meta span{
    margin-right:16px;
}

/* 正文内容 */

.article .content{
    font-size:17px;
    line-height:1.9;
}

.article .content p{
    margin-bottom:1.2em;
}

.article .content img{
    margin:24px auto;
}

/* ========= Footer ========= */

.site-footer{
    margin-top:60px;
}

.site-footer p{
    font-size:13px;
    margin:0;
    padding:24px 0;
    text-align:center;
}

/* ========= 响应式 ========= */

@media (max-width:992px){

    .home-feature ul{
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    }

    .article-page{
        padding:0 8px;
    }
}

@media (max-width:768px){

    .site-nav ul{
        overflow-x:auto;
        white-space:nowrap;
    }

    .site-nav li{
        margin-right:16px;
    }

    .home-columns{
        grid-template-columns:1fr;
    }

    .article-page{
        max-width:100%;
    }

    .article h1{
        font-size:26px;
    }
}