/**
 * 万能对比系统 - 响应式样式
 * Mobile and tablet adaptations
 */

/* ========== Performance Optimizations ========== */
/* 使用CSS containment优化渲染性能 */
.cpu-card,
.category-card,
.ranking-item,
.compare-item,
.specs-card,
.chart-card {
    contain: layout style paint;
    content-visibility: auto;
}

/* 首屏关键内容不延迟渲染 */
.hero-search,
.site-header,
.search-box {
    content-visibility: visible;
}

/* ========== Mobile First Base Styles ========== */
@media (max-width: 639px) {
    /* Container */
    .container {
        padding: 0 var(--space-4);
    }

    /* Header */
    .site-header {
        height: 56px;
    }

    .header-inner {
        height: 56px;
    }

    .site-logo {
        font-size: 18px;
    }

    .logo-icon {
        font-size: 20px;
    }

    /* Hero Section */
    .hero-search {
        padding: calc(56px + var(--space-8)) 0 var(--space-8);
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .search-input-wrapper {
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .search-input-wrapper .search-input {
        width: 100%;
        padding: var(--space-3);
    }

    .search-input-wrapper .search-submit {
        width: 100%;
        padding: var(--space-3);
    }

    .search-icon {
        display: none;
    }

    /* Categories */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .category-card {
        padding: var(--space-4) var(--space-3);
    }

    .category-icon {
        font-size: 32px;
    }

    .category-name {
        font-size: 14px;
    }

    /* Rankings */
    .rankings-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rankings-tabs::-webkit-scrollbar {
        display: none;
    }

    .ranking-tab {
        white-space: nowrap;
        padding: var(--space-2) var(--space-3);
        font-size: 13px;
    }

    .ranking-item {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .rank-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .rank-name {
        font-size: 14px;
        flex-wrap: wrap;
    }

    .rank-score {
        font-size: 14px;
    }

    /* Product Cards */
    .cpu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .cpu-card-content {
        padding: var(--space-3);
    }

    .cpu-card-title {
        font-size: 14px;
    }

    .cpu-card-specs {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .spec-item {
        font-size: 12px;
    }

    .cpu-card-actions .btn {
        padding: var(--space-1) var(--space-2);
        font-size: 12px;
    }

    /* Compare Bar - Mobile Optimized */
    .compare-bar {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(calc(100% - 60px));
    }

    .compare-bar.active {
        transform: translateY(0);
    }

    .compare-bar.has-items {
        transform: translateY(0);
    }

    .compare-bar-inner {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .compare-bar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--color-border);
    }

    .compare-bar-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-primary);
    }

    .compare-bar-toggle {
        width: 40px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        cursor: pointer;
    }

    .compare-bar-toggle::before {
        content: '';
        width: 20px;
        height: 4px;
        background: var(--color-text-tertiary);
        border-radius: 2px;
    }

    .compare-items {
        width: 100%;
        justify-content: flex-start;
        max-height: 120px;
        overflow-y: auto;
        flex-wrap: wrap;
    }

    .compare-actions {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .compare-actions .btn {
        flex: 1;
        justify-content: center;
    }

    /* Archive Page */
    .archive-layout {
        flex-direction: column;
    }

    .archive-filters {
        width: 100%;
        order: 2;
    }

    .archive-main {
        order: 1;
    }

    .archive-toolbar {
        flex-direction: column;
        gap: var(--space-3);
    }

    .filters-card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .filter-group {
        margin-bottom: 0;
    }

    /* Single Product Page */
    .cpu-header-inner {
        flex-direction: column;
        text-align: center;
    }

    .cpu-header-image {
        max-width: 200px;
        margin: 0 auto;
    }

    .cpu-quick-specs {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cpu-header-actions {
        flex-direction: column;
        gap: var(--space-2);
    }

    .cpu-header-actions .btn {
        width: 100%;
    }

    .cpu-content-layout {
        flex-direction: column;
    }

    .specs-card,
    .chart-card {
        padding: var(--space-4);
    }

    .spec-table th,
    .spec-table td {
        padding: var(--space-2);
        font-size: 13px;
    }

    /* Compare Page */
    .compare-header {
        padding: var(--space-6) 0;
    }

    .compare-title {
        font-size: 24px;
    }

    .selected-cpus {
        flex-direction: column;
        align-items: stretch;
    }

    .selected-cpu-item,
    .add-cpu-btn {
        width: 100%;
        justify-content: center;
    }

    .compare-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compare-table {
        min-width: 600px;
    }

    .chart-wrapper {
        height: 300px;
    }

    /* Modal */
    .modal-content {
        margin: var(--space-4);
        max-height: calc(100vh - var(--space-8));
    }

    .modal-header {
        padding: var(--space-3);
    }

    .modal-header h3 {
        font-size: 16px;
    }

    .modal-body {
        padding: var(--space-3);
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-brand {
        max-width: 100%;
        text-align: center;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }
}

/* ========== Tablet Styles ========== */
@media (min-width: 640px) and (max-width: 1023px) {
    .cpu-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .archive-layout {
        flex-direction: column;
    }

    .archive-filters {
        width: 100%;
    }

    .filters-card {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .cpu-content-layout {
        flex-direction: column;
    }

    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .header-category-nav {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .header-category-nav::-webkit-scrollbar {
        display: none;
    }
}

/* ========== Desktop Styles ========== */
@media (min-width: 1024px) {
    /* Header Category Nav */
    .header-category-nav {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* Archive Layout */
    .archive-layout {
        display: flex;
        gap: var(--space-8);
    }

    .archive-filters {
        width: 260px;
        flex-shrink: 0;
    }

    .archive-main {
        flex: 1;
        min-width: 0;
    }

    /* Product Content Layout */
    .cpu-content-layout {
        display: flex;
        gap: var(--space-8);
    }

    .cpu-specs-column {
        flex: 1;
        min-width: 0;
    }

    .cpu-charts-column {
        width: 400px;
        flex-shrink: 0;
    }

    /* Footer */
    .footer-top {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--space-12);
    }

    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== Large Desktop ========== */
@media (min-width: 1280px) {
    .cpu-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .categories-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ========== Touch Device Optimizations ========== */
@media (hover: none) {
    .cpu-card:hover {
        transform: none;
    }

    .category-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }
}

/* ========== Dark Mode Support ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #111827;
        --color-bg-secondary: #1f2937;
        --color-bg-tertiary: #374151;
        --color-text-primary: #f9fafb;
        --color-text-secondary: #d1d5db;
        --color-text-tertiary: #9ca3af;
        --color-border: #374151;
        --color-border-light: #4b5563;
    }
}

/* ========== Print Styles ========== */
@media print {
    .site-header,
    .compare-bar,
    .hero-search,
    .compare-banner,
    .site-footer,
    .cpu-header-actions,
    .rankings-tabs,
    .archive-toolbar,
    .archive-filters {
        display: none !important;
    }

    .cpu-content-layout {
        flex-direction: column;
    }

    .specs-card,
    .chart-card {
        break-inside: avoid;
    }

    .compare-table {
        font-size: 12px;
    }
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== High Contrast Mode ========== */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }

    .card {
        border-width: 2px;
    }

    .form-input {
        border-width: 2px;
    }
}