/* css styles */

/* 通用页脚样式 */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  background-color: #FFF;
  border-top: 1px solid #e0e0e0;
  text-align: center;
  font-size: 0.9rem;
  color: #333; /* 使用深灰色提升可读性 */
  z-index: 100;
  font-family: 'Roboto', sans-serif;
}

/* 全局设置 */
body {
  min-height: 100vh;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

/* ========= 首页样式 ========= */
body.home-page {
  background-image: url('images/home55.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.home-page .main-content {
  padding: 100px 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}



body.home-page .hero-title {
  font-size: 3.5rem;
  margin-bottom: 15px;
  font-weight: 400;
  color: #FFF;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  margin-bottom: 0;
}

body.home-page .hero-subtitle {
  font-size: 1.8rem;
  font-weight: 400;
  color: #FFF;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  margin-bottom: 0;
}

body.home-page .hero-title, 
body.home-page .hero-subtitle {
  text-decoration: none !important;
  border-bottom: none !important;
  outline: none !important;
}


/* ========= 其他页面样式 ========= */
body:not(.home-page) {
  background-color: white;
  color: #333;
}

/* 其他页面的主内容区域 */
body:not(.home-page) .main-content {
  padding: 80px 20px;
  max-width: 1000px;
  margin: 0 auto;
}


/* ======= 公共样式（首页和其他页面共享） ======= */
/* 按钮样式（在首页和其他页面保持一致） */
/* 基础样式：尺寸扩大25% */
.btn {
  position: fixed;
  bottom: 70px;
  right: 30px;
  padding: 9.375px 18.75px; /* 原7.5px→9.375px(↑25%), 15px→18.75px */
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 18.75px; /* 原15px→18.75px */
  font-weight: 600;
  font-size: 0.6875rem; /* 原0.55rem→0.6875rem */
  box-shadow: 0 3.125px 9.375px rgba(0,0,0,0.3); /* 阴影扩大25% */
  z-index: 101;
  transition: all 0.3s ease;
  border: 1.25px solid rgba(255,255,255,0.3); /* 边框加粗25% */
}

/* 悬态效果增强 */
.btn:hover {
  transform: translateY(-2px) scale(1.08); /* 位移增加33% */
  box-shadow: 0 5px 12.5px rgba(0,0,0,0.4); /* 阴影扩大25% */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .btn {
    padding: 5px 8.75px;  /* 原4px→5px, 7px→8.75px */
    font-size: 0.625rem;  /* 原0.5rem→0.625rem */
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 6.25px 12.5px; /* 原5px→6.25px, 10px→12.5px */
    font-size: 0.5625rem;   /* 原0.45rem→0.5625rem */
    border-radius: 12.5px;  /* 原10px→12.5px */
  }
}



.photo-credit {
  position: fixed;
  bottom: 70px;
  left: 20px; /* 从80px减少到50px，向左移动30px */
  color: #fff;
  text-decoration: none;
  border-radius: 18.75px;
  font-weight: 600;
  font-size: 0.6875rem;
  z-index: 101;
  transition: all 0.3s ease;
  padding: 8px 15px; /* 添加内边距增强可读性 */
  background: rgba(0,0,0,0.4); /* 添加半透明背景 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 文字阴影增强可读性 */
}

/* 悬态效果增强 */
.photo-credit:hover {
  transform: translateY(-2px) scale(1.08);
  background: rgba(0,0,0,0.6); /* 悬停时加深背景 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .photo-credit {
    padding: 5px 8.75px;
    font-size: 0.625rem;
    left: 30px; /* 移动端向左移动20px */
  }
}

@media (max-width: 480px) {
  .photo-credit {
    padding: 6.25px 12.5px;
    font-size: 0.5625rem;
    border-radius: 12.5px;
    left: 15px; /* 小屏幕向左移动15px */
  }
}





/*Research */
.Research-title {
  margin-left: 0em; /* 控制缩进量 */
  text-indent: 0em; /* 悬挂缩进效果 */
}
.Research-title {
  padding-bottom: 15px; /* 从25px减少到15px */
  margin-bottom: 20px; /* 从40px减少到20px */
}

/* 移除原有装饰线 */
.Research-title::after {
  display: none;
}


/*publication */
.publication-list ol {
  padding-left: 1.5em;
  line-height: 1.6;
}

.publication-list li {
  margin-bottom: 5em;
}


/* 团队部分 */
/* === 团队容器样式 === */
.team-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* === 标题样式 - 统一装饰线 === */
.section-title, .category-title {
  text-align: left;
  margin-bottom: 25px;
  color: black;
  font-weight: 700;
  position: relative;
  padding-bottom: 25px; /* 增加底部内边距 */
  display: block; /* 确保块级显示 */
}

.section-title::after,
.category-title::after {
  content: '';
  display: block;
  width: 100px; /* 统一装饰线长度 */
  height: 4px; /* 统一装饰线粗细 */
  background: #3498db;
  border-radius: 2px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3); /* 匹配颜色的阴影 */
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1; /* 确保在顶层 */
}



