/* ==================== 文章详情页响应式样式 ==================== */

/* === 超大屏：1920px === */
@media (max-width: 1920px) {
    /* 公共容器样式由 base/containers.css 统一管理 */
}

/* === 大屏：1440px === */
@media (max-width: 1440px) {
    /* 公共容器样式由 base/containers.css 统一管理 */
}

/* === 中等屏幕：1024px === */
@media (max-width: 1024px) {
    .content-article {
        padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 10); /* 20px 40px = 5 * 4px, 10 * 4px */
    }
    
    .content-header__nav-wrapper {
        padding-left: calc(var(--spacing-unit) * 5); /* 20px = 5 * 4px */
        padding-right: calc(var(--spacing-unit) * 5); /* 20px = 5 * 4px */
    }
    
    .content-header__tabs {
        gap: calc(var(--spacing-unit) * 1.8); /* 20px = 5 * 4px */
    }
    
    .content-article__title {
        font-size: calc(var(--spacing-unit) * 6.5); /* 26px = 6.5 * 4px */
        line-height: calc(var(--spacing-unit) * 9.5); /* 38px = 9.5 * 4px */
    }
    
    .content-article__body {
        font-size: calc(var(--spacing-unit) * 3.75); /* 15px = 3.75 * 4px */
        line-height: calc(var(--spacing-unit) * 6); /* 24px = 6 * 4px */
    }
}

/* === 平板设备：768px === */
@media (max-width: 768px) {
    .content-banner {
        height: calc(var(--spacing-unit) * 40); /* 160px = 40 * 4px */
    }
    
    .content-header {
        margin-top: calc(var(--spacing-unit) * -19.5); /* -80px = -20 * 4px */
    }
    
    .content-header__layout {
        flex-direction: column;
        align-items: stretch;
    }
    
    .content-header__title-wrapper {
        align-self: center;
    }
    
    .content-header__title {
        font-size: calc(var(--spacing-unit) * 6); /* 24px = 6 * 4px */
        padding: calc(var(--spacing-unit) * 5); /* 20px = 5 * 4px */
    }
    
    /* 调整导航布局为垂直 */
    .content-header__nav-wrapper {
        flex-direction: column;
        align-items: flex-start;
        padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 5); /* 10px 20px */
        margin: calc(var(--spacing-unit) * 2.5) 0;
    }
    
    .content-header__tabs {
        flex-wrap: wrap;
        gap: calc(var(--spacing-unit) * 2.5); /* 10px = 2.5 * 4px */
        margin: 0 auto;
    }
    
    .content-header__tab-item {
        font-size: calc(var(--spacing-unit) * 4); /* 16px = 4 * 4px */
        line-height: calc(var(--spacing-unit) * 8); /* 32px = 8 * 4px */
    }
    
    .content-header__breadcrumb {
        align-self: flex-start;
        margin: 0 auto;
    }
    
    .content-article__title {
        font-size: calc(var(--spacing-unit) * 5.5); /* 22px = 5.5 * 4px */
        line-height: calc(var(--spacing-unit) * 8); /* 32px = 8 * 4px */
        text-align: left;
    }
    
    .content-article__meta {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: calc(var(--spacing-unit) * 4); /* 16px = 4 * 4px */
    }
    
    .content-article {
        padding: calc(var(--spacing-unit) * 3.75) calc(var(--spacing-unit) * 5); /* 15px 20px */
    }
    
    .content-article__body {
        font-size: calc(var(--spacing-unit) * 3.5); /* 14px = 3.5 * 4px */
        line-height: calc(var(--spacing-unit) * 5.5); /* 22px = 5.5 * 4px */
        text-align: left;
    }
    
    .content-article__body img,
    .content-article__body video {
        margin: calc(var(--spacing-unit) * 3.75) auto; /* 15px = 3.75 * 4px */
    }
    
    .content-article__body p {
        margin-bottom: calc(var(--spacing-unit) * 3); /* 12px = 3 * 4px */
    }
    
    .prev-next-nav {
        gap: calc(var(--spacing-unit) * 2.5); /* 10px = 2.5 * 4px */
        /* 保持桌面端的左右布局，不改为column */
    }
    
    /* prev-article 和 next-article 的样式移到 600px 断点 */
    
    .wechat-share-container {
        width: 90vw;
        margin: 0 5vw;
    }
}

/* === 小平板和手机端：600px === */
@media (max-width: 600px) {
    .prev-next-nav {
        flex-direction: column; /* 只在600px以下才改为上下布局 */
        gap: calc(var(--spacing-unit) * 2.5);
        align-items: flex-start;
    }
    
    .prev-article,
    .next-article {
        width: 100%;
        text-align: left;
    }
}

