/* 响应式设计 - 移动端适配 */

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) {
    .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .charts-row { 
        grid-template-columns: 1fr; 
    }
    
    .family-grid { 
        grid-template-columns: 1fr; 
    }
    
    .header h1 {
        font-size: 2.5rem;
    }
    
    .container {
        padding: 1.5rem;
    }
    
    /* 行迹图面板调整 */
    .life-trace-events-panel {
        width: 280px;
        left: 10px;
        top: 100px;
    }
    
    .life-trace-timeline-panel {
        width: 300px;
        right: 20px;
        bottom: 20px;
    }
    
    .life-trace-legend {
        width: 180px;
        padding: 15px;
    }
}

/* 手机设备 (480px - 767px) */
@media (max-width: 768px) {
    .header {
        padding: 3rem 1rem 2rem;
    }
    
    .header h1 { 
        font-size: 1.8rem; 
        letter-spacing: 0.15em;
    }
    
    .header .subtitle {
        font-size: 0.9rem;
    }
    
    .stats-grid { 
        grid-template-columns: 1fr; 
        gap: 1rem;
    }
    
    .container { 
        padding: 1rem; 
    }
    
    .chart-card, .table-card, .map-wrapper {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .chart-container {
        height: 250px;
    }
    
    /* 年谱卡片 */
    .chronicle-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .chronicle-card {
        padding: 1rem;
    }
    
    /* 筛选按钮 */
    .chronicle-filter {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    /* 行迹图移动端适配 */
    .life-trace-wrapper {
        height: 600px;
    }
    
    .life-trace-events-panel {
        width: 200px;
        left: 5px;
        top: 80px;
        bottom: 10px;
    }
    
    .life-trace-events-header {
        padding: 10px 12px;
    }
    
    .life-trace-events-header h4 {
        font-size: 14px;
    }
    
    .life-trace-event-item {
        padding: 8px 10px;
    }
    
    .life-trace-timeline-panel {
        width: calc(100% - 20px);
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 15px;
    }
    
    .life-trace-timeline-btns {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .life-trace-timeline-btns button {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .life-trace-legend {
        display: none; /* 移动端隐藏图例，节省空间 */
    }
    
    .life-trace-title-box {
        padding: 12px 20px;
        width: 90%;
    }
    
    .life-trace-title-box h2 {
        font-size: 18px;
        letter-spacing: 3px;
    }
    
    /* 网络图 */
    .network-wrapper {
        height: 400px;
    }
    
    .network-controls {
        top: 5px;
        right: 5px;
    }
    
    .network-controls button {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    /* 地图控制 */
    .map-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .map-selector select,
    .era-btn {
        width: 100%;
    }
    
    .map-container {
        height: 400px;
    }
    
    /* 参考文献 */
    .reference-item {
        padding: 1rem;
    }
    
    .reference-item p {
        font-size: 0.9rem;
    }
    
    /* 章节标题 */
    .section-title {
        font-size: 1.3rem;
    }
    
    /* 统计卡片 */
    .stat-card .number {
        font-size: 2.5rem;
    }
    
    .stat-card .label {
        font-size: 0.9rem;
    }
}

/* 小屏手机 (小于 480px) */
@media (max-width: 480px) {
    .header h1 {
        font-size: 1.5rem;
        padding: 0 1rem;
    }
    
    .header-decoration {
        font-size: 1rem;
    }
    
    .container {
        padding: 0.75rem;
    }
    
    .life-trace-wrapper {
        height: 500px;
    }
    
    .life-trace-events-panel {
        width: 160px;
        font-size: 11px;
    }
    
    .life-trace-event-year {
        font-size: 11px;
    }
    
    .life-trace-event-loc {
        font-size: 11px;
    }
    
    .life-trace-event-desc {
        font-size: 10px;
    }
    
    .chart-container {
        height: 200px;
    }
    
    .map-container {
        height: 300px;
    }
    
    .network-wrapper {
        height: 350px;
    }
    
    /* 底部 */
    .footer {
        padding: 2rem 1rem;
        font-size: 0.8rem;
    }
}

/* 横屏模式 */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: 2rem 1rem 1.5rem;
    }
    
    .header h1 {
        font-size: 1.8rem;
    }
    
    .life-trace-wrapper {
        height: 400px;
    }
    
    .life-trace-events-panel {
        top: 60px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .stat-card:hover {
        transform: none;
    }
    
    .chronicle-card:hover {
        transform: none;
    }
    
    .filter-btn:hover {
        background: linear-gradient(145deg, #faf8f3 0%, #f0ebe0 100%);
    }
    
    .filter-btn.active:hover {
        background: var(--accent-teal);
    }
    
    /* 增大触摸目标 */
    .filter-btn,
    .era-btn,
    .map-controls button,
    .network-controls button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .life-trace-event-item {
        padding: 14px 16px;
    }
    
    .life-trace-timeline-btns button {
        min-height: 40px;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .header-bg-calligraphy {
        background-size: contain;
    }
}

/* 暗色模式支持（可选） */
@media (prefers-color-scheme: dark) {
    /* 如果需要暗色模式，可以在这里添加 */
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-in {
        animation: none;
        opacity: 1;
    }
}

/* 打印样式 */
@media print {
    .header {
        background: none;
        border-bottom: 2px solid #000;
        padding: 2rem 1rem;
    }
    
    .header-bg-calligraphy {
        display: none;
    }
    
    .map-controls,
    .network-controls,
    .chronicle-filter,
    .life-trace-timeline-panel,
    .life-trace-legend {
        display: none;
    }
    
    .chart-card,
    .table-card,
    .map-wrapper {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    body {
        background: white;
        color: black;
    }
}