/* 职位列表页 - 网站主色 #e85d3a + 现代化设计 */
@charset "UTF-8";

/* 页面容器 */
.jl-page{background:var(--color-bg);min-height:100vh;padding-bottom:48px;}
.jl-container{max-width:1200px;margin:0 auto;padding:0 24px;}

/* 面包屑 */
.jl-breadcrumb{padding:16px 0;font-size:var(--font-size-sm);color:var(--color-text-muted);}
.jl-breadcrumb a{color:var(--color-text-muted);transition:color var(--transition-base);}
.jl-breadcrumb a:hover{color:var(--color-primary);}
.jl-breadcrumb-sep{margin:0 6px;color:#ddd;}

/* 筛选栏 - 紧凑单行布局 - 样式已移至global.css统一处理 */

/* 搜索栏 */
.jl-search-bar{margin-bottom:20px;}
.jl-search-form{display:flex;max-width:640px;margin:0 auto;}
.jl-search-input{flex:1;height:48px;padding:0 20px;border:2px solid var(--color-border);border-right:none;border-radius:var(--radius-xl) 0 0 var(--radius-xl);font-size:var(--font-size-base);outline:none;transition:all var(--transition-base);background:#fff;backdrop-filter:none;}
.jl-search-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(232,93,58,0.08);}
.jl-search-input::placeholder{color:#bbb;}
.jl-search-btn{display:flex;align-items:center;gap:6px;padding:0 24px;height:48px;border:2px solid var(--color-primary);border-radius:0 var(--radius-xl) var(--radius-xl) 0;background:linear-gradient(135deg,#e85d3a,#e85d2a);color:#fff;font-size:var(--font-size-md);font-weight:600;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;box-shadow:0 4px 12px rgba(232,93,58,0.2);}
.jl-search-btn:hover{background:linear-gradient(135deg,#b8320a,#e85d3a);border-color:#b8320a;box-shadow:0 6px 16px rgba(232,93,58,0.3);transform:translateY(-1px);}
.jl-search-btn:active{transform:scale(0.97) translateY(0);}

/* 区块标题 */
.jl-section-header{display:flex;align-items:center;justify-content:space-between;padding:24px 0 16px;}
.jl-section-title{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text-title);display:flex;align-items:center;gap:10px;}
.jl-section-title svg{flex-shrink:0;}
.jl-list-count{font-size:var(--font-size-sm);color:var(--color-text-muted);}

/* ================================================ */
/* 职位卡片 - LinkedIn/Upwork 横向标准结构            */
/* ================================================ */
.jl-card-grid{display:flex;flex-direction:column;gap:10px;}

/* 卡片核心 - 大站风：内容充实，留白合理 */
.jl-card{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:32px;
  align-items:center;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  padding:22px 28px;
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
  cursor:default;
  color:inherit;
  text-decoration:none;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  min-height:156px;
}

/* Hover：边框加深+微上浮（LinkedIn风） */
.jl-card:hover{
  border-color:rgba(0,0,0,0.16);
  background:#fafafa;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}

/* Active：微缩 */
.jl-card:active{transform:scale(0.998);}

/* 置顶卡片 - 微妙标识 */
.jl-card-sticky{border-left:3px solid var(--color-primary);}
.jl-card-sticky::before{display:none;}

/* 删除顶部渐变条 */
.jl-card::before{display:none !important;}

/* 链接重置 */
.jl-card-title-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px;flex:1;min-width:0;}

/* 左侧信息区 - 行间紧凑、内容充实 */
.jl-card-info{display:flex;flex-direction:column;gap:14px;min-width:0;}

/* 标题行 */
.jl-card-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:0;}
.jl-card-title{
  font-size:19px;
  font-weight:600;
  color:#1a1a1a;
  line-height:1.4;
  letter-spacing:-0.01em;
  transition:color 0.2s;
}
.jl-card:hover .jl-card-title{color:var(--color-primary);}

/* 标签徽章 - 紧凑 */
.jl-card-badge{padding:2px 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:500;line-height:18px;white-space:nowrap;letter-spacing:0.02em;}
.jl-card-badge-top{background:linear-gradient(135deg,#e85d3a,#e85d2a);color:#fff;}
.jl-card-badge-urgent{background:rgba(220,60,40,0.08);color:#dc3c28;font-weight:600;}
.jl-card-badge-hot{background:rgba(232,93,58,0.06);color:var(--color-primary);}
.jl-card-badge-new{background:rgba(82,196,26,0.08);color:#52c41a;font-weight:600;}

/* 公司行 - Logo 增大 */
.jl-card-company{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.jl-card-logo{
  width:40px;
  height:40px;
  border-radius:8px;
  object-fit:contain;
  background:#fafafa;
  flex-shrink:0;
  padding:4px;
}
.jl-card-company-name{font-size:15px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.2s;font-weight:500;max-width:240px;}
.jl-card:hover .jl-card-company-name{color:var(--color-primary);}
.jl-card-recruit{display:inline-block;padding:3px 10px;background:rgba(232,93,58,0.08);color:var(--color-primary);font-size:12px;border-radius:4px;line-height:20px;white-space:nowrap;font-weight:500;}
/* 企业已认证徽章 - 蓝色 */
.jl-card-verify{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;background:rgba(22,119,255,0.08);color:#1677ff;font-size:11px;border-radius:4px;line-height:18px;font-weight:500;white-space:nowrap;}
.jl-card-verify svg{width:12px;height:12px;}

/* 元信息行 - LinkedIn 风格：图标+文字标签，有间距有层次 */
.jl-card-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;line-height:26px;}
.jl-card-meta-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#555;
  font-size:14px;
  line-height:26px;
  white-space:nowrap;
  letter-spacing:0.01em;
  padding:0;
  font-weight:400;
}
.jl-card-meta-item svg{
  width:15px;
  height:15px;
  flex-shrink:0;
  color:#999;
  display:inline-block;
  vertical-align:middle;
  position:relative;
  top:-1px;
}
.jl-card-meta-item:last-child{color:#999;font-size:13px;margin-left:2px;}
/* 单独的时间项：与图标项视觉区分 */
.jl-card-meta-item.jl-card-time{color:#999;font-size:13px;}
/* 行业/规模标签 - 紫色调，区分于图标项 */
.jl-card-meta-tag{background:rgba(114,46,209,0.06);color:#722ed1;padding:2px 8px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;line-height:20px;gap:0;}
.jl-card-meta-tag.jl-card-meta-nature{background:rgba(245,34,45,0.06);color:#1677ff;}
.jl-card-meta-divider{display:none;}

/* 福利标签 - 较大更醒目 */
.jl-card-welfares{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px;}
.jl-welfare{display:inline-block;padding:4px 12px;font-size:13px;color:#666;background:#f5f5f7;border-radius:14px;white-space:nowrap;line-height:22px;font-weight:500;}
.jl-welfare-empty{color:#bbb;background:#fafafa;}

/* 右侧：薪资 + 操作 */
.jl-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0;min-width:160px;}
.jl-card-salary{
  font-size:26px;
  font-weight:700;
  color:var(--color-primary);
  white-space:nowrap;
  line-height:1.2;
  letter-spacing:-0.02em;
  font-family:var(--font-family-mono);
}
.jl-card-salary-unit{font-size:14px;color:#999;font-weight:400;font-family:var(--font-family);margin-left:2px;}
.jl-card-actions{display:flex;gap:8px;align-items:center;}
.jl-card-apply{
  font-size:14px;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 22px;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-gradient));
  cursor:pointer;
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
  line-height:22px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  box-shadow:0 2px 8px rgba(232,93,58,0.18);
}
.jl-card-apply:hover{background:linear-gradient(135deg,var(--color-primary-hover),var(--color-primary));transform:translateY(-1px);box-shadow:0 4px 14px rgba(232,93,58,0.32);}
.jl-card-apply:active{transform:scale(0.97);}
.jl-card-apply.jl-applied{background:#f0f0f0;color:#999;box-shadow:none;cursor:default;}
/* 沟通按钮 - 独立图标，蓝色调 */
.jl-card-chat{
  width:42px;
  height:42px;
  border:1px solid var(--color-secondary);
  border-radius:8px;
  background:var(--color-secondary-bg);
  color:var(--color-secondary);
  cursor:pointer;
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
}
.jl-card-chat:hover{background:var(--color-secondary);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,119,255,0.25);}
.jl-card-chat:active{transform:scale(0.95);}
.jl-card-chat svg{display:block;}
.jl-card-detail{
  font-size:14px;
  color:#555;
  border:1px solid #e0e0e0;
  border-radius:8px;
  padding:9px 18px;
  background:#fff;
  cursor:pointer;
  transition:all 0.2s;
  line-height:22px;
  font-weight:500;
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.jl-card-detail:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(232,93,58,0.02);}

/* 底部（隐藏，时间放meta） */
.jl-card-footer{display:none;}
.jl-card-time{font-size:12px;color:#999;}
.jl-card-status-hiring{color:#52c41a;background:rgba(82,196,26,0.08);padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;}
.jl-card-sticky-badge{display:none;}

/* 匹配度环形 - Hired 风格 */
.jl-match-score{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  background:rgba(232,93,58,0.04);
  border-radius:6px;
  margin-bottom:6px;
}
.jl-match-ring{width:24px;height:24px;flex-shrink:0;}
.jl-match-ring-bg{fill:none;stroke:#f0f0f0;stroke-width:3;}
.jl-match-ring-fg{fill:none;stroke:var(--color-primary);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray 0.6s ease;}
.jl-match-percent{font-size:12px;font-weight:600;color:var(--color-primary);font-family:var(--font-family-mono);}

/* 空状态 */
.jl-empty{text-align:center;padding:80px 0;color:var(--color-text-muted);}
.jl-empty svg{margin-bottom:16px;opacity:.4;}
.jl-empty p{font-size:var(--font-size-md);margin-bottom:8px;}
.jl-empty .jl-empty-sub{font-size:var(--font-size-sm);color:#bbb;}
.jl-empty-title{font-size:18px;color:var(--color-text-title);margin:0 0 8px;font-weight:600;}
.jl-empty-desc{font-size:14px;color:var(--color-text-muted);margin:0;}
.jl-recommend-section{margin-top:24px;}

/* 分页 */
.jl-pagination{display:flex;justify-content:center;padding:32px 0;}
.jl-pagination ul.pagination{display:flex;gap:6px;align-items:center;list-style:none;padding:0;margin:0;flex-wrap:wrap;}
.jl-pagination li{list-style:none;display:inline-block;}
.jl-pagination a,.jl-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:1px solid var(--color-border);border-radius:8px;font-size:14px;color:var(--color-text-body);transition:all var(--transition-base);text-decoration:none;line-height:1;box-sizing:border-box;}
.jl-pagination a:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-lighter);}
.jl-pagination .active,.jl-pagination .current{background:linear-gradient(135deg,#e85d3a,#e85d2a);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 2px 6px rgba(232,93,58,0.2);}
.jl-pagination .disabled{color:#ccc;cursor:default;pointer-events:none;}

/* 动画 */
@keyframes jlFadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* 响应式 - 平板 */
@media(max-width:1024px){
  .jl-card{grid-template-columns:1fr;gap:16px;}
  .jl-card-right{flex-direction:row;align-items:center;justify-content:space-between;min-width:0;}
}

/* 响应式 - 手机（小红书卡片风） */
@media(max-width:767px){
  .jl-page{padding-bottom:12px;}
  .jl-container{padding:0 12px;}
  /* 面包屑 - 移动端作为页面标题导航 */
  .jl-breadcrumb{display:flex;align-items:center;padding:12px 0 8px;font-size:13px;color:#999;}
  .jl-breadcrumb a{color:#999;}
  .jl-breadcrumb a:hover{color:var(--color-primary);}
  .jl-breadcrumb-sep{margin:0 4px;color:#ccc;}
  .jl-breadcrumb span:last-child{color:#333;font-weight:600;}

  /* Hero横幅 - 紧凑一行 */
  .list-hero{border-radius:10px;padding:12px 14px;margin-bottom:8px;}
  .list-hero-title{font-size:17px;}
  .list-hero-desc{display:none;}
  .list-hero-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;}

  /* 区块标题 */
  .jl-section-header{padding:14px 4px 10px;}
  .jl-section-title{font-size:16px;font-weight:600;}
  .jl-list-count{font-size:12px;color:#999;}

  /* ===== 卡片 - 国际大站风(LinkedIn/Indeed) ===== */
  .jl-card-grid{gap:10px;}

  /* 卡片：保持grid 1fr auto布局，薪资在右侧 */
  .jl-card{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:14px !important;
    align-items:center !important;
    background:#fff;
    border:none !important;
    border-radius:14px !important;
    padding:16px !important;
    box-shadow:0 1px 8px rgba(0,0,0,0.04) !important;
    cursor:default;
    min-height:0 !important;
    position:relative;
    overflow:hidden;
    transition:all .2s ease;
  }
  .jl-card::before{display:none !important;}
  .jl-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.06) !important;transform:none !important;border-color:transparent !important;}
  .jl-card:active{transform:scale(0.99) !important;}

  /* 置顶卡片 - 微妙标识 */
  .jl-card-sticky{background:linear-gradient(135deg,#fffbf5,#fff) !important;}

  /* 左侧信息区 */
  .jl-card-info{gap:8px;padding:0 !important;min-width:0;}

  /* 第一行：标题 */
  .jl-card-header{display:block;gap:0;margin-bottom:0;}
  .jl-card-title-link{display:block;}
  .jl-card-title{
    font-size:16px;font-weight:600;line-height:22px;
    color:#1a1a1a;
    letter-spacing:-0.01em;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* 第二行：公司信息 - 极简 */
  .jl-card-company{gap:6px;margin-top:0;align-items:center;}
  .jl-card-logo{width:18px;height:18px;border-radius:4px;border:none;vertical-align:middle;flex-shrink:0;}
  .jl-card-company-name{font-size:13px;color:#555;font-weight:500;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw;}
  .jl-card-recruit{font-size:11px;padding:1px 6px;color:#fff;background:linear-gradient(135deg,#e85d3a,#e85d2a);border-radius:3px;line-height:16px;flex-shrink:0;font-weight:500;}

  /* 第三行：关键元信息 - 小标签 */
  .jl-card-meta{gap:6px;flex-wrap:wrap;margin-top:2px;}
  .jl-card-meta-item{
    font-size:11px;color:#777;
    padding:2px 8px;
    background:#f5f5f7;
    border-radius:4px;
    gap:0;
    display:inline-flex;align-items:center;
    line-height:16px;
    font-weight:500;
  }
  .jl-card-meta-item svg{display:none;}
  .jl-card-status-hiring{background:rgba(82,196,26,0.1);color:#389e0d;font-weight:600;}

  /* 第四行：福利标签 - 占据info区底部 */
  .jl-card-welfares{gap:4px;margin-top:2px;}
  .jl-welfare{
    font-size:11px;padding:2px 8px;line-height:16px;
    border-radius:4px;
    background:#faf6f2;color:#c2783d;
    border:1px solid rgba(232,93,58,0.1);
    font-weight:500;
  }

  /* 右侧区域 - 独立列，垂直居中 */
  .jl-card-right{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    min-width:auto !important;
    gap:6px !important;
    padding:0 !important;
    border:none !important;
    flex-shrink:0;
  }
  .jl-card-salary{
    font-size:18px;font-weight:700;line-height:24px;
    color:#e85d3a;
    background:none;
    padding:0;
    box-shadow:none;
    white-space:nowrap;
    font-family:var(--font-family-mono);
    letter-spacing:-0.02em;
  }
  .jl-card-actions{display:flex !important;gap:6px !important;flex-direction:row !important;align-items:center !important;}
  .jl-card-apply{display:none !important;}
  .jl-card-chat{width:36px;height:36px;border-radius:8px;}
  .jl-card-detail{display:none !important;}
  .jl-match-score{display:none !important;}

  /* 搜索 */
  .jl-search-form{max-width:100%;}
  .jl-search-input{height:40px;border-radius:20px 0 0 20px;padding:0 14px;font-size:14px;}
  .jl-search-btn{height:40px;border-radius:0 20px 20px 0;padding:0 18px;}

  /* 分页 - 移动端紧凑模式已在global.css定义，此处重置本文件PC端样式 */
  .jl-pagination a,.jl-pagination span{min-width:auto;height:auto;font-size:auto;padding:auto;border-radius:auto;}
  .jl-pagination .active,.jl-pagination .current{background:none !important;color:inherit !important;border-color:transparent !important;font-weight:600 !important;box-shadow:none !important;}
  .jl-pagination li.active{background:none !important;border:none !important;box-shadow:none !important;}
  .jl-pagination li.active span{background:var(--color-primary,#e85d3a) !important;color:#fff !important;border:none !important;border-radius:20px !important;box-shadow:none !important;}
}

/* 响应式 - 小手机 */
@media(max-width:480px){
  .jl-card{padding:12px 14px !important;gap:10px !important;}
  .jl-card-title{font-size:15px;}
  .jl-card-salary{font-size:16px;}
  .jl-card-meta-item{font-size:10px;padding:1px 5px;}
}