/* 
 * 时间轴滑动器自定义样式
 * 用于优化Our History部分的时间节点显示宽度和滑动体验
 * 作者：AI助手
 * 创建时间：2024年
 */

/* 时间轴父级容器优化 - 确保不限制子元素宽度 */
.timeline-swiper,
.timeline-swiper .swiper,
.timeline-swiper .swiper-container,
section:has(.timeline-swiper),
.container:has(.timeline-swiper),
.row:has(.timeline-swiper),
.col:has(.timeline-swiper) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 时间轴滑动容器样式覆盖 - 全屏自适应显示5个完整节点 */
.timeline-swiper {
    width: 100vw !important; /* 使用视窗宽度确保真正全屏 */
    max-width: none !important; /* 移除最大宽度限制，实现全屏显示 */
    margin: 0 !important; /* 移除外边距 */
    padding: 0 !important; /* 完全移除边距，让节点占满全屏 */
    box-sizing: border-box !important;
    left: 50% !important; /* 居中定位 */
    transform: translateX(-50%) !important; /* 居中偏移 */
    position: relative !important;
}

/* 针对不同屏幕尺寸优化时间轴容器宽度 */
@media (min-width: 576px) {
    .timeline-swiper {
        width: 100% !important; /* 小屏幕使用全宽 */
    }
}

@media (min-width: 768px) {
    .timeline-swiper {
        width: 100% !important; /* 中等屏幕使用全宽 */
    }
}

@media (min-width: 992px) {
    .timeline-swiper {
        width: 100% !important; /* 大屏幕使用全宽 */
        max-width: 1200px; /* 在大屏幕上设置合理的最大宽度 */
    }
}

@media (min-width: 1200px) {
    .timeline-swiper {
        width: 100% !important;
        max-width: 1400px; /* 超大屏幕上的最大宽度 */
    }
}

/* 优化时间节点的最小宽度，确保内容不会过于拥挤 */
.timeline-swiper .swiper-slide {
    min-width: 364px !important; /* 原280px增加30%：280 * 1.3 = 364px */
    flex-shrink: 0 !important; /* 防止节点被压缩 */
}

/* 优化时间节点内容的布局 */
.timeline-content {
    min-width: 325px; /* 原250px增加30%：250 * 1.3 = 325px */
    padding: 1.3rem; /* 增加内边距提升可读性，同时增加30% */
}

/* 优化时间节点图片容器 */
.timeline-content .ratio {
    margin-bottom: 1rem; /* 增加图片下方间距 */
}

/* 优化时间节点文本显示 - 修复文字行数不一致导致图片位置不对齐问题 */
.timeline-content p {
    font-size: 1.4rem; /* 适当调整字体大小 */
    line-height: 1.5; /* 优化行高提升可读性 */
    margin-bottom: 0.5rem; /* 调整段落间距 */
}

/* 重新设计时间节点布局，适配350×246大图片 */
.timeline-swiper .swiper-slide {
    height: 520px !important; /* 增加高度适配大图片 */
}

/* 设置时间节点整体容器 */
.timeline-swiper .swiper-slide > div {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 设置时间节点文字容器固定高度和位置 */
.timeline-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 330px !important; /* 增加内容区域高度适配大图片 */
    padding-top: 1rem !important;
}

/* 文字区域固定高度 - 确保所有节点文字区域一致 */
.timeline-content span {
    height: 12rem !important; /* 增加固定文字区域高度，容纳2行文字 */
    min-height: 12rem !important; /* 设置最小高度 */
    max-height: 12rem !important; /* 设置最大高度，防止超出 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.3 !important; /* 稍微调整行高 */
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 1rem !important; /* 增加上下内边距 */
    overflow: hidden !important; /* 隐藏超出内容 */
    word-wrap: break-word !important; /* 单词换行 */
    hyphens: auto !important; /* 自动连字符 */
}

