/* 
 * 历史时间轴综合包 (Timeline Bundle CSS) - v1.3
 * -------------------------------------------
 * 用途：负责品牌历史、里程碑时间轴的视觉呈现，包含时间选择器（Time Island）和事件卡片。
 * 组成：由 timeline-light.css (亮色模式) 与 timeline-compact.css (响应式压缩) 合并而成。
 * 
 * 主要内容：
 * 1. 亮色模式基础样式 (body.light-mode .row-timeline, .timeline-dot, .timeline-event)
 * 2. 时间选择器 (Chronometer) 亮色适配：年/月胶囊按钮
 * 3. 时间选择器通用优化：轨道遮罩、悬停缩放及选定指示器
 * 4. 响应式布局优化 (max-width: 1200px)：竖向间距压缩、卡片高度自适应
 * 
 *
 * 注意：由于本文件包含大量亮色模式特定的 !important 覆盖，建议后续逐步向 warm-theme.css 迁移。
 */

/* ==================== SECTION 1: LIGHT MODE STYLES ==================== */
/* Source: timeline-light.css */

/* Timeline Container */
body.light-mode .row-timeline {
    background: var(--tm-bg-row) !important;
    backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate) !important;
    -webkit-backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate) !important;
    border-top: 2px solid var(--tm-border) !important;
    border-bottom: 2px solid var(--tm-border) !important;
}

/* Timeline Line */
body.light-mode .timeline-line::after {
    box-shadow: 0 0 15px var(--tm-glow) !important;
}

/* Timeline Nodes */
body.light-mode .timeline-dot {
    background: var(--tm-accent) !important;
    border-color: var(--tm-text-rich) !important;
    box-shadow: 0 0 15px var(--tm-glow),
        inset 0 2px 4px var(--tm-glare) !important;
}

body.light-mode .timeline-dot.active {
    background: linear-gradient(135deg, var(--tm-accent), var(--palette-orange-500)) !important;
    box-shadow: 0 0 25px var(--tm-glow-strong),
        inset 0 2px 6px var(--tm-glare-strong) !important;
}

/* Event Cards */
body.light-mode .timeline-event {
    background: var(--tm-card-bg) !important;
    border: 2px solid var(--tm-border) !important;
    color: var(--tm-text-rich) !important;
    box-shadow: 0 4px 12px var(--tm-shadow) !important;
}

body.light-mode .timeline-event:hover {
    background: var(--tm-hover-bg) !important;
    border-color: var(--tm-accent) !important;
    box-shadow: 0 6px 20px var(--tm-border) !important;
}

/* Event Titles */
body.light-mode .event-title {
    color: var(--tm-text-rich) !important;
    font-weight: 700 !important;
}

body.light-mode .event-location,
body.light-mode .event-date {
    color: var(--tm-text-muted) !important;
    font-weight: 600 !important;
}

/* ==================== SECTION 2: CHRONOMETER (TIME ISLAND) ==================== */

/* Year Pills */
body.light-mode .year-pill {
    background: var(--tm-accent-light) !important;
    color: var(--tm-text-rich) !important;
    border: 1px solid var(--tm-border) !important;
    font-weight: 700 !important;
}

body.light-mode .year-pill:hover {
    background: var(--tm-accent-light) !important;
    border-color: var(--tm-accent) !important;
    color: var(--tm-accent) !important;
    transform: scale(1.05) !important;
}

body.light-mode .year-pill.active {
    background: linear-gradient(135deg, var(--tm-accent), var(--palette-orange-500)) !important;
    color: var(--palette-white) !important;
    border-color: var(--tm-accent) !important;
    box-shadow: 0 4px 12px var(--tm-glow-soft),
        inset 0 1px 3px var(--tm-glare) !important;
    font-weight: 800 !important;
}

/* Month Pills */
body.light-mode .month-pill {
    background: var(--tm-accent-light) !important;
    color: var(--palette-brown-500) !important;
    border: 1px solid var(--tm-border) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

body.light-mode .month-pill:hover {
    background: var(--tm-accent-light) !important;
    border-color: var(--tm-accent) !important;
    color: var(--tm-accent) !important;
}

body.light-mode .month-pill.active {
    background: var(--tm-accent) !important;
    color: var(--palette-white) !important;
    border-color: var(--tm-accent) !important;
    box-shadow: 0 2px 8px var(--tm-border) !important;
    font-weight: 700 !important;
}

/* Months Track Border */
body.light-mode .timeline-chronometer.active-island .chrono-months-track:not(:empty) {
    border-top-color: var(--tm-border) !important;
}

/* Navigation Arrows */
body.light-mode .timeline-nav-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid var(--tm-border) !important;
    color: var(--tm-accent) !important;
}

