/* ===== Tab 筛选器样式 ===== */

.tabs-container {
  display: flex; /* 让 tab 横向排列 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-start; /* 从左侧开始 */
  margin-bottom: 30px; /* 和下方内容的间距 */
}

.tab-item {
  /* 字体和大小 */
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400; /* 'regular' 对应 400 */

  /* 间距和填充 */
  padding: 10px 20px;
  margin-right: 20px;
  margin-bottom: 10px; /* 用于移动端换行时的间距 */

  /* 边框和形状 */
  border-width: 1px;
  border-style: solid;
  border-radius: 999px; /* 使用一个大数值来确保总是圆角矩形 */
  
  /* 默认状态颜色 */
  background-color: #FFFFFF;
  border-color: #A6AAB4;
  color: #A6AAB4; /* 通常非激活状态的文字颜色和边框一致 */

  /* 交互 */
  cursor: pointer;
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 移除最后一个按钮的右边距 */
.tab-item:last-child {
  margin-right: 0;
}

/* 鼠标悬停（非激活）状态 */
.tab-item:not(.active):hover {
  border-color: #333333;
  color: #333333;
}

/* 选中状态 (active) */
.tab-item.active {
  background-color: #000000;
  border-color: #000000;
  color: #FFFFFF; /* 选中时文字变白色以保证对比度 */
}



/* ===== 项目网格样式 (新版卡片样式) ===== */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; /* 网格间距 */
}

/* 这是项目卡片本身 */
.project-item {
  background-color: #FFFFFF; /* 卡片背景色 */
  border: 1px solid #E0E0E0; /* 卡片边框 */
  border-radius: 8px; /* 卡片圆角 */
  overflow: hidden; /* !重要：确保图片不会溢出圆角 */
  position: relative;
  padding: 10px; 
  
  /* 可选：添加阴影和悬停效果 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

/* 这是卡片顶部的图片 */
.project-image {
  width: 100%; 
  height: 200px; 
  object-fit: cover; 
  display: block; 
  border-radius: 6px;
  margin-bottom: 15px; 
}

/* 这是卡片下方的文字区域 */
.project-info {
 padding: 0; 
}

.project-info h3 {
  margin-top: 0; 
  font-size: 1.25rem; 
  color: #111;
  font-family: 'Rubik', sans-serif; 

  margin-bottom: 10px;
}

.project-info p {
  font-size: 0.95rem; 
  color: #555;
  line-height: 1.5;

  /* ! 新增：段落之间也加一点间距 */
  margin-bottom: 15px; 
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
}

/* ===== 卡片底部 (DDL 和 更多按钮) ===== */

.project-footer {
  display: flex; /* 让 DDL 和按钮横向排列 */
  justify-content: space-between; /* 把它们推到行的两端 */
  align-items: center; /* 让它们垂直居中 */
  margin-top: 15px; /* 和上面的 <p> 标签隔开 */
  
  /* 防止 <p> 标签的 margin-bottom 影响 */
  border-top: 1px solid #f0f0f0; /* 添加一条细微的分割线 */
  padding-top: 15px; /* 分割线上方留白 */
}

.project-ddl {
  font-size: 0.9rem;
  color: #555;
  white-space: nowrap; /* 防止 DDL 文字换行 */
}

/* "更多" 按钮的容器，用于定位 */
.project-actions {
  position: relative; /* !关键：成为 pop-up 的定位锚点 */
}

/* "更多" 按钮 */
.more-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px; /* 轻微填充，增大点击区域 */
  background-color: transparent;
  border: none;
  border-radius: 50%; /* 圆形按钮 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.more-button svg {
  width: 24px;
  height: 24px;
  fill: #A6AAB4; /* 默认颜色 (灰色) */
  transition: fill 0.3s ease;
}

/* 按钮悬停和激活状态 */
.more-button:hover {
  background-color: #f0f0f0; /* 悬停背景色 */
}
.more-button:hover svg,
.more-button.active svg { /* 当弹窗打开时，按钮也保持激活色 */
  fill: #000000; /* 悬停/激活颜色 (黑色) */
}


/* ===== 弹窗菜单 (Pop-up) ===== */

.project-popup {
  /* ! 关键：默认隐藏 */
  display: none; 
  
  /* ! 关键：定位 */
  position: absolute;
  right: 0; /* 对齐到父级 .project-actions 的右侧 */
  bottom: 100%; /* 出现在按钮的上方 */
  margin-bottom: 8px; /* 距离按钮一点间距 */

  /* 样式 */
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 160px; /* 弹窗宽度 */
  z-index: 10; /* 确保在最上层 */
  padding: 8px; /* 弹窗内部间距 */
}

/* ! 关键：用于 JS 切换的 "show" 类 */
.project-popup.show {
  display: block;
}

/* 弹窗内的下载链接 */
.popup-action {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  border-radius: 6px; /* 链接本身也有圆角 */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.popup-action svg {
  width: 20px;
  height: 20px;
  fill: #555; /* SVG 默认颜色 */
  margin-right: 10px; /* SVG 和文字的间距 */
  transition: fill 0.3s ease;
}

/* 弹窗链接悬停状态 */
.popup-action:hover {
  background-color: #f0f0f0; /* 悬停背景色 */
  color: #000;
}

.popup-action:hover svg {
  fill: #000; /* 悬停时图标变黑 */
}