/* =============================================
   招聘专场首页 - PC端样式
   人体工程学设计：舒适间距、清晰层级、
   良好对比度、流畅动效
   ============================================= */

/* ---- 全局变量 & 基础 ---- */
.zp-page {
  background-color: #f5f5f5;
}

/* ---- Banner 轮播图 ---- */
.zp-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zp-banner.zp-banner-ready {
  opacity: 1;
}
.zp-banner-carousel {
  width: 100%;
}
.zp-banner-carousel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zp-banner-link {
  display: block;
  width: 100%;
  height: 100%;
}
.zp-banner-carousel .el-carousel__indicators--horizontal {
  bottom: 1.04vw;
}
.zp-banner-carousel .el-carousel__indicator--horizontal {
  padding: 0;
}
.zp-banner-carousel .el-carousel__indicator--horizontal:not(:first-of-type) {
  margin-left: 0.52vw;
}
.zp-banner-carousel .el-carousel__button {
  width: 0.63vw;
  height: 0.63vw;
  border-radius: 50%;
  opacity: 0.6;
}
.zp-banner-carousel .is-active .el-carousel__button {
  background-color: #fff;
  opacity: 1;
}
/* 单图时隐藏轮播控件 */
.zp-banner-single .el-carousel__indicators {
  display: none !important;
}
.zp-banner-single .el-carousel__arrow {
  display: none !important;
}

/* ---- 页面专属导航条 ---- */
.zp-nav {
  background-color: #2b3a6b;
  height: 3.65vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zp-nav-inner {
  width: 88.54vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zp-nav-a {
  color: #fff;
  font-size: 1.15vw;
  font-weight: 600;
  letter-spacing: 0.05vw;
  padding: 0.52vw 0;
  position: relative;
  transition: color 0.25s;
  text-decoration: none;
  white-space: nowrap;
}
.zp-nav-a:hover,
.zp-nav-a.active {
  color: #8afaff;
}
.zp-nav-a:hover::after,
.zp-nav-a.active::after {
  content: '';
  position: absolute;
  bottom: -0.26vw;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 0.16vw;
  background: #8afaff;
  border-radius: 2px;
}

/* ---- 内容主体容器 ---- */
.zp-body {
  width: 70vw;
  margin: 0 auto;
  padding: 1.56vw 0 2.6vw;
}

/* ---- 通用板块标题栏 ---- */
.zp-section {
  margin-bottom: 2.08vw;
  scroll-margin-top: 12.5vw;
}
.zp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25vw;
  border-bottom: 2px solid #e4e7ed;
  padding-bottom: 0.78vw;
}
.zp-section-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.26vw;
  overflow: hidden;
}
.zp-section-title-bg {
  display: block;
  height: 2.8vw;
  width: 9vw;
}
.zp-section-title-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.25vw;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.05vw;
  line-height: 1;
}
.zp-more-a {
  font-size: 0.94vw;
  color: #999;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.25s;
}
.zp-more-a:hover {
  color: #0077d3;
}
.zp-more-a::after {
  content: '≫';
  margin-left: 0.26vw;
  font-size: 1.04vw;
}

/* ---- 就业引导地图 + 最新资讯 (两列) ---- */
.zp-map-news {
  display: flex;
  gap: 2.08vw;
}
.zp-map-col {
  flex: 0 0 48%;
}
/* 就业引导地图组件 */
.zp-map-container {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid #d6e4f0;
  border-radius: 0.42vw;
  overflow: hidden;
}
.zp-map-bg {
  display: block;
  width: 100%;
  height: auto;
}
.zp-province {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0;
  color: transparent;
  text-decoration: none;
  white-space: nowrap;
  width: 3.5vw;
  height: 2vw;
  border-radius: 0.21vw;
  transition: background 0.2s;
  cursor: pointer;
  z-index: 1;
}
.zp-province::before {
  display: none;
}
.zp-province:hover {
  background: rgba(0, 119, 211, 0.18);
}
.zp-news-col {
  flex: 1;
}
.zp-news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.zp-news-item {
  padding: 0.68vw 0;
  border-bottom: 1px dashed #e4e7ed;
}
.zp-news-item:last-child {
  border-bottom: none;
}
.zp-news-a {
  font-size: 0.94vw;
  color: #333;
  text-decoration: none;
  line-height: 1.8;
  display: block;
  transition: color 0.2s;
  position: relative;
  padding-left: 0.78vw;
}
.zp-news-a::before {
  content: '■';
  position: absolute;
  left: 0;
  top: 0;
  color: #2b3a6b;
  font-size: 0.52vw;
  line-height: 1.8;
}
.zp-news-a:hover {
  color: #0077d3;
}