/* 图片容器固定位置 - 设置为原本尺寸350×246 */
.timeline-content picture {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    height: 260px !important; /* 容器高度适配246px图片 */
    width: 100% !important;
    max-width: 370px !important; /* 容器宽度适配350px图片 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 图片尺寸 - 恢复原本的350×246像素 */
.timeline-content picture img {
    width: 350px !important; /* 原本宽度350px */
    height: 246px !important; /* 原本高度246px */
    max-width: 350px !important;
    object-fit: cover !important;
    border-radius: 5rem !important; /* 保持圆角美化 */
}

/* 优化年份显示 */
.timeline-year {
    font-size: 4.2rem !important; /* 稍微调整年份字体大小 */
    margin-bottom: 1rem !important; /* 增加年份下方间距 */
}

/* 优化时间轴线条显示 */
.timeline-line {
    z-index: 1; /* 确保线条在正确的层级 */
}

/* 优化滑动容器的整体布局 */
.timeline-swiper .swiper-wrapper {
    align-items: flex-start; /* 顶部对齐 */
}

/* 时间节点基本样式 - 全屏自适应5个完整节点，百分百利用宽度 */
.timeline-swiper .swiper-slide {
    cursor: pointer !important; /* 保留鼠标指针样式 */
    width: 20% !important; /* 每个节点严格占20%宽度 */
    flex: 0 0 20% !important; /* 固定flex基础为20%，确保5个节点完全平均分配 */
    /*min-width: 20% !important;*/
    /*max-width: 20% !important; */
    box-sizing: border-box !important;
    padding: 0 8px !important; /* 增加节点间距，让节点之间有更好的视觉分离效果 */
    margin: 0 !important; /* 移除外边距 */
}

/* 强制居中显示配置 */
.timeline-swiper {
    overflow: hidden !important; /* 隐藏溢出，确保只显示5个节点 */
    width: 100% !important;
}

.timeline-swiper .swiper-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* 确保活动slide始终居中 */
.timeline-swiper .swiper-slide-active {
    position: relative !important;
    z-index: 1 !important;
}

/* 优化Swiper容器宽度 */
.timeline-swiper .swiper-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 优化Swiper wrapper宽度 */
.timeline-swiper .swiper-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 优化节点内容区域宽度 */
.timeline-swiper .swiper-slide .timeline-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 优化节点内部元素宽度 */
.timeline-swiper .swiper-slide .d-flex.flex-column {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 优化图片容器宽度 */
.timeline-swiper .swiper-slide picture {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* 优化图片宽度 */
.timeline-swiper .swiper-slide img {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 响应式优化：确保在移动设备上也有良好的显示效果 */
@media (max-width: 575px) {
    .timeline-swiper .swiper-slide {
        min-width: 338px !important; /* 移动设备上的最小宽度，原260px增加30%：260 * 1.3 = 338px */
    }
    
    .timeline-year {
        font-size: 4.2rem !important; /* 移动设备上的年份字体大小 - 增大 */
    }
    
    .timeline-content p {
        font-size: 1.3rem; /* 移动设备上的文本字体大小 */
    }
    
    .timeline-content {
        min-width: 300px; /* 移动设备上内容区域宽度，适配更宽的节点 */
        padding: 1.2rem; /* 移动设备上的内边距 */
    }
    
    /* 移动设备上也使用固定高度布局 */
    .timeline-swiper .swiper-slide {
        height: 400px !important; /* 移动设备上增加高度适配大图片 */
    }
    
    .timeline-content {
        height: 300px !important; /* 移动设备上增加内容区域高度 */
    }
    
    .timeline-content span {
        height: 12rem !important; /* 移动设备上文字区域固定高度 - 增加 */
        min-height: 12rem !important; /* 设置最小高度 */
        max-height: 12rem !important; /* 设置最大高度，防止超出 */
        font-size: 1.5rem !important; /* 移动设备上的文字大小 - 稍微调整 */
        line-height: 1.2 !important; /* 移动设备上的行高 */
        margin-bottom: 1rem !important;
        padding: 0.3rem 0.8rem !important; /* 移动设备上的内边距 */
        overflow: hidden !important; /* 隐藏超出内容 */
        word-wrap: break-word !important; /* 单词换行 */
        hyphens: auto !important; /* 自动连字符 */
    }
    
    .timeline-content picture {
        height: 200px !important; /* 移动设备上图片容器高度 - 适配大图片 */
        width: 100% !important;
        max-width: 280px !important; /* 移动设备上最大宽度 */
    }
    
    .timeline-content picture img {
        width: 280px !important; /* 移动设备上图片宽度 - 按比例缩小 */
        height: 197px !important; /* 移动设备上图片高度 - 按比例缩小 */
        max-width: 280px !important;
        border-radius: 10px !important; /* 移动设备上的圆角 */
    }
}

/* ========================================= */
/* 4K显示屏专门适配 - 解决Our history时间轴文字重叠问题 */
/* 仅针对≥2560px分辨率，确保不影响任何原有分辨率的正常显示 */
/* ========================================= */

/* 4K显示屏适配：2560px及以上 - 仅针对真正的超大屏幕 */
@media screen and (min-width: 2560px) {
    /* 时间轴4K优化 - 仅在4K及以上分辨率生效 */
    .timeline-swiper {
        max-width: 2000px;
        margin: 0 auto;
        padding: 0 60px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* 时间节点4K优化 - 更大的节点尺寸 */
    .timeline-swiper .swiper-slide {
        min-width: 380px;
        max-width: 380px;
        width: 380px;
        margin-right: 30px;
        height: 580px;
    }
    
    /* 时间节点内容区域4K优化 */
    .timeline-content {
        padding: 20px;
        min-height: 480px;
        height: 480px;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    
    /* 文字区域4K优化 - 仅限制高度防止重叠，保留原文字样式 */
    .timeline-content span {
        height: 105px;
        min-height: 105px;
        max-height: 105px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }
    
    /* 年份显示4K优化 - 保留原字体大小，无需额外样式覆盖 */
    
    /* 图片容器4K优化 */
    .timeline-content picture {
        height: 270px;
        width: 100%;
        max-width: 350px;
        margin-top: auto;
    }
    
    .timeline-content picture img {
        width: 350px;
        height: 240px;
        max-width: 350px;
        object-fit: cover;
        border-radius: 10px;
    }
}