body.light-mode .timeline-nav-btn:hover {
    background: var(--tm-accent) !important;
    border-color: var(--tm-accent) !important;
    color: var(--palette-white) !important;
    box-shadow: 0 4px 15px var(--tm-glow-soft) !important;
}

/* Chrono Year/Month Elements */
body.light-mode .chrono-year:hover {
    background: var(--tm-glow-soft) !important;
    color: var(--tm-accent) !important;
    transform: scale(1.1) !important;
}

body.light-mode .chrono-year.active {
    background: linear-gradient(135deg, var(--tm-accent), var(--palette-orange-500)) !important;
    color: var(--palette-white) !important;
    text-shadow: 0 2px 4px var(--tm-text-shadow) !important;
}

body.light-mode .chrono-month:hover,
body.light-mode .chrono-month.active {
    background: var(--tm-accent) !important;
    color: var(--palette-white) !important;
}

/* ==================== SECTION 3: CHRONOMETER OPTIMIZATION ==================== */
/* Universal (Not Light Mode Specific) */

.chrono-year,
.chrono-month {
    border: none !important;
    background: transparent !important;
}

.chrono-years-track {
    gap: 6px !important;
}

.chrono-months-track {
    gap: 1px !important;
}

.chrono-year {
    min-width: 28px !important;
    padding: 2px 5px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.chrono-year:hover,
.chrono-year.active {
    color: var(--accent-secondary) !important;
}

.chrono-month {
    min-width: 28px !important;
    padding: 3px 8px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.85rem !important;
}

.chrono-month:hover,
.chrono-month.active {
    color: var(--palette-white) !important;
}

/* Edge Visibility Mask */
.chrono-years-track,
.chrono-months-track {
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
}

/* Chrono Surface Padding */
.chrono-surface {
    padding: 4px 12px !important;
}

.timeline-chronometer.active-island .chrono-surface {
    padding: 6px 15px !important;
}

body.light-mode .chrono-surface {
    padding: 2px 12px !important;
}

body.light-mode .timeline-chronometer.active-island .chrono-surface {
    padding: 4px 15px !important;
}

/* Timeline Navigation Buttons - Light Mode */
body.light-mode .t-nav,
body.light-mode .timeline-nav-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--tm-accent) !important;
    border: 2px solid var(--tm-border) !important;
    box-shadow: 0 4px 12px var(--tm-shadow-nav) !important;
}

body.light-mode .t-nav:hover,
body.light-mode .timeline-nav-btn:hover {
    background: var(--tm-accent-light) !important;
    color: var(--tm-accent) !important;
    border-color: var(--tm-accent) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.3) !important;
}

/* Selected Month Indicator */
.chrono-month.selected {
    color: var(--tm-accent) !important;
    font-weight: 800 !important;
    transform: scale(1.15) !important;
}

body.light-mode .chrono-month.selected {
    color: var(--tm-accent) !important;
    background: var(--tm-accent-light) !important;
    border-radius: 6px !important;
}

/* ==================== SECTION 4: RESPONSIVE COMPACT MODE ==================== */
/* Source: timeline-compact.css */

@media (max-width: 1200px) {

    /* 1. Compressing Vertical Spacing (40% Reduction) */
    .row-timeline {
        min-height: auto !important;
        padding: 40px 0 !important;
        gap: 30px !important;
    }

    .timeline-item {
        margin-bottom: 30px !important;
        min-height: auto !important;
        padding-bottom: 0 !important;
    }

    .timeline-event {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 2. Auto-Adjust Height (Text Content Adaptation) */
    .timeline-event {
        height: auto !important;
        min-height: 100px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 15px !important;
    }

    .event-content-wrapper {
        height: auto !important;
        flex: 1 !important;
    }

    .event-desc {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        height: auto !important;
        max-height: none !important;
        margin-top: 8px !important;
        line-height: 1.4 !important;
    }

    .event-title {
        margin-bottom: 5px !important;
    }

    /* FIX: Force transparency for 1200px breakpoint */
    .static-poster,
    #global-player-stage,
    .row-atlas,
    .atlas-sidebar,
    .atlas-list {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* 3. Event Gap Compression */
    .timeline-event-wrapper,
    .timeline-node {
        margin-bottom: 25px !important;
    }

    .timeline-grid {
        grid-row-gap: 20px !important;
    }
}

/* ==================== END OF TIMELINE BUNDLE ==================== */