/* 碳基社区 2.0 · 首页（电脑版） */

/* ---------- 首屏 ----------
 * 和导航、横幅、卡片同宽：左右边缘都对齐内容列（最大 1200px）。
 * 色块、吉祥物、左侧入口都从内容边缘（var(--tj-gutter)）往里定位，不超出这条线。
 */
.hm-hero {
  position: relative;
  max-width: calc(var(--tj-container) + var(--tj-gutter) * 2);
  margin: 0 auto;
  padding: var(--tj-s10) var(--tj-gutter) var(--tj-s9);
  text-align: center;
}
.hm-hero__blob { position: absolute; z-index: 0; }
.hm-hero__blob--main {
  right: var(--tj-gutter);
  top: 170px;
  width: 260px;
  height: 230px;
  border-radius: 52% 48% 60% 40% / 55% 45% 55% 45%;
  background: var(--tj-lilac-2);
}
.hm-hero__blob--left {
  left: var(--tj-gutter);
  bottom: var(--tj-s6);
  width: 180px;
  height: 160px;
  border-radius: 50%;
  background: var(--tj-lilac);
}
.hm-hero__dot { position: absolute; z-index: 0; border-radius: 50%; }
.hm-hero__dot--sky { left: 22%; top: 48px; width: 64px; height: 64px; background: var(--tj-sky); }
.hm-hero__dot--lilac { right: 28%; top: 36px; width: 26px; height: 26px; background: var(--tj-lilac-2); }
.hm-hero__mascot {
  position: absolute;
  z-index: 1;
  right: calc(var(--tj-gutter) + 40px);
  top: 128px;
  width: 180px;
  height: auto;
}
.hm-hero__inner { position: relative; z-index: 2; }
.hm-hero__title {
  font-family: var(--tj-font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.hm-hero__title em {
  font-family: var(--tj-font-num);
  font-size: 0.8em;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.05em;
}
.hm-hero__sub { margin-top: var(--tj-s5); font-size: var(--tj-fs-lead); color: var(--tj-ink-2); }
.hm-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tj-s3); margin-top: var(--tj-s7); }

.hm-club {
  display: inline-flex;
  align-items: center;
  gap: var(--tj-s4);
  margin-top: var(--tj-s7);
  padding: var(--tj-s3) var(--tj-s5) var(--tj-s3) var(--tj-s3);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--tj-line-ink);
  border-radius: var(--tj-r-card);
  box-shadow: var(--tj-shadow-float);
  text-align: left;
  transition: border-color 0.2s;
}
.hm-club:hover { border-color: var(--tj-ink); }
.hm-club img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--tj-wash); }
.hm-club span { display: grid; gap: 2px; }
.hm-club b { font-size: 15px; }
.hm-club small { font-size: var(--tj-fs-small); color: var(--tj-muted); line-height: 1.5; }
.hm-club strong { color: var(--tj-ink); }

/* 左侧快捷入口：贴内容列左边缘，和导航左端对齐 */
.hm-rail { position: absolute; left: var(--tj-gutter); top: 200px; z-index: 3; display: grid; justify-items: start; gap: 10px; }
.hm-rail__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--tj-s4);
  border-radius: var(--tj-r-pill);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--tj-shadow-float);
  transition: transform 0.2s;
}
.hm-rail__item::after { content: "›"; font-size: 18px; line-height: 1; }
.hm-rail__item:hover { transform: translateX(3px); }
.hm-rail__item--butter { background: var(--tj-butter); }
.hm-rail__item--lilac { background: var(--tj-lilac); }

/* ---------- 数字条 ---------- */
.hm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: var(--tj-s8) 0 0;
  border-block: 1px solid var(--tj-line);
}
.hm-stats div { display: flex; flex-direction: column-reverse; align-items: center; padding: var(--tj-s5) var(--tj-s2); }
.hm-stats div + div { border-left: 1px solid var(--tj-line); }
.hm-stats dd {
  margin: 0;
  font-family: var(--tj-font-num);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.hm-stats dd:not(.tj-num) { font-family: var(--tj-font-display); font-weight: 900; font-size: 34px; }
.hm-stats dt { margin-top: var(--tj-s1); font-size: var(--tj-fs-small); color: var(--tj-muted); }

/* ---------- 业务板块 ---------- */
.hm-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tj-s5); }
.hm-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tj-s3);
  min-height: 220px;
  padding: var(--tj-s7);
  border-radius: var(--tj-r-card);
}
.hm-service h3 { font-family: var(--tj-font-display); font-size: var(--tj-fs-h3); font-weight: 900; letter-spacing: -0.02em; line-height: 1.3; }
.hm-service p { max-width: 30em; font-size: var(--tj-fs-body); line-height: 1.7; color: var(--tj-ink-2); }
.hm-service .tj-link-arrow { margin-top: auto; }
.hm-service--sky { background: var(--tj-sky); }
.hm-service--lilac { background: var(--tj-lilac); }
.hm-service--apricot { background: var(--tj-apricot); }
.hm-service--mint { background: var(--tj-mint); }

