/* 智慧工厂 2027 届校园招聘 — campus.tapai.com
   Tokens copied from services/www-tapai-cc/static/css/input.css light theme
   (this is a single-theme marketing page — no dark-mode toggle, only the
   two fixed dark ACCENT sections `.dark` that already existed in the
   original 长图 design).

   Layout: loads self-hosted Bootstrap 5.3.3 (bootstrap.min.css) first, for
   its grid (.row/.col-*) and .container responsive max-widths (540/720/
   960/1140/1320px at sm/md/lg/xl/xxl). This file loads AFTER it and:
     1. re-zeroes the block-level margins Bootstrap's Reboot sets on
        h1-h6/p/ul/ol (same element-selector specificity as Reboot, so the
        later rule wins the tie — the old `* { margin:0 }` reset alone does
        NOT win against Reboot's more specific `h1, h2, ... { margin-bottom
        }` rules)
     2. defines the brand tokens + every custom component class used here
     3. makes each <section> full-bleed (background spans the full
        viewport) with an inner `.container` centering the actual content —
        this replaces the old fixed `.wrap { max-width: 820px }` that made
        the whole page (including section backgrounds) float as a narrow
        820px column on wide desktops. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #e60023;
  --primary-pressed: #cc001f;
  --ink: #111111;
  --body: #33332e;
  --mute: #62625b;
  --ash: #91918c;
  --hairline: #dadad3;
  --hairline-on-dark: rgba(255, 255, 255, .12);
  --canvas: #ffffff;
  --cream-wash: #fbfbf9;
  --cream-card: #f6f6f3;
  --surface-dark: #262622;
  --surface-dark-card: #30302b;
}

/* Undo Bootstrap Reboot's default spacing on the bare tags this page uses
   (same specificity as Reboot's element selectors — this rule wins the tie
   because it loads after bootstrap.min.css). Everything else uses explicit
   .mt* utility classes below instead of relying on tag defaults. */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; }
ul, ol { padding-left: 0; list-style: none; }
a { text-decoration: none; color: inherit; }

body {
  background: var(--cream-wash);
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont,
    'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   Full-bleed sections. Each <section>/<header>/<footer> spans the full
   viewport width and carries the background color; the Bootstrap
   `.container` immediately inside it centers the actual content at a
   readable width (1140px at ≥1200px viewports, 1320px at ≥1400px) instead
   of the page itself being capped at 820px.
--------------------------------------------------------------------- */
.section, .foot { padding: 64px 0; border-top: 1px solid var(--hairline); }
.section.hero { border-top: 0; }
.section.tone-wash { background: var(--cream-wash); }
.section.tone-card { background: var(--cream-card); }
.section.dark { background: var(--surface-dark); color: #fff; border-top-color: var(--hairline-on-dark); }
.section.dark .h-sec, .section.dark .h-md { color: #fff; }
.section.dark .eyebrow { color: rgba(255, 255, 255, .7); }
.section.dark .p, .section.dark .lead { color: rgba(255, 255, 255, .82); }

.ink { color: var(--ink); }
.mute { color: var(--mute); }
.on-dark { color: #fff; }

.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--mute); }
.h-xl { font-size: 66px; line-height: 1.06; letter-spacing: -1.2px; font-weight: 700; color: var(--ink); }
.h-sec { font-size: 34px; line-height: 1.15; letter-spacing: -1.2px; font-weight: 700; color: var(--ink); }
.h-md { font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--ink); }
/* Bootstrap ships its own `.lead { font-weight: 300 }` utility class — same
   name, same specificity, and it loads first, so anything this rule doesn't
   explicitly override survives. Pin font-weight back to normal explicitly. */
.lead { font-size: 19px; font-weight: 400; line-height: 1.6; color: var(--body); max-width: 650px; }
.p { font-size: 17px; line-height: 1.65; color: var(--body); }
.prose-w { max-width: 660px; }
.prose-w-lg { max-width: 680px; }
.card-sub { font-weight: 600; font-size: 16px; }

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--primary); color: #fff; text-decoration: none;
  border-radius: 16px; padding: 16px 26px; font-size: 18px; font-weight: 700;
  min-height: 44px;
}
.brandrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); font-size: 17px; }
.dot { width: 12px; height: 12px; border-radius: 9999px; background: var(--primary); display: inline-block; flex-shrink: 0; }
.hero-logo { height: 40px; width: auto; display: block; flex-shrink: 0; }

/* Always canvas-white, same reasoning as .card: the "关于塔牌" section
   sits on tone-card (cream-card) background — a cream-card-on-cream-card
   pill would have no visible fill and stop reading as a pill. */
.tag {
  display: inline-block; background: var(--canvas); color: var(--ink);
  border-radius: 9999px; padding: 8px 16px; font-size: 14px; font-weight: 600;
  margin: 4px 6px 4px 0;
}
.tag-line { margin-top: 20px; }
.secnum { font-size: 15px; font-weight: 700; color: var(--primary); letter-spacing: .1em; }
/* Cards are always canvas-white regardless of the section's tone (wash or
   card) — the white card popping against either tinted section background
   is the layering cue that keeps content readable and distinct.
   Bootstrap ships its own `.card` component with the same class name — same
   specificity, and it loads first, so anything this rule doesn't explicitly
   override survives (notably a 1px border this design never had). Zero it
   out explicitly rather than relying on cascade order alone. */
