/**
 * Recruitment 招聘页面样式文件
 * ---------------------------------------------
 * 本文件定义校园招聘和社会招聘页面的共用样式
 * 包含：招聘类型选择、Tab切换、职位详情等模块
 * 
 * 适用页面：
 * - campusRecruitment.html（校园招聘）
 * - socialRecruitment.html（社会招聘）
 * 
 * @author WDWeb Team
 * @version 1.0
 */

/* ========================================
   招聘类型选择区域样式
   ======================================== */

/**
 * .recruitmentBox 招聘类型容器
 * width: 1440px - 固定宽度
 * border-radius: 20px - 圆角
 * background: #f0f6ff - 浅蓝色背景
 * box-shadow - 阴影效果
 * padding: 75px 90px - 内边距
 * margin: auto - 水平居中
 * cursor: pointer - 手型光标
 */
.recruitmentBox {
  width: 1440px;
  border-radius: 20px;
  background: #f0f6ff;
  box-shadow: 0px 3px 7px 0px rgba(42, 65, 151, 0.47);
  padding: 75px 90px;
  margin: auto;
  cursor: pointer;
}

/**
 * .recruitmentItem .imgBox 招聘类型图标容器
 * width/height: 160px - 固定尺寸
 * padding: 45px - 内边距
 * margin-bottom: 28px - 底部间距
 * border - 深蓝色圆形边框
 * border-radius: 50% - 圆形
 */
.recruitmentItem .imgBox {
  width: 160px;
  height: 160px;
  padding: 45px;
  margin-bottom: 28px;
  border: 2px solid #2a4197;
  border-radius: 50%;
}

/**
 * .recruitmentItem img 招聘类型图标
 * width/height: 64px - 固定尺寸
 * border-radius: 0 - 无圆角
 * margin: auto - 水平居中
 */
.recruitmentItem img {
  width: 64px;
  height: 64px;
  border-radius: 0;
  margin: auto;
}

/**
 * .recruitmentItem span 招聘类型名称
 * display: inline-block - 行内块
 * width: 160px - 固定宽度
 * text-align: center - 居中
 * font-weight: bold - 粗体
 * font-size: 24px - 较大字号
 * color: #3e3a39 - 深灰色
 */
.recruitmentItem span {
  display: inline-block;
  width: 160px;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  color: #3e3a39;
}

/* ========================================
   招聘职位区域样式
   ======================================== */

/**
 * .recruitment 招聘职位区域
 * margin-top: 100px - 顶部间距
 */
.recruitment {
  margin-top: 100px;
}

/**
 * .recruitmentBox 招聘职位容器顶部间距
 * margin-top: 90px - 顶部间距
 */
.recruitmentBox {
  margin-top: 90px;
}

/* ========================================
   Tab 切换组件样式
   ======================================== */

/**
 * .tabs Tab组件容器
 * width: 1440px - 固定宽度
 * margin: auto - 水平居中
 * margin-top: 90px - 顶部间距
 * margin-bottom: 120px - 底部间距
 */
.tabs {
  width: 1440px;
  margin: auto;
  margin-top: 90px;
  margin-bottom: 120px;
}

/**
 * .tabs-wrapper Tab组件包装器
 * display: flex - 弹性布局
 * background: #fff - 白色背景
 * overflow: hidden - 隐藏溢出
 */
.tabs-wrapper {
  display: flex;
  background: #fff;
  overflow: hidden;
}

/**
 * .tabs-menu Tab菜单列表
 * width: 300px - 固定宽度（左侧菜单栏）
 * padding: 20px 0 - 上下内边距
 * margin: 0 - 无外边距
 * list-style: none - 无列表样式
 */
.tabs-menu {
  width: 300px;
  padding: 20px 0;
  margin: 0;
  list-style: none;
}

/**
 * .tab-item Tab菜单项
 * padding: 20px 30px - 内边距
 * cursor: pointer - 手型光标
 * font-size: 18px - 字号
 * color: #3e3a39 - 深灰色
 * transition - 过渡动画
 * border-left: 4px solid transparent - 左侧透明边框
 */
.tab-item {
  padding: 20px 30px;
  cursor: pointer;
  font-size: 18px;
  color: #3e3a39;
  transition: all 0.3s;
  border-left: 4px solid transparent;
}

/**
 * .tab-item:hover Tab菜单项悬停状态
 * background - 浅蓝色背景
 */
.tab-item:hover {
  background: rgba(42, 65, 151, 0.1);
}

