/* ============================================================
   Forya 校园招聘 —— 共享主题
   首页（index）与子页（requirements / company / project）共用同一套
   设计变量、页面骨架与基础组件，避免各页各写一份导致样式漂移。

   引入约定：本文件必须放在各页面内联 <style> 之前。
   页面专属规则写在内联样式里，靠“后加载”自然覆盖这里的基础样式。
   注意：同一组件的全部断点必须一起放在本文件或一起留在内联，
   不能拆开——否则内联的基准规则会盖掉本文件里更早的媒体查询。
   ============================================================ */

:root {
  --purple: #7438ff;
  --purple-deep: #21133f;
  --teal: #05bdb9;
  --teal-deep: #079f9c;
  --lavender: #eee9ff;
  --ink: #3f3550;
  --muted: #7b7282;
  --line: rgba(75,60,91,.11);
  --paper: #f7f4fa;
  --white: #fff;
  --max: 820px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--purple-deep);
  background: #ece9f7;
}
* { box-sizing: border-box; }
/* 关闭 iOS 横屏字号自动放大，并去掉点击高亮（保留 :active 反馈） */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }

.poster-shell {
  position: relative;
  max-width: var(--max);
  margin: auto;
  padding: 38px clamp(22px, 6vw, 52px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 12%, #fff 0 18%, transparent 39%),
    linear-gradient(155deg, #fff 0 46%, #f1edff 72%, #fff 100%);
  box-shadow: 0 0 45px #2d17442e;
}
.poster-shell::before,
.poster-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}
.poster-shell::before { width: 420px; height: 420px; right: -230px; top: 75px; background: #743bff10; }
.poster-shell::after { width: 500px; height: 240px; left: -280px; bottom: 240px; background: #10c7ca0d; }

/* 手写体点缀，跨页面通用 */
.scribble {
  margin: 0;
  color: #6d5a86;
  font-family: "Kaiti SC", "STKaiti", "Yuanti SC", cursive;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.35;
  transform: rotate(-3deg);
}

/* ---------- 按钮 ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 15px; cursor: pointer; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.button--primary { color: #fff; background: linear-gradient(100deg, var(--purple) 2%, #6a4bff 54%, var(--teal) 100%); box-shadow: 0 14px 32px rgba(116,56,255,.24); }
.button--ghost { color: var(--purple); border: 1.5px solid rgba(116,56,255,.3); background: #fff; }
.button:active { transform: scale(.98); }

/* ---------- 区块通用 ---------- */
.block { position: relative; z-index: 5; padding-top: 62px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #88739e; font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.eyebrow .scribble { margin-left: auto; font-size: 17px; transform: rotate(-2deg); }
h2 { max-width: 580px; margin: 0; font-family: "Arial Rounded MT Bold", "Yuanti SC", "PingFang SC", sans-serif; font-size: clamp(28px, 6.2vw, 42px); font-weight: 700; line-height: 1.18; letter-spacing: -.025em; }
.accent { color: var(--muted); }
.accent--purple { color: var(--purple); }
.accent--teal { color: var(--teal-deep); }
.intro { max-width: 570px; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }

/* ---------- 数据指标 ---------- */
/* 列数与数字字号交给变量：公司页用 2 列，首页速览用 3 列且字号更小 */
.stat-grid { display: grid; grid-template-columns: repeat(var(--stat-cols, 2), minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
.stat { padding: 15px 14px; border-radius: 16px; background: linear-gradient(150deg, #f4f0ff, #eef9f9); }
.stat b { display: block; font-family: "Arial Rounded MT Bold", "Yuanti SC", "PingFang SC", sans-serif; font-size: var(--stat-size, clamp(24px, 6.4vw, 32px)); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; background: linear-gradient(100deg, var(--purple) 6%, var(--teal) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { display: block; margin-top: 5px; color: #6f6484; font-size: 12px; font-weight: 700; }

/* ---------- 关键事实表 ---------- */
/* 一行一项。项目页与首页「项目速览」共用。
   不做多列卡片，是因为「TikTok LIVE」这类值较长，窄屏多列会挤到换行。 */
.facts { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; }
.facts > div { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(150deg, #f4f0ff, #eef9f9); }
.facts dt { flex: none; width: 4.6em; color: #88739e; font-size: 12px; font-weight: 800; }
.facts dd { margin: 0; color: var(--purple-deep); font-size: 14.5px; font-weight: 800; }

/* ============================================================
   多页共用：页面骨架
   子页（requirements / company / project）统一用「返回 + 品牌 → 标题 → 编号卡」
   的结构；首页首屏另有一套 hero，不使用这些类。
   ============================================================ */

/* ---------- 页头（返回 + 品牌） ---------- */
.page-head { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.page-head .logo { width: 156px; max-width: 36vw; height: auto; mix-blend-mode: multiply; }
.back-link { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 9px 16px; border: 1.5px solid rgba(116,56,255,.26); border-radius: 999px; color: var(--purple); background: #fff; text-decoration: none; font-size: 14px; font-weight: 800; }
.back-link:active { transform: scale(.97); }

/* ---------- 子页标题区 ---------- */
/* 子页首屏无需承载人物与待遇卡，故上间距比首页区块更紧凑 */
.page-intro { position: relative; z-index: 5; padding-top: 34px; }
.page-title { max-width: 580px; margin: 0; font-family: "Arial Rounded MT Bold", "Yuanti SC", "PingFang SC", sans-serif; font-size: clamp(30px, 7vw, 46px); font-weight: 700; line-height: 1.16; letter-spacing: -.03em; }

/* ---------- 编号条目卡（含列表） ---------- */
.spec { margin-top: 13px; padding: 21px 19px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: 0 10px 24px #3b16640f; }
.spec-head { display: flex; align-items: center; gap: 11px; }
.spec-no { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(140deg, var(--purple), #6a4bff); font-size: 13px; font-weight: 900; }
.spec-head h2 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.spec-list { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; list-style: none; }
.spec-list li { position: relative; padding-left: 19px; color: var(--ink); font-size: 14px; line-height: 1.78; }
.spec-list li::before { content: ""; position: absolute; left: 3px; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.spec-list strong { font-weight: 800; }

/* ---------- 子页底部行动区 ---------- */
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.page-actions .button { min-height: 54px; padding: 0 26px; font-size: 16px; }

/* ---------- 免责小字 ---------- */
/* 原先只定义在首页内联样式里，子页引用同一个类名却拿不到样式，
   导致同一句话在不同页面字号、颜色不一致；这里统一收到共享层。 */
.legal { margin: 18px 0 0; color: rgba(43,36,66,.46); font-size: 11px; line-height: 1.7; }

/* ---------- 页脚 ---------- */
.footer { padding: 44px 0 130px; color: #9b8ab4; text-align: center; letter-spacing: 8px; }
.footer span,
.footer small { display: block; }
.footer small { margin-top: 8px; font-size: 10px; letter-spacing: 4px; }
/* 三页互链：footer 本身带 8px 字距，导航需显式归零。
   做成分段控件样式（当前页为紫色实心胶囊），比裸链接更明确，也不会退化成
   默认下划线链接 —— 一旦本文件加载失败，外观差异会很明显，便于及时发现。 */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 26px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  letter-spacing: 0;
}
.footer-nav a {
  padding: 9px 16px;
  border-radius: 999px;
  color: #7b6a99;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.footer-nav a:hover { color: var(--purple); }
.footer-nav a[aria-current="page"] { color: #fff; background: linear-gradient(100deg, var(--purple), #6a4bff); }
.footer-nav a[aria-current="page"]:hover { color: #fff; }

/* ---------- 常驻报名按钮 ---------- */
.cta {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex;
  width: min(88%, 620px);
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #7134ff 0%, #7043ff 45%, var(--teal) 100%);
  box-shadow: 0 18px 36px #6635e838;
  cursor: pointer;
  font-family: "Arial Rounded MT Bold", "Yuanti SC", "PingFang SC", sans-serif;
  font-size: clamp(20px, 4.4vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  transform: translateX(-50%);
  transition: opacity .28s ease, transform .28s ease;
}
.cta b { font-size: 1.5em; font-weight: 300; line-height: 1; }
.cta:active { transform: translateX(-50%) scale(.97); }
.cta.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(110px); }

@media (max-width: 600px) {
  .poster-shell { padding: 22px 18px 0; }
  .scribble { font-size: 15px; }
  .block { padding-top: 48px; }
  .eyebrow .scribble { font-size: 12.5px; }
  .cta { min-height: 64px; gap: 14px; padding: 0 20px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .footer { padding: 36px 0 106px; }
  /* 页面骨架 */
  .page-head .logo { width: 124px; }
  .back-link { padding: 8px 13px; font-size: 13px; }
  .page-intro { padding-top: 24px; }
  .spec { padding: 17px 15px; border-radius: 19px; }
  .spec-head h2 { font-size: 16.5px; }
  .spec-list li { font-size: 13.5px; }
  .page-actions .button { flex: 1 1 100%; }
  .legal { font-size: 12px; }
  .facts > div { padding: 11px 12px; }
  .facts dd { font-size: 14px; }
}

/* 导航有 4 项后单行兜不住窄屏，先收紧内边距 */
@media (max-width: 400px) {
  .footer-nav { padding: 3px; gap: 2px; }
  .footer-nav a { padding: 8px 11px; font-size: 12.5px; }
}

@media (max-width: 380px) {
  .poster-shell { padding: 16px 16px 0; }
  .block { padding-top: 40px; }
  /* 320px 下 4 项导航最紧的一档 */
  .footer-nav { padding: 3px 2px; gap: 1px; }
  .footer-nav a { padding: 7px 8px; font-size: 12px; }
}

@media (min-width: 821px) {
  body { padding: 28px 0; }
  .poster-shell { border-radius: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

@media print {
  .cta { display: none; }
}