/* 响应式布局 */

/* 平板 */
@media (max-width: 992px) {
    .hero-banner .container { grid-template-columns: 1fr; }
    .banner-main { height: 280px; }
    .content-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .server-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: 1fr; }
    .detail-hero .container { grid-template-columns: 120px 1fr; }
    .detail-logo { width: 120px; height: 120px; font-size: 50px; }
    .di-actions { grid-column: 1 / -1; flex-direction: row; }
    .detail-content { grid-template-columns: 1fr; }
    .detail-stats { grid-template-columns: repeat(2, 1fr); }
}

/* 手机 */
@media (max-width: 768px) {
    .header .container { flex-wrap: wrap; gap: 10px; }
    .logo h1 { font-size: 20px; }
    .main-nav { order: 3; width: 100%; overflow-x: auto; }
    .main-nav ul { gap: 3px; white-space: nowrap; }
    .main-nav a { padding: 6px 10px; font-size: 12px; }
    .search-box { order: 2; }
    .search-box input { width: 150px; padding: 6px 10px; }
    
    .banner-main { height: 220px; }
    .slide-content { padding: 25px; }
    .slide-content h2 { font-size: 22px; }
    .slide-content p { font-size: 13px; }
    
    .server-grid { grid-template-columns: 1fr; }
    .server-row { grid-template-columns: 60px 1fr auto; }
    .sr-thumb { width: 60px; height: 45px; font-size: 20px; }
    .sr-meta { display: none; }
    
    .news-item { grid-template-columns: 1fr; }
    .news-item .ni-thumb { width: 100%; height: 150px; }
    
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    
    .detail-hero .container { grid-template-columns: 1fr; text-align: center; }
    .detail-info .di-tags { justify-content: center; }
    .di-actions { flex-direction: column; }
    
    .article { padding: 20px; }
    .article-header h1 { font-size: 18px; }
    
    .filter-bar { gap: 5px; }
    .filter-tag { padding: 4px 10px; font-size: 11px; }
}

@media (max-width: 480px) {
    .top-bar .container { font-size: 11px; }
    .banner-dots .dot { width: 20px; }
    .server-table { font-size: 11px; }
    .server-table th, .server-table td { padding: 8px 5px; }
    .pagination a, .pagination span { padding: 6px 10px; font-size: 12px; }
}