/* ============================================================
   careers.html 挂绳工牌职位卡片（lanyard badge）
   页面级覆盖：最后加载，不改 components.css。
   卡片规格：--ly-w 200 × 366（沿用原 lanyard 200/366 比例），
   绳区 72px，硬件 SVG 固定 100×96（与原版几何一致）。
   同一时刻只有一张卡有物理动画（js/careers-lanyard.js），
   其余卡片为静态：固定小角度 --rest + SVG 静态绳。
   ============================================================ */

.cr-ly{
  --ly-w: 200px;
  --ly-h: calc(var(--ly-w) * 1.83);       /* 200/366 比例，锁死不漂移 */
  --ly-rope-h: 72px;                       /* 绳区高度 = canvas 绳长 */
  --hw-h: 56px;                            /* 卡身起点（硬件 SVG 内） */
  --hw-svg-h: 96px;
  --hole-r: 4px;                           /* 穿绳孔 */
  --hole-cy: 18px;
  position: relative;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* 静态“挂姿”微倾——绕卡顶（绳端点）旋转，绳底不动，无需逐卡配绳 */
.cr-ly:nth-child(4n+1){ --rest: -2deg; }
.cr-ly:nth-child(4n+2){ --rest: 1.6deg; }
.cr-ly:nth-child(4n+3){ --rest: -1.2deg; }
.cr-ly:nth-child(4n+4){ --rest: 2.4deg; }

.cr-ly:focus-visible{ outline: 3px solid var(--blue-50); outline-offset: 4px; border-radius: 14px; }

/* 试点：可拖拽卡片（当前仅「嵌入式软件实习生」）。拖拽时抬高层级，允许压住邻卡 */
.cr-ly.is-draggable{
  cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none;   /* 代替 pointerdown preventDefault 防选中 */
}
.cr-ly.is-dragging{ cursor: grabbing; z-index: 20; }
.cr-ly.is-dragging .ly-rig{ will-change: transform; }

.ly-stage{
  position: relative;
  display: block;
  width: var(--ly-w);
  height: calc(var(--ly-rope-h) + var(--ly-h));
  margin: 0 auto;
}

/* ---------- 静态绳（hover 激活后淡出，由 canvas 接管） ---------- */
.ly-rope{
  position: absolute; left: 50%; top: 0;
  width: 40px; height: 80px;
  margin-left: -20px;
  z-index: 1;
  overflow: visible;
  /* 与 canvas 绳的投影对齐：canvas 那侧是先描一道 12px 半透明投影再盖上绳身，
     压暗量实测 9.2；CSS drop-shadow 是作用在整个剪影上、不会被绳身盖掉，
     同样参数下压暗量 14.9（重 60%），所以这里把 alpha 从 .28 降到 .17 对齐。 */
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.17));
  /* 回到静止：0s 立即显示。原来这里也是 .15s 淡入，而 canvas 绳是瞬间删除的，
     中间 150ms 只有半透明的深色绳子叠在白底上 → 视觉上"闪一下"（发白）。 */
  transition: opacity 0s;
}
/* 进激活：淡出 150ms，盖住 canvas 首帧还没画出来的那 1 帧空档 */
.ly-stage.is-live .ly-rope{ opacity: 0; transition: opacity .15s linear; }
.ly-canvas{
  position: absolute; left: -120px; top: -20px;
  z-index: 1;
  pointer-events: none;
}

/* ---------- 刚体（物理变换目标 / 翻面目标） ---------- */
.ly-rig{
  position: absolute; left: 50%; top: var(--ly-rope-h);
  width: var(--ly-w); height: var(--ly-h);
  margin-left: calc(var(--ly-w) / -2);
  z-index: 2;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  will-change: transform;
}
/* 空闲态：CSS 接管（静态微倾 + 双击翻面过渡）；激活时由 JS 逐帧内联 */
.cr-ly:not(.is-live) .ly-rig{
  transition: transform .7s cubic-bezier(.3, .7, .3, 1.05);
  transform: perspective(900px) rotate(var(--rest, 0deg));
}
.cr-ly:not(.is-live) .ly-rig.is-flipped{
  transform: perspective(900px) rotate(var(--rest, 0deg)) rotateY(180deg);
}

/* ---------- 金属硬件（同原版分层：后环 z1 / 卡身 z2 / 前环 z5） ---------- */
.ly-hw{
  position: absolute; left: 50%; top: 0;
  width: 100px; height: var(--hw-svg-h);
  margin-left: -50px;
  display: block;
  overflow: visible;
  z-index: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.30)) brightness(.78);
}
.ly-hw--front{
  z-index: 5;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.34)) brightness(1.14);
}