.card { background: var(--canvas); border: 0; border-radius: 16px; padding: 32px; }
.card-lg { background: var(--canvas); border-radius: 32px; padding: 40px; }
.stat { background: var(--canvas); border-radius: 16px; padding: 24px 26px; height: 100%; }
.stat .n { font-size: 38px; font-weight: 700; letter-spacing: -1px; color: var(--ink); line-height: 1; white-space: nowrap; }
.stat .l { font-size: 14px; color: var(--mute); margin-top: 10px; line-height: 1.45; }

.list li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.65; color: var(--body); margin-top: 12px; }
.list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 9999px; background: var(--ink); }
.section.dark .list li::before { background: #fff; }
.section.dark .list li { color: rgba(255, 255, 255, .82); }

.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; } .mt40 { margin-top: 40px; }

.role-badge { font-size: 14px; font-weight: 700; color: #fff; background: var(--ink); border-radius: 9999px; padding: 6px 14px; white-space: nowrap; display: inline-block; }
.kv { font-size: 16px; line-height: 1.65; }

.dcard { background: var(--surface-dark-card); border-radius: 16px; padding: 28px; height: 100%; }
.dcard .h-md { font-size: 20px; }
.dcard .p { font-size: 15px; margin-top: 10px; line-height: 1.6; }
.dnum { font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: .1em; }

.ladderbox { background: var(--cream-card); border-radius: 32px; padding: 24px 24px 28px; margin-top: 20px; }
.ladder { display: grid; grid-template-columns: 1fr; gap: 10px; }
.step { display: flex; align-items: center; gap: 16px; background: var(--canvas); border-radius: 16px; padding: 16px 20px; min-height: 44px; }
.step .lv { font-size: 13px; font-weight: 700; color: var(--mute); width: 52px; flex-shrink: 0; }
.step .nm { font-size: 18px; font-weight: 700; color: var(--ink); }
.step.top { background: var(--ink); }
.step.top .nm { color: #fff; } .step.top .lv { color: rgba(255, 255, 255, .6); }
.arrow { text-align: center; color: var(--ash); font-size: 15px; font-weight: 700; line-height: 1; margin: 2px 0; }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.flow .n {
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: 9999px;
  padding: 11px 20px; font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
}
.flow .sep { color: var(--ash); font-weight: 700; }
.flow .n.on { background: var(--primary); color: #fff; border-color: var(--primary); }

.tl .c { background: var(--canvas); border-radius: 16px; padding: 22px; height: 100%; }
.tl .d { font-size: 15px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.tl .t { font-size: 16px; color: var(--body); margin-top: 8px; line-height: 1.5; }

.applycol { display: grid; gap: 12px; }
.applyrow { display: flex; gap: 16px; background: var(--surface-dark-card); border-radius: 16px; padding: 22px 24px; align-items: center; }
.applyrow .i {
  font-size: 15px; font-weight: 700; color: #fff; background: var(--primary);
  border-radius: 9999px; width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.applyrow .tx { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.applyrow .tx b { color: #fff; }

.foot { background: var(--surface-dark); color: #fff; border-top-color: var(--hairline-on-dark); }
.foot .b { font-size: 20px; font-weight: 700; }
.foot .s { font-size: 14px; color: rgba(255, 255, 255, .7); margin-top: 10px; line-height: 1.7; }

.link-inline { color: var(--primary-pressed); text-decoration: underline; }
.on-dark-link { color: #ff8a8f; }

/* JD 展开/折叠详情（原生 <details>，零 JS） — 跨两栏全宽，不挤在单栏卡片内 */
.jd-detail {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 8px 24px;
}
.jd-detail summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  padding: 16px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
.jd-detail summary::-webkit-details-marker { display: none; }
.jd-detail summary::before { content: "+ "; color: var(--primary); font-weight: 700; }
.jd-detail[open] summary::before { content: "− "; }
.jd-body { padding: 8px 0 28px; max-width: 68ch; }
.jd-body h4 { font-size: 20px; font-weight: 700; color: var(--ink); }
.jd-body .jd-eyebrow { font-size: 14px; margin-top: 6px; }
.jd-body h5 { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 24px; }
.jd-body .jd-list { margin-top: 12px; padding-left: 22px; list-style: decimal; }
.jd-body .jd-list li { margin-top: 10px; }

/* ---------------------------------------------------------------------
   Responsive breakpoints. Bootstrap's own grid (.row/.col-md-*) already
   collapses two/four/three-column layouts to a single column below `md`
   (768px) — the rules below only handle what Bootstrap doesn't: brand
   typography scaling and section padding.
--------------------------------------------------------------------- */

/* tablet: 640–959px */
@media (max-width: 959px) {
  .section, .foot { padding: 48px 0; }
  .h-xl { font-size: 48px; }
  .h-sec { font-size: 28px; }
  .stat { padding: 20px 16px; }
  .stat .n { font-size: 28px; }
}

/* mobile: < 640px */
@media (max-width: 639px) {
  .section, .foot { padding: 32px 0; }
  .h-xl { font-size: 36px; }
  .h-sec { font-size: 24px; }
  .hero-logo { height: 32px; }
  .flow { justify-content: flex-start; }
  .applyrow { padding: 18px; }
  .jd-detail { padding: 4px 16px; }
}

/* narrow phones: < 380px */
@media (max-width: 379px) {
  .h-xl { font-size: 30px; }
  .section, .foot { padding: 24px 0; }
  .stat { padding: 18px 14px; }
  .stat .n { font-size: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .jd-detail[open] .jd-body { animation: jd-reveal .15s ease-out; }
}
@keyframes jd-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
