/* Members页面专用背景色 */
body {
    background-color: #e0edff !important;
}

/* 统一主题变量 */
:root {
  --theme-accent: #5ea1fc;
}

/* 页面内容样式 - 优化适配 */
.page-container {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 1rem;
    margin-top: 80px;
    /* 防止内容溢出屏幕边缘 */
  }

  :root { --members-hero-min: 250px; --members-hero-vw: 30vw; --members-hero-max: 520px; }
  .page-header {
    position: relative;
    margin-bottom: 3rem;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* 顶部不动，向下拉长：调大 clamp 最大值 400px -> 520px (可继续调 560 / 600) */
    height: clamp(var(--members-hero-min), var(--members-hero-vw), var(--members-hero-max));
  }

  .page-name {
    position: absolute;
    left: clamp(1rem, 5vw, 4rem);
    top: clamp(1.2rem, 8vh, 5rem);
    color: #5ea1fc; /* 修改为主题蓝色 */
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
    z-index: 3;
    /* 仍保留阴影以提升在照片上的可读性，可根据需要减弱 */
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
  }

  @keyframes title-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* 中等屏幕：稍微收缩标题位置与 padding */
  @media (max-width: 1200px) {
    .page-name {
      left: clamp(1rem, 4vw, 2.5rem);
      top: clamp(1rem, 7vh, 3.5rem);
      font-size: clamp(1.9rem, 5.2vw, 2.8rem);
    }
  }

  /* 平板与大屏手机：标题适度下移，防止遮挡左图主体 */
  @media (max-width: 900px) {
    .page-name {
      top: clamp(0.8rem, 6vh, 2.5rem);
      left: clamp(0.8rem, 4vw, 2rem);
      font-size: clamp(1.8rem, 6vw, 2.4rem);
    }
  }

  /* 小屏（隐藏左图时）：标题可更靠左上，背景稍微透明 */
  @media (max-width: 768px) {
    .page-name {
      top: clamp(0.7rem, 5vh, 2rem);
      left: clamp(0.7rem, 4vw, 1.8rem);
      font-size: clamp(1.7rem, 7vw, 2.2rem);
    }
  }

  /* 极小屏 */
  @media (max-width: 480px) {
    .page-name {
      font-size: clamp(1.5rem, 8vw, 2rem);
      top: clamp(0.6rem, 4.5vh, 1.6rem);
      left: clamp(0.6rem, 3.5vw, 1.2rem);
    }
  }

  .header-mid {
    display: flex;
    height: 100%;
    overflow: hidden;
  }

  .header-mid .header-img-left,
  .header-mid .header-img-right {
    height: 100%;
    object-fit: cover;
    object-position: top center; /* 顶部对齐，底部延展露出更多 */
    display: block;
  }

  /* 并排模式：左 50% / 右 50% */
  :root { 
    --members-left-width: 55%; /* 基础可见宽度：原60% -> 55% */
    --members-left-overlay-extra: 5%; /* 向右覆盖：原8% -> 5% */
    --members-right-width: 50%;
    --members-right-brightness: 0.92;
    --members-left-edge-fade: 1; 
  /* 右侧图片水平可调焦点（通过 object-position 而不是平移容器，保持右边不动） */
  --members-right-crop-shift: -14px; /* 负值=整体视觉向左挪一点；改大/小微调 */
  --members-right-img-pos: center center; 
    /* 右侧团队图片下移距离（可调节）。需求："往下调一点"，默认 12px；改为 0 取消。 */
  --members-right-shift-y: 44px; /* 再次下移：原12px -> 28px -> 44px，可继续调整 */
    /* 右侧团队图片向左平移（负值向左，正值向右），满足“再往左调一点” */
  --members-right-shift-x: 0px; /* 保持容器贴右，不再用它做左移，改用 --members-right-crop-shift */
  }
  .header-mid { position: relative; display:block; }
  /* 右图保持“原位”占右半部分区域：用一个包裹层实现固定基线 */
  .header-mid .header-img-right {
    position:absolute; top:0; bottom:0; right:0; width:var(--members-right-width); height:100%;
    object-fit:cover; object-position: top calc(50% + var(--members-right-crop-shift)); z-index:0;
    filter: brightness(var(--members-right-brightness));
    transform: translate(var(--members-right-shift-x), var(--members-right-shift-y));
    transition: filter .4s ease, object-position .6s ease, transform .6s ease;
  }
  /* 左图浮在上方，并向右覆盖一点 */
  .header-mid .header-img-left {
    position:relative; z-index:2; height:100%; object-fit:cover; object-position: var(--members-left-img-pos) center;
    width: calc(var(--members-left-width) + var(--members-left-overlay-extra));
    max-width: 100%;
    transition: object-position .6s ease, width .6s ease;
  }
  /* 可选：左图右缘渐隐（通过变量开关） */
  /* 若需要柔化左图右缘，为左图加 data-fade="1"；默认变量 --members-left-edge-fade 控制开关（可扩展）。*/
  .header-mid .header-img-left[data-fade="1"],
  .header-mid .header-img-left[data-fade="true"] { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%); }

  /* 左图向右“挪动”视觉焦点：通过调整 object-position 而不是添加内边距，避免破坏裁剪 */
  :root { 
    /* 调整左侧图片水平焦点位置：值越大越向右偏移 */
    --members-left-img-pos: 93%;
    --members-mid-gradient-width: 48px; /* 渐变宽度 */
    --members-mid-gradient-color: 255,255,255; /* 作为高光的基础RGB，可改成 94,161,252 */
    --members-mid-gradient-strength: 0.55; /* 中心不透明度 */
  }
  .header-mid .header-img-left { object-position: var(--members-left-img-pos) center; transition: object-position 0.6s ease; }

  /* 中间渐变过渡：伪元素覆盖两图交界，营造柔和融合效果 */
  .header-mid { position: relative; }
  /* 中间渐变分界（激活：显示一条从左图到右图的柔和过渡） */
  /* 已取消中间渐变效果（如需恢复，可撤销此处修改或重新启用下面被注释的块） */
  /*
  :root {
    --members-mid-gradient-width: 70px;
    --members-mid-gradient-color-left: 0,0,0;
    --members-mid-gradient-color-right: 255,255,255;
    --members-mid-gradient-opacity: 0.55;
    --members-mid-gradient-shift-x: -48px;
  }
  .header-mid::before { ... 原渐变代码 ... }
  */
  .header-mid::before { display:none !important; }

  /* 不支持 mask 的浏览器（可选降级）：添加一个半透明渐变遮罩 */
  .no-mask .header-mid .header-img-left { /* 需要在 <html> 上加 no-mask 类手动降级时使用 */ opacity: 0.98; }

  /* 响应式调整 */
  @media (max-width: 1200px) {
    :root { --members-left-width: 50%; --members-right-width: 50%; }
  }

  @media (max-width: 768px) {
  .header-mid .header-img-left { display:none; }
  .header-mid .header-img-right { position:absolute; right:0; left:0; width:100%; }
  }

  .page-body {
    display: flex;
    gap: 2rem;
    /* 小屏垂直排列 */
  }

  /* 左侧导航 - 优化适配 */
  .left-nav {
    flex: 0 0 250px;
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: fit-content;
    position: sticky;
    top: 100px;
  }

  /* 小屏左侧导航全屏显示，取消固定定位 */
  @media (max-width: 1200px) {
    .left-nav {
      position: static;
      margin-bottom: 2rem;
      width: 100%;
      flex: none;
    }

    /* 左侧导航项横向排列，提升小屏体验 */
    .left-nav-title {
      text-align: center;
    }

    .left-nav-item {
      display: inline-block;
      margin: 0 1rem;
      padding: 0.5rem 1rem;
    }
  }

  .left-nav-title {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--theme-accent);
  }

  .left-nav-title span {
    font-size: 1.5rem;
    font-weight: 700;
    color: #032d30;
  }

  .left-nav-item {
    padding: 0.8rem 0;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 3px solid transparent;
    padding-left: 1rem;
  }

  .left-nav-item:hover {
    border-left-color: var(--theme-accent);
    padding-left: 1.5rem;
  }

  .left-nav-item span {
    font-size: 1.1rem;
    color: #032d30;
    transition: color 0.3s;
  }

  .left-nav-item:hover span {
    color: var(--theme-accent);
  }

  /* 卡片容器 - 优化网格布局 */
  .cards-containers {
    flex: 1;
  }

  .cards-container {
    margin-bottom: 3rem;
    scroll-margin-top: 100px;
  }

  .cards-header {
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--theme-accent);
  }

  .cards-group {
    font-size: 2rem;
    font-weight: 700;
    color: #032d30;
  }

  /* 卡片网格 - 优化响应式列数 */
  .cards {
    display: grid;
    /* 最小250px一列，自动填充剩余空间，间距自适应 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    margin-bottom: 2rem;
  }

/* 修改卡片和图片容器样式 */
.card {
position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s, box-shadow 0.3s;
border-radius: 15px;
background: white;
height: 450px; /* 增加卡片整体高度 */
}

.photo {
width: 100%;
height: 500px; /* 增加图片容器高度，原来是300px */
overflow: hidden;
position: relative;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.card .card-description2 {
position: absolute;
left: 0;
bottom: -100%; /* 改用bottom定位，初始位置在底部以下 */
width: 100%;
min-height: 50%; /* 设置最小高度为卡片的一半 */
background: rgba(39, 40, 119, 0.95);
padding: 1.5rem;
transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.card:hover .card-description2 {
bottom: 0; /* 悬停时移动到底部对齐 */
}

/* 调整信息卡片内容样式 */
.card-description2 .name {
font-size: 1.5rem;
font-weight: 600;
color: white;
margin-bottom: 0.5rem;
}

.card-description2 .mem-detail {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1rem;
}

.card-description2 .motto-detail {
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
flex-grow: 1;
}

/* 悬停效果 */
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
  

  /* 返回顶部按钮 */
  .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    cursor: pointer;
  }

  .btt-bg {
    width: 50px;
    height: 50px;
    background: #5ea1fc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(94, 161, 252, 0.5);
    transition: transform 0.3s;
  }

  .back-to-top:hover .btt-bg {
    transform: scale(1.1);
  }

  .btt-icon {
    width: 24px;
    height: 24px;
  }

  /* 响应式设计 - 分层优化 */
  /* 平板端（768px-1200px） */
  @media (max-width: 1200px) {
    .page-body {
      flex-direction: column;
    }

    .header-mid img:last-child {
      height: 70%;
      /* 缩小右侧团队照片 */
    }
  }

  /* 小平板/大屏手机（480px-768px） */
  @media (max-width: 768px) {
    .page-name {
      left: 5%;
      top: 25%;
      /* 调整标题位置 */
    }

    .cards {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      /* 缩小卡片宽度 */
    }

    .header-mid img:last-child {
        display: none;
        /* 隐藏右侧团队照片 */
      } 
    }

    /* 手机端（<480px） */
    @media (max-width: 480px) {
        .cards {
          grid-template-columns: 1fr;
          /* 单列显示卡片 */
        }
  
        .cards-group {
          font-size: 1.5rem;
          /* 缩小 section 标题 */
        }
  
        .card-description .name {
          font-size: 1.2rem;
          /* 缩小卡片姓名 */
        }
  
        .navbar-brand img {
          height: 45px;
          /* 缩小logo */
        }
      }