.ly-inner{
  position: absolute; left: 0; right: 0;
  top: var(--hw-h); bottom: 0;
  z-index: 2;
  transform-style: preserve-3d;
}
.ly-face{
  position: absolute; inset: 0;
  z-index: 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ly-face.ly-back{ transform: rotateY(180deg); }

.ly-facebody{
  position: absolute; inset: 0;
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding-bottom: 14px;
  -webkit-mask-image: radial-gradient(circle at 50% var(--hole-cy),
                      transparent 0 var(--hole-r), #000 calc(var(--hole-r) + 0.5px));
  mask-image: radial-gradient(circle at 50% var(--hole-cy),
              transparent 0 var(--hole-r), #000 calc(var(--hole-r) + 0.5px));
  box-shadow:
    0 26px 50px rgba(0,0,0,.22),
    0 6px 14px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 0 0 1px rgba(0,0,0,.10);
}
.ly-facebody > *{ flex: none; }

.ly-face.ly-front .ly-facebody{
  background: linear-gradient(162deg, #fbfcff 0%, #edf1f8 55%, #dde3ef 100%);
  color: #14161c;
}
.ly-face.ly-back .ly-facebody{
  background: #ffffff;
  color: #14161c;
}

/* 穿绳孔缘环 */
.ly-holering{
  position: absolute;
  left: 50%;
  top: calc(var(--hole-cy) - var(--hole-r) - 1px);
  width: calc(var(--hole-r) * 2 + 2px);
  height: calc(var(--hole-r) * 2 + 2px);
  margin-left: calc((var(--hole-r) + 1px) * -1);
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.20);
  box-shadow:
    inset 0 1px 1.5px rgba(0,0,0,.38),
    inset 0 -1px 0 rgba(255,255,255,.32),
    0 1px 0 rgba(255,255,255,.4);
  pointer-events: none;
}
.ly-face.ly-back .ly-holering{
  border-color: rgba(0,0,0,.20);
  box-shadow:
    inset 0 1px 1.5px rgba(0,0,0,.38),
    inset 0 -1px 0 rgba(255,255,255,.32),
    0 1px 0 rgba(255,255,255,.4);
}

/* ---------- 正面内容 ---------- */
.ly-band{
  height: 34px;
  /* 与 logo 方块主色 #004098 同色调：由深到浅仍保持原来的提亮节奏。
     团队配色只改 --band-bg 的作用域（正面），背面恒用这里的默认蓝。 */
  background: var(--band-bg, linear-gradient(100deg, #004098 0%, #2E62AB 55%, #4A7CC0 100%));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
  color: #fff;
}
.ly-photo{
  width: 62px; height: 62px; margin: 10px auto 0;
  border-radius: 50%;
  background: linear-gradient(150deg, #2E62AB, #004098);
  box-shadow: 0 4px 12px rgba(0,64,152,.28), inset 0 0 0 3px rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; letter-spacing: .02em; color: #fff;
}
.ly-name{
  margin: 8px 12px 0; text-align: center;
  font-size: 15.5px; font-weight: 750; line-height: 1.3;
  letter-spacing: .005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ly-sub{
  margin: 3px 12px 0; text-align: center;
  font-size: 10.5px; color: #6b7280; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ly-rows{ margin: auto 15px 0; display: flex; flex-direction: column; gap: 4px; }
.ly-row{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(0,0,0,.14);
}
.ly-row b{ color: #8a90a0; font-weight: 600; letter-spacing: .05em; flex: none; }
.ly-row span{ color: #23262f; font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ly-barcode{
  height: 20px; margin: auto 15px 0;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg,
    #14161c 0 2px, transparent 2px 4px,
    #14161c 4px 5px, transparent 5px 9px,
    #14161c 9px 12px, transparent 12px 14px);
  opacity: .88;
}
.ly-no{
  margin-top: 4px; text-align: center;
  font-size: 8px; letter-spacing: .26em; color: #8a90a0;
}

/* ---------- 背面内容 ---------- */
.ly-logo{
  width: 86px; height: 86px; margin: 18px auto 0;
  padding: 9px;
  background: #fff; border-radius: 8px;
  display: flex;
}
.ly-logo img{ width: 100%; height: 100%; display: block; border-radius: 5px; }
.ly-tip{
  margin: 12px 18px 0; text-align: center;
  font-size: 10px; line-height: 1.7; color: #6b7280;
}
.ly-tip b{ color: #1f2733; display: block; margin-bottom: 5px; font-size: 11px; }
.ly-foot{
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center; font-size: 8px; letter-spacing: .2em; color: #8a90a0;
}

/* ---------- 团队配色（data-team 由 renderRoles 写入） ----------
   销售与商务：深红 #B32428 + 沙金 #D8C9A3
   校园招聘（实习）：深绿 #1F4A3A + 米黄 #F7E7B8
   主色走色条渐变（同 55%/100% 提亮节奏），辅色走团队圆徽（字色改深色保证可读） */
.cr-ly[data-team="Sales & BD"] .ly-face.ly-front .ly-band{
  --band-bg: linear-gradient(100deg, #B32428 0%, #C14B4F 55%, #CD6E71 100%);
}
.cr-ly[data-team="Sales & BD"] .ly-photo{
  background: linear-gradient(150deg, #C14B4F, #B32428);
  color: #fff;
  box-shadow: 0 4px 12px rgba(179,36,40,.28), inset 0 0 0 3px rgba(255,255,255,.55);
}
/* 正面卡身：沙金底（背面仍是纯白） */
.cr-ly[data-team="Sales & BD"] .ly-face.ly-front .ly-facebody{
  background: #D8C9A3;
}
.cr-ly[data-team="Sales & BD"] .ly-face.ly-front .ly-sub,
.cr-ly[data-team="Sales & BD"] .ly-face.ly-front .ly-row b,
.cr-ly[data-team="Sales & BD"] .ly-face.ly-front .ly-no{ color: #6B5B2E; }

.cr-ly[data-team="Early Career"] .ly-face.ly-front .ly-band{
  --band-bg: linear-gradient(100deg, #1F4A3A 0%, #476B5D 55%, #6B877D 100%);
}
.cr-ly[data-team="Early Career"] .ly-photo{
  background: linear-gradient(150deg, #476B5D, #1F4A3A);
  color: #fff;
  box-shadow: 0 4px 12px rgba(31,74,58,.28), inset 0 0 0 3px rgba(255,255,255,.55);
}
/* 正面卡身：米黄底（背面仍是纯白） */
.cr-ly[data-team="Early Career"] .ly-face.ly-front .ly-facebody{
  background: #F7E7B8;
}
.cr-ly[data-team="Early Career"] .ly-face.ly-front .ly-sub,
.cr-ly[data-team="Early Career"] .ly-face.ly-front .ly-row b,
.cr-ly[data-team="Early Career"] .ly-face.ly-front .ly-no{ color: #4A5C48; }

/* ---------- 收口块 .app-cta —— 与全站统一 ----------
   （两端横向收白 + 中部淡蓝光晕 + 垂直白→淡蓝→白渐变）
   与其他页面同一配方，写入本页覆盖层，不改共享样式表 */
.app-cta{
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, #FFFFFF 100%),
    radial-gradient(85% 78% at 50% 46%, rgba(46,107,255,.08) 0%, transparent 44%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 14%, #EDF3FF 46%, #F2F7FF 74%, #FFFFFF 100%);
}
.app-cta .container{
  position: relative; z-index: 1;
  padding-top: 76px; padding-bottom: 76px;
  text-align: center;
}
.app-cta h2{ font-size: clamp(22px, 3vw, 34px); margin: 0 0 12px; color: var(--ink); }
.app-cta p{ font-size: 16px; color: var(--ink-soft); margin: 0 auto 28px; max-width: 560px; }
.app-cta .btn-row{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.app-cta .btn-row .btn{ padding: 12px 28px; }
.app-cta .btn-outline{ border-color: rgba(46,107,255,.45); }
@media (max-width: 560px){
  .app-cta .container{ padding-top: 56px; padding-bottom: 56px; }
  .app-cta h2{ font-size: 24px; }
  .app-cta p{ font-size: 15px; margin-bottom: 22px; }
}

/* 全局渐变 defs（每页一次，卡片硬件 SVG 引用） */
.ly-defs{ position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 响应式 / 无障碍 ---------- */
@media (max-width: 760px){
  .cr-ly{ --ly-w: 176px; }
}
@media (prefers-reduced-motion: reduce){
  .cr-ly:not(.is-live) .ly-rig{ transition: none; }
  .ly-rope{ transition: none; }
}

/* ---------- 单击「被拿起」过场（已推广到全部职位卡片） ----------
   单击判定提交后由 js/careers-lanyard.js 给该卡加 .is-pickup：
   整张工牌像被捏住从挂绳拎起——上浮 + 略放大 + 微旋 + 投影加深，
   动画期间 pointer-events 关掉防重复触发，动画结束后 JS 再跳转详情页。 */
.cr-ly.is-pickup{
  z-index: 30;
  pointer-events: none;
  animation: lyPickup 220ms cubic-bezier(.3,.7,.3,1.05) forwards;
}
@keyframes lyPickup{
  0%   { transform: perspective(900px) translateY(0)      scale(1)    rotate(0deg); }
  55%  { transform: perspective(900px) translateY(-20px)  scale(1.045) rotate(-1.1deg); }
  100% { transform: perspective(900px) translateY(-26px)  scale(1.07)  rotate(-1.6deg); }
}
.cr-ly.is-pickup .ly-facebody{
  box-shadow:
    0 42px 72px rgba(0,0,0,.34),
    0 16px 26px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px rgba(0,0,0,.10);
}
@media (prefers-reduced-motion: reduce){
  .cr-ly.is-pickup{ animation: none; }
}