/* ==================== 修改：添加顶部间距避免被导航栏遮挡 ==================== */
/* 修改：为内容主体添加顶部内边距，假设导航栏高度为80px */
/* 如果导航栏实际高度不同，请调整这里的值 */


.department-container {
    /* padding: 0px 0 30px 0; 修改：添加顶部内边距40px，底部保持30px */
    padding-top: 0;
    min-height: auto;
}

/* 修改：调整标题区的上边距，因为容器已经有padding了 */
.department-header {
    text-align: center;
    margin-bottom: 40px;
    padding-top: 0; /* 修改：从20px改为0，因为容器已经有padding了 */
}

/* 标题样式保持不变 */
.department-header .title {
    font-size: 34px;
    color: #222;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.department-header .title_en {
    font-size: 14px;
    color: #888;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
}

/* 主容器保持不变 */
.department-wrapper {
    display: flex;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

/* 左侧：图片展示区（文字重叠） */
.department-left {
    flex: 0 0 60%;
    position: sticky;
    top: 60px;
    height: fit-content;
}

.image-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    aspect-ratio: 15/ 8;
    min-height: 200px;
    height: auto; /* 固定高度 */
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.image-wrapper:hover .main-image {
    transform: scale(1.05);
}

/* 文字叠加在图片上 */
.image-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    z-index: 2;
}

.image-info h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.image-info p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* 查看详情按钮在图片内 - 加大 */
.view-more {
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.view-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px; /* 增加padding */
    background: rgba(255,255,255,0.95);
    color: #c7254e;
    text-decoration: none;
    border-radius: 24px; /* 更大的圆角 */
    font-weight: 600;
    font-size: 16px; /* 字体加大 */
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.view-btn:hover {
    background: white;
    transform: translateX(3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.view-btn .icon {
    margin-left: 8px; /* 图标间距加大 */
    font-size: 18px; /* 箭头图标加大 */
    transition: transform 0.3s ease;
}

.view-btn:hover .icon {
    transform: translateX(4px);
}




/* ==================== 左列表右图布局（用于特定页面） ==================== */
/* 使用时需在 department-wrapper 上添加类名 layout-right-image */

/* 左侧列表（原右侧列表样式）占40% */
.layout-right-image .department-left {
    flex: 0 0 40%;
    position: static; /* 列表不需要粘性定位 */
}

/* 右侧图片（原左侧图片样式）占60%，保留粘性定位 */
.layout-right-image .department-right {
    flex: 0 0 60%;
    position: sticky;
    top: 60px;
    height: fit-content;
}

/* 响应式覆盖：小屏时改为纵向排列 */
@media (max-width: 1200px) {
    .layout-right-image .department-wrapper {
        flex-direction: column;
    }
    .layout-right-image .department-left,
    .layout-right-image .department-right {
        flex: none;
        width: 100%;
    }
    .layout-right-image .department-right {
        position: static; /* 取消粘性 */
    }
}

/* ==================== 修复滚动条导致列表偏移 ==================== */
.department-list {
    scrollbar-gutter: stable; /* 现代浏览器：自动预留滚动条空间，避免内容跳动 */
    padding-right: 15px;      /* 为滚动条预留足够空间（兼容旧浏览器） */
    box-sizing: border-box;   /* 确保内边距包含在宽度内，不撑大容器 */
}

/* 将滚动条移到左侧（仅适用于左列表右图布局） */
.layout-right-image .department-list {
    direction: rtl;                 /* 改变滚动条位置到左侧 */
    padding-left: 15px;             /* 为滚动条在左侧预留空间（原padding-right改为padding-left） */
    padding-right: 0;               /* 移除右侧预留空间 */
}

.layout-right-image .department-list .department-item {
    direction: ltr;                 /* 内部内容恢复从左到右，不影响阅读 */
}

/* 简化左侧列表（仅保留标题，隐藏英文名和简介） */
.layout-right-image .department-list .en-name,
.layout-right-image .department-list .brief {
    display: none;
}

.layout-right-image .department-list .item-info h4 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: #222;
}

.layout-right-image .department-list .item-contentr {
    padding: 15px 0;
    min-height: auto;
}

/* 如果希望隐藏箭头，取消下面注释 */

/*.layout-right-image .department-list .item-arrow {
    display: none;
}*/


/* ----- 重置 & 基础 ----- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* 科研模块容器 - 缩小尺寸并向下移动避开导航 */
.research-carousel {
    max-width: 1400px;
    width: 100%;
    background: #ffffff;

    box-shadow: 0 30px 60px -15px rgba(0, 20, 30, 0.2);
    padding: 1.5rem 1.5rem;
    transition: box-shadow 0.3s;
    margin-top: 123px;           /* 避开上方导航菜单 */
}

/* 标题区 - 改为flex布局，使标题组和更多按钮同行 */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.8rem;
    border-left: 5px solid #b22222;
    padding-left: 1.2rem;
}



/* 面包屑导航栏：固定悬浮，不随滚动移动 */
/* ========== 触发区域（悬停显示） ========== */
.breadcrumb-trigger {
    position: fixed;
    top: 123px;
    left: 0;
    right: 0;
    width:40vw;
    height: 30px;
    z-index: 1001;
    background: transparent;
    pointer-events: auto;
}

/* ========== 面包屑导航栏（高度 70px） ========== */
.breadcrumb {
    position: fixed;
    top: 123px;
    left: 0;
    right: 0;
    z-index: 1000;

    /* 半透明白色背景 + 毛玻璃 */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    /* 高度控制：通过内边距和行高使总高度为 70px */
    padding: 0 2.5rem;
    line-height: 70px;          /* 垂直居中文本 */
    height: 70px;               /* 明确固定高度 */
    box-sizing: border-box;

    /* 边框与阴影 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);

    /* 字体与间距 */
    font-family: 'Segoe UI', 'PingFang SC', Roboto, 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    font-weight: 450;
    letter-spacing: 1.2px;
    color: #5e0404;

    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    visibility 0.25s,
    transform 0.2s ease;
    transform: translateY(-4px);
    pointer-events: none;

    /* 长内容滚动 */
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 鼠标移入触发区域时显示 */
.breadcrumb-trigger:hover .breadcrumb {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* 面包屑链接 */
.breadcrumb a {
    color: #b91c1c;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    border-bottom: 1px solid transparent;
}
.breadcrumb a:hover {
    color: #8b1414;
    border-bottom-color: rgba(185, 28, 28, 0.3);
}

/* 分隔符 */
.breadcrumb .separator {
    margin: 0 8px;
    color: rgba(0, 0, 0, 0.35);
    font-weight: 300;
    font-size: 0.9rem;
}

/* 当前页 */
.breadcrumb .current {
    font-weight: 600;
    color: #0f2b3f;
    letter-spacing: 1.5px;
}

/* 响应式：窄屏调整 */
@media (max-width: 768px) {
    .breadcrumb-trigger {
        top: 100px;
        height: 10px;
    }
    .breadcrumb {
        top: 100px;
        padding: 0 1.2rem;
        line-height: 60px;       /* 小屏可略微降低高度，但仍保持较高 */
        height: 60px;
        font-size: 0.85rem;
        letter-spacing: 0.8px;
    }
    .breadcrumb .separator {
        margin: 0 6px;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        padding: 0 1rem;
        line-height: 50px;
        height: 50px;
        font-size: 0.8rem;
        letter-spacing: 0.6px;
    }
}