/* ==================== 响应式设计 ==================== */

/* 平板电脑尺寸 (768px - 1024px) */
@media (max-width: 1024px) {
    .experience-card {
        flex-direction: column;
        min-height: 0;
    }
    
    .experience-info {
        padding: 25px;
    }
    
    .experience-images {
        flex: none;
        width: 100%;
        padding: 25px;
    }
    
    .image-carousel {
        max-width: 100%;
    }
    
    .carousel-container {
        height: 200px; /* 固定高度 */
        min-height: 200px; /* 最小高度 */
    }
    
    .carousel-slide {
        height: 200px;
        min-height: 200px; /* 确保最小高度，防止图片尺寸不同导致界面跳动 */
    }
}

/* 移动设备尺寸 (小于768px) */
@media (max-width: 768px) {
    /* 工作经历卡片优化 */
    .experience-card {
        margin-bottom: 20px;
    }
    
    /* 移动端隐藏PC端横线 */
    .experience-card::before {
        display: none;  /* 隐藏PC端的横线 */
    }
    
    .experience-info {
        padding: 20px;
    }
    
    .experience-images {
        padding: 20px;
    }
    
    /* 公司信息区域调整 */
    .company-info {
        position: relative;
        margin-bottom: 20px;  /* 减少底部间距，为横线留出空间 */
    }
    
    .company-name {
        font-size: 1.6rem;
        margin-bottom: 0;  /* 移除底部间距，横线将紧跟在名称后 */
        padding-bottom: 0;   /* 移除padding-bottom */
        background-color: transparent; /* 移除背景色 */
        padding-right: 0;     /* 移除右侧padding */
        display: block;       /* 改为块级元素 */
        position: relative;
    }
    
    /* 纵向布局下，分隔线已由 style.css 的 company-info border-bottom 提供 */
    .company-info::after { display: none; }
    
    /* 经历元信息（时间、地点等）调整 */
    .experience-meta {
        margin-top: 20px;  /* 增加顶部间距，确保横线和时间之间有适当距离 */
        padding-top: 12px; /* 增加顶部内边距 */
    }
    
    .work-content h4 {
        font-size: 1.2rem;
    }
    
    .carousel-container {
        height: 180px; /* 固定高度 */
        min-height: 180px; /* 最小高度 */
    }
    
    .carousel-slide {
        height: 180px;
        min-height: 180px; /* 确保最小高度，防止图片尺寸不同导致界面跳动 */
    }
}

/* 小屏幕手机 (小于480px) */
@media (max-width: 480px) {
    .experience-card {
        margin-bottom: 15px;
    }
    
    /* 小屏幕确保PC端横线隐藏 */
    .experience-card::before {
        display: none;  /* 隐藏PC端的横线 */
    }
    
    .experience-info {
        padding: 15px;
    }
    
    .experience-images {
        padding: 15px;
    }
    
    /* 公司信息区域调整 */
    .company-info {
        margin-bottom: 18px;  /* 小屏幕减少间距 */
    }
    
    .company-name {
        font-size: 1.4rem;
        margin-bottom: 0;  /* 移除底部间距，横线将紧跟在名称后 */
    }
    
    /* 纵向布局下，禁用旧横线伪元素 */
    .company-info::after { display: none; }
    
    /* 经历元信息调整 */
    .experience-meta {
        margin-top: 18px;  /* 小屏幕减少间距 */
        padding-top: 10px; /* 小屏幕减少内边距 */
    }
    
    .meta-item {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .meta-label {
        min-width: auto;
    }
    
    .carousel-container {
        height: 150px; /* 固定高度 */
        min-height: 150px; /* 最小高度 */
    }
    
    .carousel-slide {
        height: 150px;
        min-height: 150px; /* 确保最小高度，防止图片尺寸不同导致界面跳动 */
    }
    
    .carousel-controls {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    
    .carousel-indicators {
        order: 0;
        flex: 0 0 auto;
        margin: 0;
    }
    
    .carousel-prev, .carousel-next {
        font-size: 1.2rem;
        padding: 3px 3px;
        flex: 0 0 auto;
    }
}

/* ==================== 方向特定优化 ==================== */

/* 小屏幕手机 - 竖屏 */
@media (max-width: 480px) and (orientation: portrait) {
    .experience-images {
        padding: 12px;
    }
    
    .carousel-slide {
        height: 150px; /* 固定高度，防止图片尺寸不同导致界面跳动 */
    }
    
    .carousel-slide img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
}

/* 小屏幕手机 - 横屏 */
@media (max-width: 480px) and (orientation: landscape) {
    .experience-images {
        min-height: 250px;
        padding: 8px;
    }
    
    .carousel-slide {
        height: 220px;
    }
    
    .carousel-slide img {
        object-fit: cover;
        max-width: 85%;
        height: 95%;
        border-radius: 6px;
    }
    
    .carousel-container {
        max-width: 75%;
    }
}

/* 中等屏幕手机 - 竖屏 */
@media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
    .carousel-slide {
        height: 380px;
    }
    
    .experience-images {
        min-height: 450px;
    }
}

/* 中等屏幕手机 - 横屏 */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
    .carousel-slide {
        height: 300px;
    }
    
    .carousel-slide img {
        max-width: 88%;
        object-fit: cover;
    }
    
    .experience-images {
        min-height: 350px;
    }
}

/* 平板电脑横屏 */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .carousel-slide {
        height: 350px;
    }
    
    .carousel-slide img {
        max-width: 85%;
        object-fit: cover;
    }
    
    .experience-images {
        padding: 20px;
    }
}