/* === 负责人样式 === */
.principal-investigator {
  display: flex; /* 启用 Flex 布局 */
  gap: 40px; /* 左右两部分的水平间距（可调整） */
  align-items: flex-start; /* 强制顶部对齐（避免内容高度不同导致错位） */
  max-width: 1200px; /* 可选：限制整体宽度，居中显示 */
  margin: 0 auto; /* 可选：整体居中 */
}

.photo-text-group {
  display: flex;
  flex-direction: column; /* 子元素垂直排列（照片→姓名→邮箱） */
  align-items: flex-start; /* 内部元素左对齐（可选，若需居中可改为center） */
}


.pi-photo {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  margin-bottom: 25px; /* 照片与下方姓名的间距（可按需增减） */
}

.pi-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: black;
  text-align: left;
  margin-bottom: 30px; /* 姓名与下方邮箱的间距（可按需增减） */
}

.pi-email {
  color: #3498db;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  margin-left: 0; /* 邮箱文本左缩进（保留原有效果） */
}

.bio-section {
  flex: 1; /* 占据剩余空间（若需固定宽度，可改为width: 600px） */
  padding-left: 20px; /* 可选：添加左侧内边距，与照片组拉开距离 */
}

.pi-bio {
  font-size: 1rem;
  color: black;
  line-height: 1.6;
  text-align: left;
  margin-top: 0;
  /* 移除原min-width: 500px（由Flex布局自动控制宽度） */
}


/* === 研究团队成员样式 === */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
  justify-content: left; /* 使网格整体居中 */
  max-width: 1300px; /* 增加最大宽度 */
  margin-left: auto;
  margin-right: auto;
}

.team-member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.team-member-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.member-photo {
  width: 140px; /* 放大照片尺寸 */
  height: 140px; /* 放大照片尺寸 */
  border-radius: 50%;
  object-fit: cover;
  border: none;
  margin-bottom: 15px;
}

.member-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: black;
  text-align: center;
  margin-bottom: 5px;
}

.member-position {
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 500;
}

.member-email {
  color: #3498db;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
}

/* === 响应式设计 === */
@media (max-width: 1200px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin: 30px auto 0;
  }
  
  .section-title {
    font-size: 2rem;
    margin-top: 20px;
  }
  
  .category-title {
    font-size: 1.8rem;
  }
  
  .pi-photo {
    width: 200px;
    height: 200px;
  }
  
  .pi-name {
    font-size: 1.6rem;
  }
}

@media (max-width: 576px) {
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  
  .pi-photo {
    width: 170px;
    height: 170px;
  }
  
  .pi-name {
    font-size: 1.4rem;
  }
  
  .pi-position {
    font-size: 1.1rem;
  }
  
  .member-photo {
    width: 140px;
    height: 140px;
  }
  
  .member-name {
    font-size: 1.2rem;
  }
}