/**
 * .tab-item.active Tab菜单项激活状态
 * background: #fff - 白色背景
 * color: #2a4197 - 深蓝色文字
 * border-left-color - 左侧蓝色边框
 * font-weight: bold - 粗体
 */
.tab-item.active {
  background: #fff;
  color: #2a4197;
  border-left-color: #2a4197;
  font-weight: bold;
}

/* ========================================
   Tab 内容区域样式
   ======================================== */

/**
 * .tabs-content Tab内容区域
 * flex: 1 - 占据剩余空间
 * padding: 40px - 内边距
 */
.tabs-content {
  flex: 1;
  padding: 40px;
}

/**
 * .tab-pane Tab内容面板
 * display: none - 默认隐藏
 * box-shadow - 阴影效果
 * border-radius: 20px - 圆角
 * width: 1130px - 固定宽度
 * overflow: hidden - 防止溢出
 * background: #ffffff - 白色背景
 */
.tab-pane {
  display: none;
  box-shadow: 0px 3px 7px 0px rgba(42, 65, 151, 0.47);
  border-radius: 20px;
  width: 1130px;
  overflow: hidden;
  background: #ffffff;
  max-width: 100%;
}

/**
 * .tab-pane_top 内容面板顶部区域
 * background: #2a4197 - 深蓝色背景
 * border-radius: 20px 20px 0px 0px - 上方圆角
 * height: auto - 高度自适应
 * padding: 30px 40px - 内边距
 * overflow: hidden - 防止溢出
 */
.tab-pane_top {
  background: #2a4197;
  border-radius: 20px 20px 0px 0px;
  height: auto;
  padding: 30px 40px;
  overflow: hidden;
}

/**
 * .tab-pane_top img 面板顶部图标
 * width: 67px - 固定宽度
 * height: 75px - 固定高度
 * border-radius: 0 - 无圆角
 */
.tab-pane_top img {
  width: 67px;
  height: 75px;
  border-radius: 0;
}

/**
 * .tab-pane_top h1, p 面板顶部文字
 * color: #fff - 白色
 */
.tab-pane_top h1,
.tab-pane_top p {
  color: #fff;
}

/**
 * .tab-pane_top h1 职位名称
 * font-size: 36px - 大字号
 * text-align: center - 居中
 */
.tab-pane_top h1 {
  font-size: 36px;
  text-align: center;
}

/**
 * .tab-pane_top p 工作地点标签
 * font-size: 16px - 小字号
 * height: auto - 高度自适应
 * line-height: 1.5 - 行高
 * text-align: left - 左对齐
 * padding: 5px 0 - 上下内边距
 * width: auto - 宽度自适应
 */
.tab-pane_top p {
  font-size: 16px;
  height: auto;
  line-height: 1.5;
  text-align: left;
  border: none;
  border-radius: 0;
  padding: 5px 0;
  width: auto;
}

/**
 * .tab-pane.active Tab内容面板激活状态
 * display: block - 显示面板
 */
.tab-pane.active {
  display: block;
}

/**
 * .tab-pane h3 内容面板标题
 * font-size: 24px - 较大字号
 * color: #2a4197 - 深蓝色
 * margin-bottom: 20px - 底部间距
 */
.tab-pane h3 {
  font-size: 24px;
  color: #2a4197;
  margin-bottom: 20px;
}

/**
 * .tab-pane p 内容面板段落
 * font-size: 16px - 字号
 * line-height: 1.8 - 行高
 * margin-bottom: 10px - 底部间距
 */
.tab-pane p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 10px;
}

/**
 * .tab-pane_con 内容面板主体内容
 * padding: 45px 50px - 内边距
 */
.tab-pane_con {
  padding: 45px 50px;
}

/* ========================================
   Tab 内容左右布局样式
   ======================================== */

/**
 * .tab-pane_con_left 左右列表容器
 * flex: 1 - 弹性布局各占一半
 * padding: 0 15px - 左右内边距
 * display: flex - 弹性布局
 * flex-direction: column - 纵向排列
 * align-items: stretch - 使子元素（盒子）拉伸填满高度
 */
