/*
 * News Detail Page Styles
 * 新闻详情页样式
 */

/* Hero Banner */
.news-detail-hero {
    position: relative;
    width: 100%;
    height: 32.5rem; /* 520px - 匹配banner图片1920x520比例 */
    overflow: hidden;
}

.news-detail-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content Section */
.news-detail-content {
    padding: 5rem 0;
    background: #ffffff;
}

.news-detail-container {
    max-width: 90rem; /* 版心宽度 */
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb {
    margin-bottom: 3rem;
    font-size: 1rem;
    color: #999;
}

.breadcrumb-link {
    color: #B32A28;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: #951426;
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #ccc;
}

.breadcrumb-current {
    color: #666;
    font-weight: 400;
}

/* Article Content */
.news-detail-article {
    max-width: 90rem; /* 内容区域稍微窄一些 */
    margin: 0 auto;
}

/* TOC layout (borrowed from Novafit, simplified) */
.news-detail-layout { display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; align-items: start; }
.news-toc { position: sticky; top: 6rem; padding-top: 0; }
.news-toc__title { font-weight: 800; letter-spacing: .02em; color: #333; margin-bottom: .75rem; text-transform: uppercase; font-size: 1.5rem; }
.news-toc__body { padding: 0; margin: 0; }
.news-toc__list { list-style: none; margin: 0; padding: 0; }
.news-toc__list li { margin: .5rem 0; /*! font-size: 1rem; */}
.news-toc__list ul { list-style: none; margin: .25rem 0 .25rem .75rem; padding: 0; }
.news-toc__list a { display: block; position: relative; color: #6b7280; text-decoration: none; line-height: 1.6; padding-left: 12px; transition: color .2s ease; font-size: 1.3rem; }
.news-toc__list a:hover { color: #B32A28; }
.news-toc__list a.is-active { color: #B32A28; font-weight: 600; }
.news-toc__list a.is-active::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; background: #B32A28; border-radius: 2px; }
.news-toc__list .level-3>a{ padding-left: 20px }
.news-toc__list .level-4>a{ padding-left: 28px; font-size: .95em }
.news-toc__list .level-5>a{ padding-left: 36px; font-size: .92em }
.news-toc__list .level-6>a{ padding-left: 44px; font-size: .9em }
.news-toc__list li>ul{ display: none; transition: height .2s ease, opacity .2s ease; overflow: hidden }
.news-toc__list li.is-open>ul{ display: block }

@media (max-width: 48rem) {
    .news-detail-layout { display: block; }
    .news-toc { position: relative; top: auto; margin-bottom: 4vw; }
    .news-toc__title { margin-bottom: 2vw; }
}

/* News Title */
.news-detail-title {
    font-family: 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    margin-bottom: 2rem;
    text-align: center; /* 居中对齐 */
}

/* News Meta Information */
.news-detail-meta {
    margin-bottom: 3rem;
    text-align: center; /* 居中对齐 */
}

.news-detail-date {
    display: flex;
    align-items: center;
    justify-content: center; /* 居中对齐 */
    gap: 0.5rem;
    font-size: 1.25rem;
    color: #ADADAD;
}

.news-date-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* News Content Body */
.news-detail-body {
    font-family: 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
    color: #333;
    margin-bottom: 3rem;
}

.news-detail-body p {
    margin-bottom: 1.5rem;
    color: #8C8C8C;
}

.news-detail-body h2,
.news-detail-body h3,
.news-detail-body h4 {
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.news-detail-body h2 {
    font-size: 1.5rem;
}

.news-detail-body h3 {
    font-size: 1.25rem;
}

.news-detail-body h4 {
    font-size: 1.125rem;
}

.news-detail-body ul,
.news-detail-body ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.news-detail-body li {
    margin-bottom: 0.5rem;
}

.news-detail-body blockquote {
    border-left: 4px solid #B32A28;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #666;
}

.news-detail-body img {
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
}


/* Page Links (for paginated content) */
.page-links {
    margin: 2rem 0;
    text-align: center;
}

.page-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.page-links a:hover {
    background: #B32A28;
    color: white;
}

/* Mobile Styles - 参考关于我们页面 */
@media (max-width: 48rem) {
    /* Banner */
    .news-detail-hero {
        height: 50vh;
        min-height: 40vh;
    }
    
    .news-detail-hero-bg {
        object-position: center center;
        object-fit: cover;
    }
    
    /* Content */
    .news-detail-content {
        padding: 8vw 0;
    }
    
    .news-detail-container {
        max-width: 100%;
        padding: 0 4vw;
    }
    
    .news-detail-article {
        max-width: 90vw;
    }
    
    /* Breadcrumb */
    .breadcrumb {
        font-size: 3.5vw;
        margin-bottom: 6vw;
        line-height: 1.4;
        color: #999;
    }
    
    .breadcrumb-separator {
        margin: 0 1vw;
        color: #ccc;
        font-weight: 400;
    }
    
    .breadcrumb-link {
        color: #B32A28;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .breadcrumb-link:hover {
        color: #951426;
        text-decoration: underline;
    }
    
    .breadcrumb-current {
        color: #666;
        font-weight: 400;
        display: inline;
        margin-top: 0;
        word-break: break-all;
        line-height: 1.5;
    }
    
    /* Title */
    .news-detail-title {
        font-size: 6vw;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 4vw;
        text-align: center;
    }
    
    /* Meta */
    .news-detail-meta {
        margin-bottom: 6vw;
        text-align: center;
    }
    
    .news-detail-date {
        justify-content: center;
        gap: 1.5vw;
        font-size: 3.5vw;
        color: #666;
    }
    
    .news-date-icon {
        width: 3.5vw;
        height: 3.5vw;
    }
    
    /* Content Body */
    .news-detail-body {
        font-size: 4vw;
        line-height: 1.6;
        margin-bottom: 6vw;
        color: #333;
    }
    
    .news-detail-body p {
        margin-bottom: 4vw;
    }
    
    .news-detail-body h2,
    .news-detail-body h3,
    .news-detail-body h4 {
        font-weight: 700;
        margin-top: 6vw;
        margin-bottom: 3vw;
        color: #333;
    }
    
    .news-detail-body h2 {
        font-size: 5.5vw;
    }
    
    .news-detail-body h3 {
        font-size: 5vw;
    }
    
    .news-detail-body h4 {
        font-size: 4.5vw;
    }
    
    .news-detail-body ul,
    .news-detail-body ol {
        margin-bottom: 4vw;
        padding-left: 6vw;
    }
    
    .news-detail-body li {
        margin-bottom: 2vw;
        font-size: 4vw;
        line-height: 1.5;
    }
    
    .news-detail-body blockquote {
        border-left: 1vw solid #B32A28;
        padding-left: 4vw;
        margin: 6vw 0;
        font-style: italic;
        color: #666;
        font-size: 4vw;
    }
    
    .news-detail-body img {
        max-width: 100%;
        height: auto;
        margin: 6vw 0;
    }
    
    /* Page Links */
    .page-links {
        margin: 6vw 0;
        text-align: center;
    }
    
    .page-links a {
        display: inline-block;
        padding: 2vw 3vw;
        margin: 0 1vw;
        background: #f8f9fa;
        color: #333;
        text-decoration: none;
        border-radius: 1vw;
        font-size: 3.5vw;
        transition: all 0.3s ease;
    }
    
    .page-links a:hover {
        background: #B32A28;
        color: white;
    }
}