/* ---------- 热门活动：左边固定 1 个，右边 3 个轮播 ----------
 * 左列宽度 = (总宽 - 3 个间距) / 4，右边轨道里每张卡片算出来也正好是这个宽度，4 张看起来一样大。
 */
.hm-hot {
  display: grid;
  grid-template-columns: calc((100% - 3 * var(--tj-s5)) / 4) minmax(0, 1fr);
  gap: var(--tj-s5);
  align-items: stretch;
}
.hm-hot__pin, .hm-hot__slot { display: flex; }
.hm-hot__pin > .tj-card, .hm-hot__slot > .tj-card { flex: 1; min-width: 0; }
.hm-hot__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--tj-s5)) / 3);
  gap: var(--tj-s5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hm-hot__track::-webkit-scrollbar { display: none; }
.hm-hot__slot { scroll-snap-align: start; }

/* ---------- 企客松成果：3:4 卡片轮播，一排约 4.4 张，露出下一张 ---------- */
.hm-case-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * var(--tj-s4)) / 4.4);
  gap: var(--tj-s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hm-case-track::-webkit-scrollbar { display: none; }
.hm-case-slot { display: flex; scroll-snap-align: start; }
.hm-case-slot > .tj-card { flex: 1; min-width: 0; }
.tj-case-card .tj-card__title { min-height: 0; -webkit-line-clamp: 1; }
.tj-case-card .tj-card__cover .tj-chip { top: 10px; bottom: auto; }
.tj-case-card { padding-bottom: var(--tj-s4); }

/* ---------- 人才 + 需求 ---------- */
.hm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tj-s9); }
.hm-talents { display: grid; gap: var(--tj-s3); }
.hm-talent {
  display: flex;
  align-items: center;
  gap: var(--tj-s4);
  padding: var(--tj-s4);
  border: 1px solid var(--tj-line-ink);
  border-radius: var(--tj-r-card);
  transition: border-color 0.2s;
}
.hm-talent:hover { border-color: var(--tj-ink); }
.hm-talent .tj-avatar { width: 48px; height: 48px; font-size: 18px; flex: none; }
.hm-talent__body { display: grid; gap: 2px; min-width: 0; }
.hm-talent__body b { font-size: 16px; font-weight: 600; }
.hm-talent__body small { font-size: var(--tj-fs-small); color: var(--tj-muted); }
.hm-talent__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hm-talent__tags .tj-chip { height: 24px; padding: 0 10px; font-size: 12px; }

