/* 时间线组件样式 */
.timeline-section {
    padding-bottom: 60px;
}

.timeline {
    position: relative;
    padding: 40px 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1140px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 时间线中轴线 */
.timeline::before {
    content: '';
    position: absolute;
    top: 20px; /* 调整中轴线起始位置，与起始圆点对齐 */
    bottom: 0;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    background-color: #e0e0e0;
    z-index: 1;
}

/* 时间线起始圆点 */
.timeline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    background-color: #4a90e2;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e0e0e0;
}

/* 时间线起始圆点内部白点 */
.timeline::after {
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline::after {
    background-image: radial-gradient(circle, #fff 4px, #60abd1 4px);
}

/* 时间线项目容器 */
.timeline-item {
    position: relative;
    margin-bottom: 50px; /* 增加项目之间的间距 */
    width: 100%;
    z-index: 2;
}

.timeline-item::after {
    content: '';
    display: table;
    clear: both;
}

/* 时间线内容 */
.timeline-content {
    position: relative;
	z-index: 9;
    width: 45%;
    padding: 20px 25px; /* 增加内边距 */
    background-color: #eff4f6;
    border-radius: 8px; /* 增加圆角 */
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); /* 调整阴影 */
    transition: all 0.3s ease;
}

.timeline-content:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 重要工作的内容样式 */
.timeline-content.important-job {
    border-left: 4px solid #ffa200;
    background-color: #fffaf0;
}

.timeline-content.important-job .timeline-title {
    color: #ffa200;
}

/* 左侧内容 */
.timeline-item:nth-child(odd) .timeline-content {
    float: left;
}

/* 右侧内容 */
.timeline-item:nth-child(even) .timeline-content {
    float: right;
}

/* 内容箭头 */
.timeline-content::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 0;
    height: 0;
    border-style: solid;
}

/* 左侧内容箭头 */
.timeline-item:nth-child(odd) .timeline-content::before {
    right: -10px;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #eff4f6;
}

/* 右侧内容箭头 */
.timeline-item:nth-child(even) .timeline-content::before {
    left: -10px;
    border-width: 10px 10px 10px 0;
    border-color: transparent #eff4f6 transparent transparent;
}

/* 重要工作的内容箭头 */
.timeline-item:nth-child(odd) .timeline-content.important-job::before {
    border-color: transparent transparent transparent #fffaf0;
}

.timeline-item:nth-child(even) .timeline-content.important-job::before {
    border-color: transparent #fffaf0 transparent transparent;
}