/* === 手机端：480px === */
@media (max-width: 480px) {
    .content-banner {
        height: calc(var(--spacing-unit) * 30); /* 120px = 30 * 4px */
    }
    
    .content-header {
        margin-top: calc(var(--spacing-unit) * -15); /* -60px = -15 * 4px */
    }
    
    .content-header__title {
        font-size: calc(var(--spacing-unit) * 5); /* 20px = 5 * 4px */
        padding: calc(var(--spacing-unit) * 3.75); /* 15px = 3.75 * 4px */
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
    
    .content-header__nav-wrapper {
        padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3.75); /* 8px 15px */
        margin: calc(var(--spacing-unit) * 2.5);
    }
    
    .content-header__tabs {
        gap: calc(var(--spacing-unit) * 2); /* 8px = 2 * 4px */
        margin: 0 auto;
    }
    
    .content-header__tab-item {
        font-size: calc(var(--spacing-unit) * 3.5); /* 14px = 3.5 * 4px */
        line-height: calc(var(--spacing-unit) * 7); /* 28px = 7 * 4px */
        padding: calc(var(--spacing-unit) * 1.5) 0; /* 6px 0 */
    }
    
    .content-header__breadcrumb {
        font-size: calc(var(--spacing-unit) * 3); /* 12px = 3 * 4px */
        gap: calc(var(--spacing-unit) * 1); /* 4px = 1 * 4px */
        flex-wrap: wrap;
    }
    
    .breadcrumb-icon-home {
        width: calc(var(--spacing-unit) * 3.5); /* 14px = 3.5 * 4px */
        height: calc(var(--spacing-unit) * 3.5); /* 14px = 3.5 * 4px */
    }
    
    .content-main {
        margin: calc(var(--spacing-unit) * 5) 0; /* 20px = 5 * 4px */
    }
    
    .content-article {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3.75); /* 12px 15px */
        margin: 0 calc(var(--spacing-unit) * 2.5); /* 0 10px */
    }
    
    .content-article__title {
        font-size: calc(var(--spacing-unit) * 4.5); /* 18px = 4.5 * 4px */
        line-height: calc(var(--spacing-unit) * 6.5); /* 26px = 6.5 * 4px */
        margin-bottom: calc(var(--spacing-unit) * 3); /* 12px = 3 * 4px */
    }
    
    .content-article__meta {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2); /* 8px = 2 * 4px */
        align-items: flex-start;
        font-size: calc(var(--spacing-unit) * 2.75); /* 11px = 2.75 * 4px */
    }
    
    .meta-item {
        gap: calc(var(--spacing-unit) * 1.5); /* 6px = 1.5 * 4px */
    }
    
    .meta-icon-time,
    .meta-icon-source,
    .meta-icon-views {
        width: calc(var(--spacing-unit) * 3.5); /* 14px = 3.5 * 4px */
        height: calc(var(--spacing-unit) * 3.5); /* 14px = 3.5 * 4px */
    }
    
    .meta-item--share {
        align-self: center;
        margin-top: calc(var(--spacing-unit) * 2); /* 8px = 2 * 4px */
    }
    
    .share-icon-wechat,
    .share-icon-qq,
    .share-icon-weibo,
    .share-icon-qzone {
        width: calc(var(--spacing-unit) * 4.5); /* 18px = 4.5 * 4px */
        height: calc(var(--spacing-unit) * 4.5); /* 18px = 4.5 * 4px */
    }
    
    .content-article__body {
        font-size: calc(var(--spacing-unit) * 3.25); /* 13px = 3.25 * 4px */
        line-height: calc(var(--spacing-unit) * 5); /* 20px = 5 * 4px */
        margin-bottom: calc(var(--spacing-unit) * 4); /* 16px = 4 * 4px */
    }
    
    .content-article__body h2 {
        font-size: calc(var(--spacing-unit) * 4); /* 16px = 4 * 4px */
        margin: calc(var(--spacing-unit) * 4) 0 calc(var(--spacing-unit) * 2) 0; /* 16px 0 8px 0 */
    }
    
    .content-article__body h3 {
        font-size: calc(var(--spacing-unit) * 3.75); /* 15px = 3.75 * 4px */
        margin: calc(var(--spacing-unit) * 3.5) 0 calc(var(--spacing-unit) * 1.5) 0; /* 14px 0 6px 0 */
    }
    
    .content-article__body h4 {
        font-size: calc(var(--spacing-unit) * 3.5); /* 14px = 3.5 * 4px */
        margin: calc(var(--spacing-unit) * 3) 0 calc(var(--spacing-unit) * 1.5) 0; /* 12px 0 6px 0 */
    }
    
    .content-article__body p {
        margin-bottom: calc(var(--spacing-unit) * 2.5); /* 10px = 2.5 * 4px */
    }
    
    .content-article__body img,
    .content-article__body video {
        margin: calc(var(--spacing-unit) * 3) auto; /* 12px = 3 * 4px */
    }
    
    .content-article__body blockquote {
        margin: calc(var(--spacing-unit) * 3) 0; /* 12px = 3 * 4px */
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4); /* 12px 16px */
        font-size: calc(var(--spacing-unit) * 3); /* 12px = 3 * 4px */
    }
    
    .content-article__body ul,
    .content-article__body ol {
        margin: calc(var(--spacing-unit) * 3) 0; /* 12px = 3 * 4px */
        padding-left: calc(var(--spacing-unit) * 5); /* 20px = 5 * 4px */
    }
    
    .content-article__body li {
        margin-bottom: calc(var(--spacing-unit) * 1.5); /* 6px = 1.5 * 4px */
    }
    
    .content-article__footer {
        padding: calc(var(--spacing-unit) * 4) 0; /* 16px = 4 * 4px */
    }
    
    .prev-next-nav {
        gap: calc(var(--spacing-unit) * 2); /* 8px = 2 * 4px */
        /* flex-direction: column 已在600px断点设置 */
    }
    
    .prev-article span,
    .next-article span,
    .prev-article a,
    .next-article a {
        font-size: calc(var(--spacing-unit) * 3); /* 12px = 3 * 4px */
    }
    
    .wechat-share-container {
        width: 95vw;
        margin: 0 2.5vw;
    }
    
    .wechat-share-content {
        padding: calc(var(--spacing-unit) * 3.75); /* 15px = 3.75 * 4px */
    }
    
    #wechat-qrcode img {
        max-width: calc(var(--spacing-unit) * 37.5); /* 150px = 37.5 * 4px */
        max-height: calc(var(--spacing-unit) * 37.5); /* 150px = 37.5 * 4px */
    }
}

