/* ============================================================
   F1 2026 响应式适配 CSS
   支持：手机（<480px）、大手机（<768px）、iPad（<1024px）、桌面
   ============================================================ */

/* ============================================================
   1. iPad 横屏 & 竖屏（<= 1024px）—— 侧边栏完全隐藏
   ============================================================ */
@media (max-width: 1024px) {
    /* 侧边栏隐藏 */
    .sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    .sidebar.open {
        transform: translateX(0) !important;
    }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .menu-toggle {
        display: block !important;
        top: 16px !important;
        left: 16px !important;
    }

    /* 顶部控制按钮位置 */
    .lang-toggle {
        top: 16px !important;
        right: 16px !important;
    }
    .zoom-controls {
        top: 16px !important;
        right: 120px !important;
    }

    /* 容器间距 */
    .container {
        padding: 40px 16px !important;
    }

    /* Header 调整 */
    header {
        padding: 50px 16px !important;
    }
    header h1 {
        font-size: 2.4em !important;
    }
    header::before {
        font-size: 12em !important;
    }
    header p {
        font-size: 1.1em !important;
    }

    /* 卡片网格 2 列 */
    .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .standings-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .info-cards-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .change-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .compare {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .detail-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 表格横向滚动 */
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table {
        min-width: 600px !important;
    }

    /* 车手卡片 3 列 */
    .driver-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 详情 section */
    .detail-section {
        padding: 20px !important;
    }
    .detail-hero {
        padding: 30px 16px !important;
    }
    .detail-hero h3 {
        font-size: 1.6em !important;
    }

    /* Stats 行 */
    .stats-row {
        gap: 10px !important;
    }
    .stat {
        min-width: 100px !important;
        padding: 12px 16px !important;
    }
    .stat .num {
        font-size: 1.5em !important;
    }

    /* 动画区域 */
    .anim-race-wrap, .anim-wind-wrap, .anim-lights-wrap {
        height: 120px !important;
    }

    /* 特征卡片 */
    .feature-card {
        padding: 24px !important;
    }

    /* race-result.html 专用 */
    .podium-highlight {
        gap: 12px !important;
    }
    .podium-card {
        padding: 16px !important;
        min-width: 100px !important;
    }
    .podium-pos {
        font-size: 1.6em !important;
    }
    .podium-driver {
        font-size: 1em !important;
    }

    /* 赛事选择器 */
    .race-selector {
        gap: 6px !important;
    }
    .race-btn {
        padding: 8px 12px !important;
        font-size: 0.85em !important;
    }
}

/* ============================================================
   2. iPad 竖屏 / 大手机（<= 768px）—— 所有内容紧凑
   ============================================================ */
@media (max-width: 768px) {
    /* Header */
    header {
        padding: 40px 12px !important;
    }
    header h1 {
        font-size: 1.8em !important;
    }
    header p {
        font-size: 1em !important;
    }
    header::before {
        font-size: 8em !important;
    }

    /* 容器 */
    .container {
        padding: 30px 12px !important;
    }

    /* 所有卡片网格 → 单列 */
    .card-grid,
    .standings-cards,
    .results-grid,
    .news-grid,
    .team-grid,
    .info-cards-3,
    .change-grid,
    .compare,
    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    /* 车手卡片 2 列 */
    .driver-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 标题 */
    h2 {
        font-size: 1.5em !important;
        padding-left: 12px !important;
        margin-bottom: 16px !important;
    }
    h3 {
        font-size: 1.2em !important;
    }
    .lead {
        font-size: 1em !important;
        margin-bottom: 20px !important;
    }

    /* 表格 */
    th, td {
        padding: 10px 12px !important;
        font-size: 0.9em !important;
    }
    .table-wrap {
        margin: 20px -12px !important;
        padding: 0 12px !important;
        border-radius: 0 !important;
    }
    .result-table th,
    .result-table td {
        padding: 10px 8px !important;
    }

    /* Stats 统计 */
    .stats {
        gap: 24px !important;
    }
    .stat-box .number {
        font-size: 2.2em !important;
    }
    .stat-box .label {
        font-size: 0.85em !important;
    }

    /* 步骤指南 */
    .guide-steps {
        flex-direction: column !important;
    }
    .guide-step {
        padding: 16px !important;
    }

    /* 车手卡片 */
    .driver-card {
        padding: 12px !important;
    }
    .driver-num {
        font-size: 1.5em !important;
        min-width: 40px !important;
    }
    .driver-name {
        font-size: 1em !important;
    }

    /* 触摸目标 */
    .lang-btn, .zoom-btn, .menu-toggle, .race-btn, .back-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* 结果卡片 */
    .result-card {
        padding: 16px !important;
    }
    .result-header {
        font-size: 0.75em !important;
    }
    .result-race {
        font-size: 1.1em !important;
    }
    .result-podium {
        gap: 6px !important;
    }
    .podium-item {
        padding: 8px 4px !important;
        font-size: 0.85em !important;
    }
    .podium-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    .result-link {
        font-size: 0.8em !important;
    }

    /* 车队卡片 */
    .team-card {
        padding: 18px !important;
    }
    .tc-drivers {
        flex-direction: column !important;
        gap: 4px !important;
        font-size: 0.85em !important;
    }
    .tc-logo {
        width: 36px !important;
        height: 36px !important;
    }
    .tc-name {
        font-size: 1.1em !important;
    }

    /* 积分榜卡片 */
    .standings-card {
        padding: 12px 14px !important;
    }
    .sc-logo {
        width: 44px !important;
        height: 44px !important;
    }
    .sc-name {
        font-size: 0.95em !important;
    }
    .sc-points {
        font-size: 0.85em !important;
    }

    /* 新闻卡片 */
    .news-card {
        padding: 20px !important;
    }
    .news-card h4 {
        font-size: 1em !important;
    }
    .news-card p {
        font-size: 0.85em !important;
    }

    /* 动画区域 */
    .anim-race-wrap, .anim-wind-wrap, .anim-lights-wrap {
        height: 100px !important;
    }
    .anim-car {
        font-size: 3em !important;
    }
    .anim-wing {
        font-size: 2.5em !important;
    }

    /* 信息卡片 */
    .info-card {
        padding: 20px 16px !important;
    }
    .info-card .ic-icon {
        font-size: 2.2em !important;
    }
    .info-card h4 {
        font-size: 1em !important;
    }
    .info-card p {
        font-size: 0.85em !important;
    }

    /* 改变卡片 */
    .change-card {
        padding: 20px !important;
    }
    .change-card h4 {
        font-size: 1em !important;
    }
    .change-card li {
        font-size: 0.9em !important;
    }

    /* 特征卡片 */
    .feature-card {
        padding: 20px !important;
    }
    .feature-card h4 {
        font-size: 1.1em !important;
    }
    .feature-card p {
        font-size: 0.9em !important;
    }
    .highlight-tag {
        font-size: 0.75em !important;
        padding: 4px 10px !important;
    }

    /* race-result.html 专用 */
    .podium-highlight {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .podium-card {
        width: 100% !important;
        max-width: 240px !important;
    }
    .header {
        padding: 30px 16px !important;
    }
    .header h1 {
        font-size: 1.6em !important;
    }
    .back-btn {
        padding: 10px 16px !important;
        font-size: 0.9em !important;
    }
    .race-selector {
        gap: 6px !important;
    }
    .race-btn {
        padding: 8px 10px !important;
        font-size: 0.8em !important;
    }
    .result-table {
        font-size: 0.85em !important;
    }

    /* 标签 */
    .tag {
        font-size: 0.75em !important;
        padding: 4px 12px !important;
    }
    .new-badge {
        font-size: 0.6em !important;
    }
    .next-badge {
        font-size: 0.6em !important;
    }

    /* footer */
    footer {
        padding: 30px 12px !important;
    }
    footer p {
        font-size: 0.85em !important;
    }

    /* 安全区域 */
    .sidebar {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ============================================================
   3. 小手机（<= 480px）—— 最紧凑布局
   ============================================================ */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.4em !important;
    }
    header p {
        font-size: 0.9em !important;
    }
    header::before {
        font-size: 6em !important;
    }

    /* 所有网格单列 */
    .driver-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .podium-item {
        padding: 6px 2px !important;
        font-size: 0.75em !important;
    }
    .podium-avatar {
        width: 24px !important;
        height: 24px !important;
    }

    .driver-avatar-sm {
        width: 24px !important;
        height: 24px !important;
    }
    .team-badge {
        width: 28px !important;
        height: 28px !important;
    }

    .result-card {
        padding: 12px !important;
    }
    .result-podium {
        gap: 4px !important;
    }

    .team-card {
        padding: 14px !important;
    }
    .tc-name {
        font-size: 1em !important;
    }
    .tc-logo {
        width: 32px !important;
        height: 32px !important;
    }

    .standings-card {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .sc-logo {
        width: 36px !important;
        height: 36px !important;
    }
    .sc-rank {
        font-size: 1em !important;
    }
    .sc-name {
        font-size: 0.9em !important;
    }
    .sc-points {
        font-size: 0.8em !important;
    }

    /* 表格 */
    .result-table th,
    .result-table td,
    th, td {
        padding: 6px 4px !important;
        font-size: 0.8em !important;
    }
    table {
        min-width: 480px !important;
    }

    /* podium 卡片 */
    .podium-card {
        padding: 12px !important;
        min-width: 80px !important;
    }
    .podium-pos {
        font-size: 1.5em !important;
    }
    .podium-driver {
        font-size: 1em !important;
    }
    .podium-team {
        font-size: 0.8em !important;
    }

    /* 按钮堆叠 */
    .lang-toggle {
        flex-direction: column !important;
        gap: 2px !important;
        padding: 4px !important;
    }
    .lang-btn {
        padding: 4px 8px !important;
        font-size: 0.75em !important;
    }

    .zoom-controls {
        right: 100px !important;
    }
    .zoom-btn {
        padding: 6px 8px !important;
        font-size: 0.8em !important;
    }

    /* 菜单按钮 */
    .menu-toggle {
        padding: 8px 10px !important;
        font-size: 1em !important;
    }

    /* 赛事选择器 */
    .race-btn {
        padding: 6px 8px !important;
        font-size: 0.75em !important;
    }
    .race-selector {
        gap: 4px !important;
    }

    /* 详情卡片 */
    .detail-card {
        padding: 12px !important;
    }
    .detail-card .label {
        font-size: 0.7em !important;
    }
    .detail-card .value {
        font-size: 1em !important;
    }

    /* 特征卡片 */
    .feature-card {
        padding: 16px !important;
    }

    /* 改变卡片 */
    .change-card {
        padding: 16px !important;
    }
    .change-card h4 {
        font-size: 0.95em !important;
    }
    .change-card li {
        font-size: 0.85em !important;
    }

    /* 信息卡片 */
    .info-card {
        padding: 16px 12px !important;
    }
    .info-card .ic-icon {
        font-size: 2em !important;
    }
    .info-card h4 {
        font-size: 0.95em !important;
    }
    .info-card p {
        font-size: 0.8em !important;
    }

    /* 统计行 */
    .stats-row {
        gap: 6px !important;
    }
    .stat {
        padding: 8px 10px !important;
        min-width: 70px !important;
    }
    .stat .num {
        font-size: 1.2em !important;
    }
    .stat .label {
        font-size: 0.65em !important;
    }

    /* 容器 */
    .container {
        padding: 20px 10px !important;
    }

    /* Card 内部 */
    .card {
        padding: 16px !important;
    }
    .card h4 {
        font-size: 1em !important;
    }
    .card p, .card li {
        font-size: 0.9em !important;
    }

    /* 步骤 */
    .guide-step .num {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9em !important;
    }
    .guide-step h5 {
        font-size: 0.95em !important;
    }
    .guide-step p {
        font-size: 0.8em !important;
    }

    /* footer */
    footer {
        padding: 24px 10px !important;
    }

    /* race-result.html */
    .header h1 {
        font-size: 1.3em !important;
    }
    .header .race-info {
        font-size: 0.9em !important;
    }
    .back-btn {
        padding: 8px 12px !important;
        font-size: 0.85em !important;
    }

    /* 统计框 */
    .stats {
        gap: 16px !important;
    }
    .stat-box .number {
        font-size: 1.8em !important;
    }
    .stat-box .label {
        font-size: 0.8em !important;
    }
}

/* ============================================================
   4. 横屏手机（矮屏 + 横屏）
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    header {
        padding: 30px 12px !important;
    }
    header h1 {
        font-size: 1.5em !important;
    }
    .container {
        padding: 20px 12px !important;
    }
    .sidebar.open {
        overflow-y: auto !important;
    }
}

/* ============================================================
   5. 安全区域 & 触摸优化（刘海屏等）
   ============================================================ */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* 全局触摸优化 */
button, a, .race-btn, .lang-btn, .zoom-btn, .menu-toggle, .back-btn, .standings-card, .result-card, .team-card, .driver-profile-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 表格横向滚动条美化 */
.table-wrap::-webkit-scrollbar {
    height: 6px;
}
.table-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}
.table-wrap::-webkit-scrollbar-thumb {
    background: rgba(225, 6, 0, 0.3);
    border-radius: 3px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(225, 6, 0, 0.5);
}