/* 时间点 */
.timeline-dot {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background-color: #4a90e2;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e0e0e0;
    transition: all 0.3s ease;
    /* 使用径向渐变替代内部圆点 */
    background: radial-gradient(circle, white 5px, #60abd1 5px);
}

/* 当前工作的时间点样式 */
.timeline-dot.current-job {
    background: radial-gradient(circle, white 5px, #ffa200 5px);
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #ffa200;
    transform: scale(1.2);
}

/* 不再需要内部圆点，使用径向渐变代替 */
/* .timeline-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 50%;
} */

/* 时间标签 */
.timeline-date {
    display: block;
    font-weight: 500;
    margin-bottom: 12px;
    color: #888;
    font-size: 14px;
}

/* 时间线标题 */
.timeline-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* 时间线描述 */
.timeline-description {
    margin: 0;
    color: #666;
    line-height: 1.6;
    font-size: 14px;
}

/* 水平连接线样式 - 连接时间点和内容 */
.timeline-line {
    position: absolute;
    top: 28px; /* 调整位置与时间点中心对齐 */
    width: calc(10% - 5px);
    height: 2px;
    background-color: #e0e0e0;
    z-index: 2;
}

/* 左侧水平连接线 */
.timeline-item:nth-child(odd) .timeline-line {
    right: 50%;
    margin-right: 10px;
}

/* 右侧水平连接线 */
.timeline-item:nth-child(even) .timeline-line {
    left: 50%;
    margin-left: 10px;
}

/* 垂直连接线样式 - 从时间点向下延伸 */
.timeline-vline {
    position: absolute;
    top: 35px; /* 调整起始位置，与水平线连接 */
    left: 50%;
    width: 2px;
    height: 60px; /* 根据需要调整高度 */
    margin-left: -1px;
    background-color: #e0e0e0;
    z-index: 2;
}

/* 最后一个项目不显示垂直连接线 */
.timeline-item:last-child .timeline-vline {
    display: none;
}

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) and (min-width: 481px) {
    .timeline-section {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .timeline {
        align-items: flex-start;
        padding-left: 20px;
        padding-right: 10px;
        width: 100%;
		padding-bottom: 0;
    }
    
    .timeline::before {
        left: 20px;
        width: 2px; /* 增加中轴线宽度，使其更明显 */
    }
    
    .timeline::after {
        left: 10px;
        margin-left: 0;
        width: 16px;
        height: 16px;
    }
    
    .timeline-item {
        margin-bottom: 40px;
        width: 100%;
    }
    
    .timeline-content {
        width: calc(100% - 30px);
        float: right;
        margin-left: 30px;
        padding: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    
    .timeline-item:nth-child(odd) .timeline-content::before,
    .timeline-item:nth-child(even) .timeline-content::before {
        left: -10px;
        border-width: 10px 10px 10px 0;
        border-color: transparent #fff transparent transparent;
        top: 15px;
        position: absolute;
    }
    
    .timeline-dot {
        left: -9px;
        margin-left: 0;
        width: 14px;
        height: 14px;
        top: 15px;
        /* 添加内部白色圆点 */
        background: radial-gradient(circle, white 4px, #4a89dc 4px);
    }
    
    .timeline-line {
        width: 30px;
        top: 24px; /* 调整水平线的位置，与点的中心对齐 */
        height: 2px; /* 增加线的高度，使其更明显 */
    }
    
    .timeline-item:nth-child(odd) .timeline-line,
    .timeline-item:nth-child(even) .timeline-line {
        left: 10px;
        margin-left: 0;
    }
    
    .timeline-vline {
        left: -2px; /* 调整垂直线的位置，与中轴线对齐 */
        margin-left: 0;
        height: 40px;
        top: 28px; /* 调整垂直线的起始位置，与水平线连接 */
        width: 2px; /* 增加线的宽度，使其更明显 */
    }
    
    /* 修复重要工作的内容箭头在移动端的样式 */
    .timeline-item:nth-child(odd) .timeline-content.important-job::before,
    .timeline-item:nth-child(even) .timeline-content.important-job::before {
        border-color: transparent #fffaf0 transparent transparent;
    }
    
    /* 调整平板端文字大小和样式 */
    .timeline-date {
        font-size: 13px;
        margin-bottom: 8px;
        color: #666;
    }
    
    .timeline-title {
        font-size: 16px;
        margin-bottom: 8px;
        font-weight: 600;
    }
    
    .timeline-description {
        font-size: 13px;
        line-height: 1.4;
        color: #444;
    }
    
    /* 优化当前工作的样式 */
    .timeline-content.current-job {
        border-left: 3px solid #4a89dc;
    }
    
    /* 优化重要工作的样式 */
    .timeline-content.important-job {
        background-color: #fffaf0;
        border-left: 3px solid #f39c12;
    }
    
    /* 修复最后一项的位置问题 */
    .timeline-item:last-child .timeline-dot,
    .timeline-item:last-child .timeline-line,
    .timeline-item:last-child .timeline-vline {
        position: relative;
        left: -8px;
        margin-left: 0;
    }
    
    .timeline-item:last-child .timeline-line {
        left: 10px;
        top: 19px;
    }
    
    .timeline-item:last-child .timeline-vline {
        left: -2px;
        top: 23px;
    }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 480px) {
    .timeline-section {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .timeline {
        align-items: flex-start;
        padding-left: 15px;
        padding-right: 5px;
		padding-bottom: 0;
        width: 100%;
    }
    
    .timeline::before {
        left: 15px;
    }
    
    .timeline::after {
        left: 8px;
        margin-left: 0;
        width: 14px;
        height: 14px;
    }
    
    .timeline-item {
        margin-bottom: 0;
        width: 100%;
    }
    
    .timeline-content {
        width: calc(100% - 30px);
        float: right;
        margin-left: 30px;
		top: -50px;
        padding: 12px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
    }
    
    .timeline-item:nth-child(odd) .timeline-content::before,
    .timeline-item:nth-child(even) .timeline-content::before {
        left: -8px;
        border-width: 8px 8px 8px 0;
        border-color: transparent #fff transparent transparent;
        top: 20px; /* 调整箭头位置与线条对齐 */
        position: absolute;
    }
    
    .timeline::before {
        width: 2px; /* 增加中轴线宽度，使其更明显 */
    }
    
    .timeline-dot {
        left: -8px; /* 根据用户建议调整位置 */
        margin-left: 0;
        width: 12px;
        height: 12px;
        top: 14px;
        /* 添加内部白色圆点 */
        background: radial-gradient(circle, white 3px, #4a89dc 3px);
        position: relative; /* 确保相对定位正常工作 */
        z-index: 4; /* 确保点在最上层 */
    }
    
    .timeline-line {
        width: 25px;
        top: 19px; /* 根据用户建议调整位置 */
        height: 2px; /* 增加线的高度，使其更明显 */
    }
    
    .timeline-item:nth-child(odd) .timeline-line,
    .timeline-item:nth-child(even) .timeline-line {
        left: 10px; /* 根据用户建议调整位置 */
        margin-left: 0;
    }
    
    .timeline-vline {
        left: -2px; /* 根据用户建议调整位置 */
        margin-left: 0;
        height: 30px;
        top: 23px; /* 调整垂直线的起始位置，与水平线连接 */
        width: 2px; /* 增加线的宽度，使其更明显 */
        position: relative; /* 确保相对定位正常工作 */
    }
    
    /* 修复重要工作的内容箭头在移动端的样式 */
    .timeline-item:nth-child(odd) .timeline-content.important-job::before,
    .timeline-item:nth-child(even) .timeline-content.important-job::before {
        border-color: transparent #fffaf0 transparent transparent;
    }
    
    /* 调整手机端文字大小和样式 */
    .timeline-date {
        font-size: 11px;
        margin-bottom: 6px;
        color: #666;
    }
    
    .timeline-title {
        font-size: 14px;
        margin-bottom: 6px;
        font-weight: 600;
    }
    
    .timeline-description {
        font-size: 12px;
        line-height: 1.3;
        color: #444;
    }
    
    /* 优化当前工作的样式 */
    .timeline-content.current-job {
        border-left: 3px solid #4a89dc;
    }
    
    /* 优化重要工作的样式 */
    .timeline-content.important-job {
        background-color: #fffaf0;
        border-left: 3px solid #f39c12;
    }
}