/* === 超小屏幕 (<320px) === */
@media (max-width: 319px) {
    .content-header__title {
        font-size: calc(var(--spacing-unit) * 4.5); /* 18px = 4.5 * 4px */
        padding: calc(var(--spacing-unit) * 3); /* 12px = 3 * 4px */
    }
    
    .content-article {
        padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3); /* 10px 12px */
        margin: 0 calc(var(--spacing-unit) * 1.25); /* 0 5px */
    }
    
    .content-article__title {
        font-size: calc(var(--spacing-unit) * 4); /* 16px = 4 * 4px */
        line-height: calc(var(--spacing-unit) * 5.5); /* 22px = 5.5 * 4px */
    }
    
    .content-article__body {
        font-size: calc(var(--spacing-unit) * 3); /* 12px = 3 * 4px */
        line-height: calc(var(--spacing-unit) * 4.5); /* 18px = 4.5 * 4px */
    }
    
    .wechat-share-container {
        width: 98vw;
        margin: 0 1vw;
    }
}

/* === 打印样式 === */
@media print {
    body {
        background-color: white !important;
    }
    
    .content-banner,
    .content-header,
    .meta-item--share,
    .prev-next-nav {
        display: none;
    }
    
    /* 微信分享现在使用统一的新窗口方式，无需特殊处理 */
    
    .content-main {
        margin: 0;
    }
    
    .content-article {
        padding: 0;
        background-color: white;
    }
    
    .content-article__title {
        font-size: calc(var(--spacing-unit) * 5); /* 20px = 5 * 4px */
        color: #000;
        text-align: center;
        margin-bottom: calc(var(--spacing-unit) * 3.75); /* 15px */
    }
    
    .content-article__meta {
        justify-content: center;
        margin-bottom: calc(var(--spacing-unit) * 5); /* 20px = 5 * 4px */
    }
    
    .content-article__body {
        font-size: calc(var(--spacing-unit) * 3.5); /* 14px = 3.5 * 4px */
        line-height: calc(var(--spacing-unit) * 4.5); /* 18px = 4.5 * 4px */
        color: #000;
        text-align: left;
    }
    
    .content-article__body img,
    .content-article__body video {
        max-width: 100%;
        page-break-inside: avoid;
    }
}