/* News部分 */
/* 新闻图片统一样式 */
.All-photo {
  position: left;
  display: block;
  width: 100%; /* 宽度自适应容器 */
  max-width: 800px; /* 最大宽度限制 */
  height: auto; /* 高度自动保持比例 */
  aspect-ratio: 3 / 2; /* 3:2 经典比例 (类似于相机标准) */
  object-fit: cover; /* 裁剪填充容器 */
  margin: 10px auto; /* 上边距20px，水平居中 */
  border-radius: 6px; /* 轻微圆角 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 轻微阴影 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 方形布局特殊类 */
.All-photo.square {
  aspect-ratio: 1 / 1; /* 正方形比例 */
  max-width: 400px; /* 适当减小最大宽度 */
}

/* 悬停效果增强可交互性 */
.All-photo:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .All-photo {
    aspect-ratio: 3 / 4; /* 宽屏比例适合小屏幕 */
    margin: 8px auto; /* 移动端也调整：上15px，下8px */
    max-width: 100%;
  }
  
  .All-photo.square {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 768px) {
  .All-photo {
    aspect-ratio: 3 / 4; /* 竖屏比例适合移动设备 */
    margin: 5px auto;
  }
}



/* === 新闻标题样式 === */
.News-title {
  position: relative; 
  padding: 15px 0; /* 增加垂直内边距 */
  margin: 10px 0; /* 标题间垂直间距 */
  text-align: left; /* 标题左对齐 */
  font-weight: 600; /* 增加字体权重 */
  color: black; /* 深色文字增强可读性 */
  padding-left: 0; /* 添加左内边距 */
}

/* 顶部自定义分割线 */
.News-title::before {
  content: "";
  position: absolute;
  top: 0; /* 位于标题顶部 */
  left: 0; /* 与文本左对齐 */
  width: 100px; /* 固定分割线长度 */
  height: 3px; /* 分割线粗细 */
  background-color: #3498db; /* 主色调蓝色 */
  border-radius: 2px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3); /* 匹配颜色的阴影 */
}

/* 响应式调整 */
@media (max-width: 992px) {
  .News-title {
    padding-left: 12px;
     margin: 8px 0;
  }
  
  .News-title::before {
    left: 15px; 
    width: 80px; /* 中屏幕调整分割线长度 */
  }
}

@media (max-width: 768px) {
  .News-title {
    padding: 10px 0;
    margin: 5px;
  }
  
  .News-title::before {
    left: 10px; 
    width: 70px; /* 移动端分割线长度 */
    height: 2px; /* 减细线条 */
  }
}

/* ==================== 修正后的CSS（一排两个布局） ==================== */
.news-image-container {
  display: flex;
  justify-content: center;
  gap: 16px;              /* 图片间距 */
  flex-wrap: wrap;        /* 自动换行 */
  margin: 15px 0;
}

.All-photo2 {
  /* ✅ 关键修正：精确计算一排两个的宽度 */
  width: calc(50% - 8px);  /* 50%宽度 - 8px（因gap=16px） */
  max-width: 500px;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.All-photo2:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* 响应式调整（小屏幕一排一个） */
@media (max-width: 480px) {
  .All-photo2 {
    width: 90%;
    max-width: 280px;
  }
}


/* Research部分 */
/* 新闻图片统一样式 */
.article-photo {
  display: block;
  width: 70%; /* 宽度自适应容器 */
  max-width: 800px; /* 最大宽度限制 */
  height: auto; /* 高度自动保持比例 */
  aspect-ratio: 3 / 2; /* 3:2 经典比例 (类似于相机标准) */
  object-fit: cover; /* 裁剪填充容器 */
  margin: 20px auto; /* 上下边距20px，水平居中 */
  border-radius: 6px; /* 轻微圆角 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 轻微阴影 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 方形布局特殊类 */
.article-photo.square {
  aspect-ratio: 1 / 1; /* 正方形比例 */
  max-width: 400px; /* 适当减小最大宽度 */
}

/* 悬停效果增强可交互性 */
.article-photo:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .article-photo {
    aspect-ratio: 16 / 9; /* 宽屏比例适合小屏幕 */
    max-width: 100%;
  }
  
  .article-photo.square {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 768px) {
  .article-photo {
    aspect-ratio: 3 / 4; /* 竖屏比例适合移动设备 */
    margin: 15px auto;
  }
}



/* contact部分 */
.contact-photo {
  display: block;
  width: 80%; /* 宽度自适应容器 */
  max-width: 800px; /* 最大宽度限制 */
  height: auto; /* 高度自动保持比例 */
  aspect-ratio: 3 / 2; /* 3:2 经典比例 (类似于相机标准) */
  object-fit: cover; /* 裁剪填充容器 */
  margin: 50px auto; /* 上下边距20px，水平居中 */
  border-radius: 6px; /* 轻微圆角 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 轻微阴影 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 方形布局特殊类 */
.contact-photo.square {
  aspect-ratio: 1 / 1; /* 正方形比例 */
  max-width: 400px; /* 适当减小最大宽度 */
}

/* 悬停效果增强可交互性 */
.contact-photo:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .contact-photo {
    aspect-ratio: 16 / 9; /* 宽屏比例适合小屏幕 */
    max-width: 100%;
  }
  
  .contact-photo.square {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 768px) {
  .contact-photo {
    aspect-ratio: 3 / 4; /* 竖屏比例适合移动设备 */
    margin: 15px auto;
  }
}