/* ============================================================
   careers.html 职位筛选 —— 自定义复选框（多选）
   原型：Uiverse.io @andrew-manzyk 的 .checkbox（隐藏 input + 兄弟选择器
   + SVG stroke-dasharray 描边动画）。按本站约定做了三处适配：
     1. --checkbox-color：white → var(--ink)（浅色底上白字不可见）
     2. font-weight：600 → 500（项目排版只用 400/500）
     3. 方框/对勾用 pathLength 归一化（88 / 30），不必凑实际周长
   页面级覆盖：在 careers-lanyard.css 之后加载，不改 components.css。
   ============================================================ */

.cr-chips{ gap: 12px 20px; }          /* 复选框比 pill chip 占地方，行距放大 */
.checkbox--all{ margin-right: 8px; padding-right: 16px; border-right: 1px solid var(--line); }

.checkbox {
  --checkbox-color: var(--ink);
  --checkbox-size: 18px;
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
  font-size: 15px;                    /* 原版用 size 放大文字，这里文字保持筛选区字号 */
  line-height: 1.5;
  font-weight: 500;
  color: var(--checkbox-color);
  -webkit-tap-highlight-color: transparent;
}

.checkbox input {
  position: absolute;
  pointer-events: none;
  inset: 0;
  opacity: 0;
  margin: 0;
}

.checkbox .checkmark {
  display: flex;
  align-items: center;
  gap: calc(var(--checkbox-size) / 2.5);
  opacity: 0.7;
  transition: opacity 150ms ease, color 150ms ease;
}
.checkbox .checkmark:hover { opacity: 0.85; }
.checkbox input:checked ~ .checkmark { opacity: 1; color: var(--blue); font-weight: 600; }

/* 键盘可达：原生 input 透明但可聚焦，焦点环画在可见的 checkmark 上 */
.checkbox input:focus-visible ~ .checkmark {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.checkbox .checkmark svg {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  flex: none;
}

/* 方框：88 = 描边周长（pathLength 归一），选中时留出 18 的缺口 */
.checkbox .checkmark svg rect {
  stroke-dasharray: 88 0;
  stroke-dashoffset: 73;
  transition: stroke-dasharray 100ms ease;
}
.checkbox input:checked ~ .checkmark svg rect {
  stroke-dasharray: 80 18;
}

/* 对勾：30 = 路径长度，选中时一笔画出 */
.checkbox .checkmark svg polyline {
  stroke-dasharray: 0 30;
  stroke-dashoffset: 1;
  transition: stroke-dasharray 150ms ease;
}
.checkbox input:checked ~ .checkmark svg polyline {
  stroke-dasharray: 30 30;
}

@media (max-width: 560px) {
  .cr-chips{ gap: 10px 16px; }
}

/* ============================================================
   开放职位模块 —— 占满容器宽度
   components.css 里 .cr-roles-wrap 限宽 980px（与页面 .container 1680px
   不对齐，比同区标题 .cr-head 窄一截）。这里放开限宽，与容器左边界对齐。
   注意：工牌卡片是固定 200px 宽（--ly-w，居中在格子里），若沿用
   repeat(3,1fr)，宽屏下每格会被拉到 400px+、卡片周围留大片空白，
   所以列数改为随宽度自适应：
     auto-fill 保留空轨道（末组只有 2 张卡时不会被拉伸到整行宽），
     minmax(200px,1fr) 保证列宽不小于卡片宽，多余空间各列均分。
   1440 视口 ≈ 6 列，1920 视口 ≈ 7 列，窄屏自动降到 1~2 列。
   ============================================================ */
.cr-roles-wrap{ max-width: none; }
.cr-role-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* 保留原设计的小屏单列（components.css 的 ≤560px 规则被上面覆盖了，这里补回） */
@media (max-width: 560px){
  .cr-role-grid{ grid-template-columns: 1fr; }
}