/* ---- 热招岗位卡片 (4列2行网格) ---- */
.zp-job-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25vw;
  max-width: 100%;
  overflow: hidden;
}
.zp-job-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.42vw;
  padding: 1.25vw;
  border: 1px solid #ebeef5;
  text-decoration: none;
  transition: box-shadow 0.3s, border-color 0.3s;
  min-width: 0;
}
.zp-job-card:hover {
  box-shadow: 0 0.21vw 1.04vw rgba(0, 119, 211, 0.1);
  border-color: #b3d9ff;
}
.zp-job-name {
  font-size: 1.04vw;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  margin-bottom: 0.42vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zp-job-salary {
  font-size: 1.04vw;
  color: #e66826;
  font-weight: 600;
  margin-bottom: 0.62vw;
}
.zp-job-company {
  font-size: 0.83vw;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.62vw;
}
.zp-job-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.73vw;
  color: #999;
  margin-top: auto;
  padding-top: 0.52vw;
  border-top: 1px solid #f0f0f0;
}
.zp-job-edu {
  background: #f0f7ff;
  color: #0077d3;
  padding: 0.1vw 0.42vw;
  border-radius: 0.16vw;
  font-size: 0.73vw;
}
.zp-job-deadline {
  font-size: 0.73vw;
  color: #bbb;
}

/* ---- 四图卡片网格 (行业/区域/特色/就业指导/政策宣讲/活动风采) ---- */
.zp-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25vw;
}
.zp-img-card {
  display: block;
  border-radius: 0.42vw;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.zp-img-card:hover {
  transform: translateY(-0.31vw);
  box-shadow: 0 0.42vw 1.56vw rgba(0, 119, 211, 0.12);
}
.zp-img-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
.zp-img-card:hover img {
  transform: scale(1.03);
}

/* ---- 直播带岗 (五列) ---- */
.zp-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.04vw;
}
.zp-live-card {
  display: block;
  border-radius: 0.42vw;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  border: 1px solid #ebeef5;
  transition: transform 0.3s, box-shadow 0.3s;
}
.zp-live-card:hover {
  transform: translateY(-0.21vw);
  box-shadow: 0 0.31vw 1.04vw rgba(0, 0, 0, 0.08);
}
.zp-live-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.zp-live-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.zp-live-replay {
  position: absolute;
  bottom: 0.42vw;
  right: 0.42vw;
  background: rgba(0, 119, 211, 0.85);
  color: #fff;
  font-size: 0.68vw;
  padding: 0.16vw 0.52vw;
  border-radius: 0.16vw;
}
.zp-live-info {
  padding: 0.68vw 0.78vw;
}
.zp-live-title {
  font-size: 0.83vw;
  color: #333;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.36vw;
}
.zp-live-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68vw;
  color: #999;
}
.zp-live-source {
  color: #e66826;
}

/* ---- 协作机构 Logo 网格 ---- */
.zp-partners {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.78vw;
}
.zp-partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.17vw;
  border: 1px solid #ebeef5;
  border-radius: 0.26vw;
  background: #fff;
  transition: box-shadow 0.25s;
  overflow: hidden;
}
.zp-partner-item:hover {
  box-shadow: 0 0.1vw 0.52vw rgba(0, 0, 0, 0.08);
}
.zp-partner-item img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
}

/* ---- 无障碍焦点样式 ---- */
.zp-img-card:focus-within,
.zp-live-card:focus-within,
.zp-job-card:focus-within {
  outline: 3px solid #0077d3;
  outline-offset: 2px;
}