.tab-pane_con_left {
  flex: 1;
  padding: 0 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/**
 * .responsibility 职责列表
 * margin: 0 - 无外边距
 * background: #fff8f8 - 浅红色背景
 * padding: 20px - 内边距
 * border-radius: 8px - 圆角
 * height: auto - 高度自适应，由父容器的align-items: stretch控制高度一致
 * display: flex - 弹性布局
 * flex-direction: column - 纵向排列
 */
.responsibility {
  margin: 0;
  background: #fff8f8;
  padding: 20px;
  border-radius: 8px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-right: 40px;
}

/**
 * .responsibility dt 职责标题
 * font-weight: 600 - 半粗体
 * margin-bottom: 12px - 底部间距
 * font-size: 16px - 标题字号
 * color: #2a4197 - 主题色
 * padding-bottom: 8px - 底部内边距
 * border-bottom: 1px solid #e0e0e0 - 底部分隔线（浅灰色）
 * flex-shrink: 0 - 防止标题被压缩
 */
.responsibility dt {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 16px;
  color: #2a4197;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

/**
 * .responsibility dd 职责内容
 * color: #3e3a39 - 深灰色
 * line-height: 1.6 - 行高
 * margin-bottom: 8px - 底部间距
 * word-wrap: break-word - 防止文字溢出
 * word-break: break-all - 防止文字溢出
 * overflow-wrap: break-word - 防止文字溢出
 * padding-left: 8px - 左侧内边距
 * flex: 1 - 填充剩余空间
 * display: flex - 弹性布局
 * align-items: flex-start - 顶部对齐
 */
.responsibility dd {
  color: #3e3a39;
  line-height: 1.6;
  margin-bottom: 8px;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  padding-left: 8px;
  /* flex: 1; */
  display: flex;
  align-items: flex-start;
}

/**
 * .requirement 要求列表
 * margin: 0 - 无外边距
 * background: #f8f8ff - 浅蓝色背景
 * padding: 20px - 内边距
 * border-radius: 8px - 圆角
 * height: auto - 高度自适应，由父容器的align-items: stretch控制高度一致
 * display: flex - 弹性布局
 * flex-direction: column - 纵向排列
 */
.requirement {
  margin: 0;
  background: #f8f8ff;
  padding: 20px;
  border-radius: 8px;
  height: auto;
  display: flex;
  flex-direction: column;
}

/**
 * .requirement dt 要求标题
 * font-weight: 600 - 半粗体
 * margin-bottom: 12px - 底部间距
 * font-size: 16px - 标题字号
 * color: #2a4197 - 主题色
 * padding-bottom: 8px - 底部内边距
 * border-bottom: 1px solid #e0e0e0 - 底部分隔线（浅灰色）
 * flex-shrink: 0 - 防止标题被压缩
 */
.requirement dt {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 16px;
  color: #2a4197;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

/**
 * .requirement dd 要求内容
 * color: #3e3a39 - 深灰色
 * line-height: 1.6 - 行高
 * margin-bottom: 8px - 底部间距
 * word-wrap: break-word - 防止文字溢出
 * word-break: break-all - 防止文字溢出
 * overflow-wrap: break-word - 防止文字溢出
 * padding-left: 8px - 左侧内边距
 * flex: 1 - 填充剩余空间
 * display: flex - 弹性布局
 * align-items: flex-start - 顶部对齐
 */
.requirement dd {
  color: #3e3a39;
  line-height: 1.6;
  margin-bottom: 8px;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  padding-left: 8px;
  /* flex: 1; */
  display: flex;
  align-items: flex-start;
}

/* ========================================
   Tab 内容子区域样式
   ======================================== */

/**
 * .tab-pane_sub 内容子区域
 * margin-bottom: 40px - 底部间距（减少）
 */
.tab-pane_sub {
  margin-bottom: 40px;
}

/**
 * .tab-pane_sub img 子区域图标
 * width: 24px - 固定宽度
 * height: auto - 高度自适应
 */
.tab-pane_sub img {
  width: 24px;
  height: auto;
}

/**
 * .tab-pane_sub p 子区域描述文字
 * color: #898989 - 灰色
 * margin-right: 70px - 右侧间距
 */
.tab-pane_sub p {
  color: #898989;
  margin-right: 70px;
}

/**
 * .tab-pane_sub span 技能标签
 * background: #dcdddd - 浅灰色背景
 * color: #898989 - 灰色文字
 * padding: 4px 8px - 内边距
 * margin-right: 15px - 右侧间距
 * font-size: 16px - 字号
 */
.tab-pane_sub span {
  background: #dcdddd;
  color: #898989;
  padding: 4px 8px;
  margin-right: 15px;
  font-size: 16px;
}

/* ========================================
   职位详情内容样式
   ======================================== */

/**
 * .content 职位详情内容区域
 * padding: 40px - 内边距
 * overflow: hidden - 防止内容溢出
 * align-items: stretch - 使子元素（左右盒子）高度一致
 * min-height: 400px - 确保有足够的最小高度，让盒子看起来不会太小
 */
.content {
  /* padding: 40px 50px; */
  /* overflow: hidden; */
  align-items: stretch;
  /* min-height: 400px; */
}

/**
 * .content dt 职位详情标题
 * font-weight: 600 - 半粗体
 * margin-bottom: 12px - 底部间距
 * font-size: 16px - 标题字号
 * color: #2a4197 - 主题色
 * padding-bottom: 8px - 底部内边距
 * border-bottom: 1px solid #e0e0e0 - 底部分隔线（浅灰色）
 * flex-shrink: 0 - 防止标题被压缩
 */
.content dt {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 16px;
  color: #2a4197;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

/**
 * .requirement-item 要求列表项
 * margin-bottom: 12px - 底部间距
 * font-size: 14px - 字号
 * line-height: 1.6 - 行高
 */
.requirement-item {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
}

/**
 * .requirement-list 列表容器
 * margin-top: 0 - 顶部外边距
 */
.requirement-list {
  margin-top: 0;
}

/**
 * .responsibility-title 职责标题
 * font-weight: 600 - 半粗体
 * font-size: 16px - 字号
 * margin-bottom: 12px - 底部间距
 * color: #2a4197 - 主题色
 */
.responsibility-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  color: #2a4197;
}

/**
 * .requirement-title 要求标题
 * font-weight: 600 - 半粗体
 * font-size: 16px - 字号
 * margin-bottom: 12px - 底部间距
 * color: #2a4197 - 主题色
 */
.requirement-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  color: #2a4197;
}

/* ========================================
   响应式样式
   ======================================== */

/**
 * 移动端适配
 * 当屏幕宽度小于 768px 时应用
 */
@media (max-width: 768px) {
  /**
   * .tabs Tab组件容器
   * width: 100% - 宽度自适应
   */
  .tabs {
    width: 100%;
  }

  /**
   * .tabs-content Tab内容区域
   * padding: 20px - 减少内边距
   */
  .tabs-content {
    padding: 20px;
  }

  /**
   * .tab-pane Tab内容面板
   * width: 100% - 宽度自适应
   * border-radius: 10px - 减小圆角
   */
  .tab-pane {
    width: 100%;
    border-radius: 10px;
  }

  /**
   * .tab-pane_top 内容面板顶部区域
   * padding: 20px - 减少内边距
   */
  .tab-pane_top {
    padding: 20px;
  }

  /**
   * .content 职位详情内容区域
   * padding: 20px - 减少内边距
   * flex-direction: column - 改为纵向排列（在移动端上下排列）
   * align-items: normal - 取消拉伸（移动端不需要拉伸对齐）
   * min-height: auto - 取消最小高度限制
   */
  .content {
    padding: 20px;
    flex-direction: column;
    align-items: normal;
    min-height: auto;
  }

  /**
   * .tab-pane_con_left 左右列表容器
   * padding: 0 5px - 减少内边距
   * width: 100% - 宽度填满
   */
  .tab-pane_con_left {
    padding: 0 5px;
    width: 100%;
  }

  /**
   * .responsibility 职责列表
   * margin-right: 0 - 取消右侧间距
   * margin-bottom: 20px - 添加底部间距（与requirement之间）
   * height: auto - 高度自适应
   */
  .responsibility {
    margin-right: 0;
    margin-bottom: 20px;
    height: auto;
  }

  /**
   * .requirement 要求列表
   * margin-left: 0 - 取消左侧间距
   * margin-bottom: 0 - 移除底部间距
   * height: auto - 高度自适应
   */
  .requirement {
    margin-left: 0;
    margin-bottom: 0;
    height: auto;
  }

  /**
   * .responsibility dt 职责标题
   * font-size: 15px - 减小字号
   */
  .responsibility dt {
    font-size: 15px;
  }

  /**
   * .responsibility dd 职责内容
   * font-size: 13px - 减小字号
   */
  .responsibility dd {
    font-size: 13px;
  }

  /**
   * .requirement dt 要求标题
   * font-size: 15px - 减小字号
   */
  .requirement dt {
    font-size: 15px;
  }

  /**
   * .requirement dd 要求内容
   * font-size: 13px - 减小字号
   */
  .requirement dd {
    font-size: 13px;
  }

  /**
   * .content dt 职位详情标题（兼容旧代码）
   * font-size: 15px - 减小字号
   */
  .content dt {
    font-size: 15px;
  }

  /**
   * .content dd 职位详情内容（兼容旧代码）
   * font-size: 13px - 减小字号
   */
  .content dd {
    font-size: 13px;
  }
}