/* ══════════════════════════════
   career.css — 就职・转职版块专属样式
   独立系统：不引用/不依赖 rescue.css / medical.css
   仅使用 base.css 提供的站点级设计变量（--bg/--t1/--r-md 等）
   Living Japanese v4.0 SSG — Phase 1（简体中文）
══════════════════════════════ */

/* ────────────────────────────────
   〇、面包屑 / 免责声明（复用medical的视觉语言，保持全站一致）
──────────────────────────────── */

.career-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--t3);
  padding: 14px 16px 6px;
}
.career-breadcrumb a { color: var(--t3); text-decoration: none; }
.career-breadcrumb a:active { opacity: .6; }
.career-breadcrumb [aria-current="page"] { color: var(--t1); font-weight: 500; }

.career-disclaimer {
  font-size: 12.5px;
  color: var(--t3);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 18px;
  padding: 0 16px;
}

/* ────────────────────────────────
   一、入口页（Hub）
   前缀：.career-hub-*
──────────────────────────────── */

.career-hub-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 16px 40px;
}

.career-hub-page h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--t1);
  margin: 8px 0 10px;
  letter-spacing: -0.01em;
}

.career-hub-intro {
  font-size: 14px;
  line-height: 1.7;
  color: var(--t3);
  margin-bottom: 24px;
}

.career-hub-group { margin-bottom: 28px; }

.career-hub-group h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  padding-left: 2px;
}

.career-hub-nav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.career-hub-nav-card {
  display: block;
  border-radius: var(--r-lg);
  padding: 16px 18px;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .1s;
}
.career-hub-nav-card:active { transform: scale(.98); }

.career-hub-nav-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}

.career-hub-nav-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t3);
}

/* interview 组用稍强调的渐变，呼应"面试是最容易紧张的环节"这个语气 */
.career-hub-nav-card--interview {
  background: linear-gradient(135deg, #1a2b4a 0%, #3d1f5e 100%);
  border: none;
  box-shadow: 0 2px 10px rgba(26,43,74,.2);
}
.career-hub-nav-card--interview .career-hub-nav-card-title { color: #fff; }
.career-hub-nav-card--interview .career-hub-nav-card-desc { color: rgba(255,255,255,.72); }

@media (min-width: 480px) {
  .career-hub-nav-grid { grid-template-columns: 1fr 1fr; }
}

/* ────────────────────────────────
   二、文章页
   前缀：.career-article-*
──────────────────────────────── */

.career-article-page {
  background: var(--bg);
  padding: 4px 16px 8px;
  max-width: 640px;
  margin: 0 auto;
}

.career-article-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
  margin: 8px 0 14px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.career-article-intro {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--t2);
  background: var(--surface);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 24px;
}

.career-article-section {
  margin-bottom: 24px;
}

.career-article-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  margin: 0 0 10px;
  line-height: 1.5;
}

.career-article-section p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--t2);
  margin: 0 0 12px;
}
.career-article-section p:last-child { margin-bottom: 0; }

/* 要点小结 */
.career-article-takeaways {
  background: var(--glass);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 28px 0;
}

.career-article-takeaways-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.career-article-takeaways ul {
  margin: 0;
  padding-left: 18px;
}
.career-article-takeaways li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--t1);
  margin-bottom: 6px;
}
.career-article-takeaways li:last-child { margin-bottom: 0; }

/* ────────────────────────────────
   三、文章底部 → 登记页 的引导卡片
   前缀：.career-article-cta-*
   不在文章内嵌表单，只做一个引导卡片，点击跳转到独立的 /career/interest/ 页面
──────────────────────────────── */

.career-article-cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  background: linear-gradient(135deg, #1a2b4a 0%, #3d1f5e 100%);
  box-shadow: 0 2px 10px rgba(26,43,74,.2);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 28px 0 8px;
}
.career-article-cta-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
}
.career-article-cta-title::after {
  content: " →";
}
.career-article-cta-sub {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}

/* ────────────────────────────────
   四、就职版块悬浮banner
   前缀：.career-referral-banner-*
   贴在就职版块全程显示（careerCss=true 的页面），
   独立页 /career/interest/ 自身不显示（用户已在导流终点）。
   样式与medical的浮动banner保持同一套视觉语言，颜色区分不同版块。
──────────────────────────────── */

.career-referral-banner {
  position: fixed;
  bottom: var(--tab-h);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 190;
  background: linear-gradient(135deg, rgba(26,43,74,.96) 0%, rgba(61,31,94,.96) 100%);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.career-referral-banner-text {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.92);
}

.career-referral-banner-cta {
  flex-shrink: 0;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
}
.career-referral-banner-cta:active {
  background: rgba(255,255,255,.24);
}

.career-referral-banner-close {
  flex-shrink: 0;
  order: -1;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

/* ────────────────────────────────
   五、独立登记表单页
   前缀：.career-contact-*  /  .career-consult-*
   与medical独立咨询表单页保持同一套UX成熟度：
   清晰标签+必填标记、逐字段校验反馈、提交中禁用态、
   提交后切换为独立的"已收到"确认视图（不是原地文字替换）
──────────────────────────────── */

.career-contact-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

.career-contact-scenario {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #FF3B30);
  margin: 8px 0 4px;
}

.career-contact-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
  margin: 0 0 8px;
}

.career-contact-subtitle {
  font-size: 14px;
  line-height: 1.7;
  color: var(--t3);
  margin: 0 0 26px;
}

.career-consult-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.career-consult-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--t2);
}
.career-consult-field input,
.career-consult-field select,
.career-consult-field textarea {
  font: inherit;
  font-size: 14px;
  color: var(--t1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  resize: vertical;
}
.career-consult-field input:focus,
.career-consult-field select:focus,
.career-consult-field textarea:focus {
  outline: none;
  border-color: var(--t1);
}

.career-consult-submit {
  align-self: flex-start;
  background: var(--t1);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
}
.career-consult-submit:disabled {
  opacity: .6;
  cursor: default;
}
.career-consult-submit:active:not(:disabled) { opacity: .85; }

.career-consult-field--invalid input,
.career-consult-field--invalid select,
.career-consult-field--invalid textarea {
  border-color: #d64545;
}
.career-consult-field-error {
  font-size: 12.5px;
  color: #d64545;
  margin: 0;
  min-height: 0;
}
.career-consult-field-hint {
  font-size: 12px;
  color: var(--t4);
  margin: 0;
}
.career-consult-required {
  font-size: 11px;
  font-weight: 600;
  color: var(--t4);
}

.career-consult-privacy {
  font-size: 12px;
  line-height: 1.6;
  color: var(--t4);
  margin: 0;
}

.career-consult-form-error {
  font-size: 13px;
  color: #d64545;
  margin: 0;
}

/* 成功确认视图 */
.career-contact-success {
  text-align: center;
  padding: 40px 16px 20px;
}
.career-contact-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(46,163,90,.12);
  color: #2ea35a;
  margin-bottom: 18px;
}
.career-contact-success-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--t1);
  margin: 0 0 10px;
}
.career-contact-success-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--t2);
  max-width: 440px;
  margin: 0 auto 24px;
}
.career-contact-back-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1);
  text-decoration: none;
}

/* ────────────────────────────────
   分享按钮（career文章页末尾）
   与guides.css里的.guides-share-*同名同款式，
   两个CSS文件各自独立引入互不依赖，这里单独复制一份定义
──────────────────────────────── */
.guides-share-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.guides-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  background: rgba(0,0,0,.05);
  border-radius: 999px;
  padding: 8px 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.guides-share-btn:active { opacity: .7; }