/*============================================================
  畅畅博客 - 响应式样式 responsive.css
  适配: 手机(320px+) / 平板(768px+) / PC(1024px+) / 大屏(1440px+)
============================================================*/

/* ===== 大屏优化 (≥1440px) ===== */
@media (min-width: 1440px) {
    .posts-grid { grid-template-columns: repeat(3, 1fr); }
    .article-container { max-width: 860px; }
}

/* ===== 中等屏幕 (1024-1439px) PC ===== */
@media (max-width: 1439px) and (min-width: 1024px) {
    .posts-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ===== 平板 (768-1023px) ===== */
@media (max-width: 1023px) {
    .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .featured-slider { height: 300px; }
    .featured-slider .slide-overlay { padding: 24px; }
    .featured-slider .slide-overlay h2 { font-size: 22px; }
    .page-hero { padding-top: calc(var(--header-height) + 40px); }
    .article-nav { grid-template-columns: 1fr; }
    .back-to-top { bottom: 24px; right: 24px; width: 40px; height: 40px; }
    .form-card { padding: 32px 24px; }
    .navbar .nav-links a { padding: 6px 10px; font-size: 13px; }
}

/* ===== 手机横屏 (480-767px) ===== */
@media (max-width: 767px) {
    :root { --header-height: 56px; }
    .posts-grid { grid-template-columns: 1fr; gap: 16px; }
    .featured-slider { height: 220px; border-radius: var(--radius-lg); }
    .featured-slider .slide-overlay { padding: 16px; }
    .featured-slider .slide-overlay h2 { font-size: 18px; }
    .featured-slider .slide-overlay p { font-size: 12px; display:none; }
    
    .nav-links { display: none; }
    .mobile-menu-btn { display: flex; }
    
    .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: var(--header-height);
        left: 0; right: 0;
        background: rgba(10,10,20,0.96);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-color);
        padding: 12px;
        gap: 2px;
        z-index: 99;
    }
    .nav-links.mobile-open a {
        padding: 14px 16px;
        border-radius: var(--radius-md);
        width: 100%;
    }
    
    .page-hero { padding-top: calc(var(--header-height) + 32px); }
    .page-hero h1 { font-size: 24px; }
    .page-hero p { font-size: 13px; }
    .page-hero .hero-stats { gap: 16px; flex-wrap: wrap; }
    
    .article-header h1 { font-size: 22px; }
    .article-content { font-size: 15px; }
    .article-content pre { padding: 14px; font-size: 12px; margin: 12px -16px; border-radius: 0; }
    .comment-item.comment-reply { margin-left: 16px; }
    
    .post-card .card-cover { height: 180px; }
    .post-card .card-body h3 { font-size: 16px; }
    
    .form-card { padding: 28px 20px; }
    .form-card h2 { font-size: 20px; }
    
    .back-to-top { bottom: 16px; right: 16px; width: 36px; height: 36px; font-size: 14px; }
    .toast-container { top: 64px; right: 12px; left: 12px; }
    .toast { max-width: 100%; font-size: 13px; }
    
    .pagination a, .pagination span { min-width: 36px; height: 36px; font-size: 13px; }
    .search-bar { margin-bottom: 24px; }
    
    .ban-item { font-size: 12px; }
    .ban-item .ban-value { font-size: 11px; word-break: break-all; }
}

/* ===== 小手机 (320-479px) ===== */
@media (max-width: 479px) {
    .app-container { padding: 0 12px; }
    .page-hero h1 { font-size: 20px; }
    .post-card .card-body { padding: 14px; }
    .article-header h1 { font-size: 20px; }
    .form-card { padding: 24px 16px; }
    .navbar .nav-inner { padding: 0 12px; }
    .nav-brand { font-size: 17px; }
    .article-meta { font-size: 12px; gap: 10px; }
}

/* ===== Win7 兼容 ===== */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE11 降级 - 移除所有backdrop-filter */
    .navbar, .post-card, .form-card, .toast, .back-to-top {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .navbar { background: rgba(10,10,20,0.95); }
    .post-card { background: rgba(17,17,34,1); }
    
    /* 渐变文字降级 */
    .nav-brand, .page-hero h1, .post-card:hover .card-body h3 {
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        color: var(--accent-1);
        background: none;
    }
}

/* ===== 打印样式 ===== */
@media print {
    .navbar, .back-to-top, .toast-container, #particles-bg,
    .reading-progress, .comments-section, .site-footer { display: none !important; }
    body { background: #fff; color: #000; font-size: 14px; }
    .article-container { margin: 0; max-width: 100%; }
    a { color: #000; text-decoration: underline; }
}