.hm-demands { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tj-line); }
.hm-demands li { border-bottom: 1px solid var(--tj-line); }
.hm-demands a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px var(--tj-s4);
  padding: var(--tj-s4) var(--tj-s1);
  transition: background-color 0.15s;
}
.hm-demands a:hover { background: var(--tj-wash); }
.hm-demands__title { font-size: 16px; font-weight: 600; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-demands__meta { grid-column: 1; display: flex; align-items: center; gap: var(--tj-s3); font-size: 12px; color: var(--tj-muted); }
.hm-demands__meta .tj-chip { height: 22px; padding: 0 8px; font-size: 11px; }
.hm-demands__budget { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 16px; font-weight: 700; }
.hm-demands .tj-empty { border: 0; }

/* ---------- 加入社群（全页唯一的黑色块） ---------- */
.hm-join {
  position: relative;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tj-s8);
  padding: var(--tj-s9) var(--tj-s9) var(--tj-s9) 0;
  overflow: hidden;
  background: var(--tj-ink);
  color: #fff;
  border-radius: var(--tj-r-panel);
}
.hm-join__sun {
  position: absolute;
  left: -60px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--tj-butter);
}
.hm-join__mascot { position: relative; justify-self: center; width: 170px; height: auto; margin-bottom: calc(var(--tj-s9) * -1); align-self: end; }
.hm-join__body { position: relative; }
.hm-join__body p { margin-top: var(--tj-s4); max-width: 28em; font-size: var(--tj-fs-body); color: rgba(255, 255, 255, 0.72); }
.hm-join__qr { position: relative; margin: 0; padding: var(--tj-s3); background: #fff; border-radius: var(--tj-r-card); text-align: center; color: var(--tj-ink); }
.hm-join__qr img { width: 160px; height: 160px; object-fit: cover; border-radius: var(--tj-r-sm); }
.hm-join__qr figcaption { margin-top: var(--tj-s2); font-size: 12px; color: var(--tj-muted); }

/* ---------- 响应式（电脑版模板在平板上也会出现） ---------- */
@media (max-width: 1199px) {
  .hm-hot { grid-template-columns: calc((100% - var(--tj-s5)) / 2) minmax(0, 1fr); }
  .hm-hot__track { grid-auto-columns: 100%; }
  .hm-case-track { grid-auto-columns: calc((100% - 2 * var(--tj-s4)) / 2.6); }
  .hm-rail { display: none; }
}
@media (max-width: 979px) {
  .hm-hero__mascot, .hm-hero__blob--main { display: none; }
  .hm-split { grid-template-columns: 1fr; gap: var(--tj-s8); }
  .hm-join { grid-template-columns: minmax(0, 1fr) auto; padding: var(--tj-s8); }
  .hm-join__mascot, .hm-join__sun { display: none; }
}
@media (max-width: 767px) {
  .hm-hero { padding-top: var(--tj-s9); }
  .hm-stats { grid-template-columns: repeat(2, 1fr); }
  .hm-stats div:nth-child(3) { border-left: 0; }
  .hm-stats div:nth-child(n + 3) { border-top: 1px solid var(--tj-line); }
  .hm-services { grid-template-columns: 1fr; }
  .hm-hot { grid-template-columns: 1fr; }
  .hm-hot__track { grid-auto-columns: 78%; }
  .hm-case-track { grid-auto-columns: 62%; gap: var(--tj-s3); }
  .hm-join { grid-template-columns: 1fr; padding: var(--tj-s7) var(--tj-s5); }
}

/* ======================================================================
 * 手机版首页（mobile/home.html）
 * ==================================================================== */
.hmm-pad { margin-inline: var(--tj-s4); }
.hmm-hero { position: relative; overflow: hidden; padding: var(--tj-s8) var(--tj-s4) var(--tj-s6); }
.hmm-hero__blob { position: absolute; right: -36px; top: 18px; width: 170px; height: 150px; border-radius: 52% 48% 60% 40% / 55% 45% 55% 45%; background: var(--tj-lilac-2); }
.hmm-hero__mascot { position: absolute; right: 4px; top: 4px; width: 118px; height: auto; }
.hmm-hero__title {
  position: relative;
  display: grid;
  margin-top: var(--tj-s8);
  font-family: var(--tj-font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.hmm-hero__title em { font-family: var(--tj-font-num); font-size: 22px; font-style: italic; font-weight: 700; letter-spacing: -0.03em; color: var(--tj-ink-2); }
.hmm-hero__sub { position: relative; margin-top: var(--tj-s2); font-size: 15px; color: var(--tj-ink-2); }
.hmm-hero__ctas { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--tj-s2); margin-top: var(--tj-s5); }

.hmm-entries { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tj-s2); margin: var(--tj-s6) var(--tj-s4) 0; }
.hmm-entries a { display: grid; justify-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.hmm-entries__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-family: var(--tj-font-display); font-size: 18px; font-weight: 900; }
.hmm-entries__ic--sky { background: var(--tj-sky); }
.hmm-entries__ic--apricot { background: var(--tj-apricot); }
.hmm-entries__ic--lilac { background: var(--tj-lilac); }
.hmm-entries__ic--mint { background: var(--tj-mint); }

.hmm-block { margin: var(--tj-s8) var(--tj-s4) 0; }
.hmm-block .tj-row-head { margin-bottom: var(--tj-s3); align-items: center; }
.hmm-block .tj-row-head h2 { font-size: 20px; }
.hmm-list { display: grid; }
.hmm-item { display: flex; gap: var(--tj-s3); padding: var(--tj-s3) 0; border-bottom: 1px solid var(--tj-line); }
.hmm-item__cover { position: relative; isolation: isolate; flex: none; width: 84px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--tj-sky); }
.hmm-item__cover--1 { background: var(--tj-apricot); }
.hmm-item__cover--2 { background: var(--tj-mint); }
.hmm-item__cover--3 { background: var(--tj-butter-soft); }
.hmm-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hmm-item__body b { font-size: 15px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hmm-item__body small { font-size: 12px; color: var(--tj-muted); }
.hmm-item__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.hmm-item__foot .tj-chip { height: 22px; padding: 0 8px; font-size: 11px; }
.hmm-block .hm-join { margin-bottom: var(--tj-s6); }