/* teacher.css - 教师列表页面样式 */

.teacher-grid {
  margin-top: 30px; /* 顶部外边距 */
  margin-left: -124px;
}

.teacher-item {
  /* background-color: #f8f9fa;  可选：添加背景色 */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 添加过渡效果 */
  width: 161px; /* 设置固定宽度 */
  height: 246px; /* 设置固定高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 64px; /* 设置下外边距 */
  margin-left: 124px; /* 设置右外边距 */
  box-shadow: 0px 1px 4px 0px rgba(68,68,68,0.1); /* 添加阴影 */
}

/*
.teacher-item:hover {
  transform: translateY(-5px); /* 悬停时轻微上移 */
/*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
/*}
*/

.teacher-item a {
  text-decoration: none; /* 去除链接下划线 */
  color: inherit; /* 继承父元素颜色 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.teacher-photo {
  /* max-width: 100%; 图片最大宽度 */
  /* height: auto; 高度自适应 */
  /* aspect-ratio: 3 / 4; 设置图片宽高比，可以根据实际图片调整 */
  height: 200px;
  width: 161px;
  object-fit: cover;
  border: 1px solid #eee; /* 图片边框 */
  /* margin-bottom: 10px; 图片下方间距 */
  /* width: 100%; /* 移动到移动端样式 */
}

.teacher-name {
  font-size: 16px; /* 教师姓名文字大小 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 文字颜色 */
  margin-top: 13px; /* 将名字推到底部 */
}

/* 移动端样式 */
@media (max-width: 767px) {
  main {
    padding: 0 12px;
  }

  .teacher-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 在项目之间分配空间 */
    margin-left: 0; /* 重置PC端的左边距 */
    margin-top: 20px; /* 调整移动端上边距 */
    margin-bottom: 20px; /* 添加移动端下边距 */
    width: 100%; /* 确保占据父容器宽度 */
  }

  .teacher-item {
    flex: 0 0 calc(33.333% - 8px); /* 每个项目占据约1/3宽度，减去间隙 */
    width: calc(33.333% - 8px);    /* 明确宽度 */
    margin-left: 0;        /* 重置PC端的左边距 */
    margin-bottom: 20px;   /* 调整移动端下边距 */
    height: auto;          /* 高度自适应 */
    box-shadow: 0px 1px 4px 0px rgba(68,68,68,0.1); /* 添加阴影 */
    border-radius: 2px; /* 添加圆角 */
  }

  .teacher-photo {
    /* height: auto; /* 图片高度自适应 */
    height: 155px; /* 设置移动端固定高度 */
    object-fit: cover; /* 保持宽高比并裁剪 */
    width: 100%;  /* 图片宽度充满容器 */
    /* aspect-ratio: 1 / 1; /* 可选：设置固定宽高比 */
  }

  .teacher-name {
    margin-top: 9px; /* 设置移动端上边距 */
    margin-bottom: 9px; /* 设置移动端下边距 */
    font-size: 14px; /* 调整字体大小 */
    font-weight: normal; /* 取消加粗 */
  }
}