/* ============================================================================
   NanoCamp 首页视觉层（只在首页加载，且 /intro/ 海报文档不加载它）
   目标：把首页的整体质感向 /minicamp/ 靠拢——hero 之外整页共用一张斜带 + 细网格背景
   （章节之间不留接缝），配等宽字距的小标签、硬边标签块，join-section 保留斜线纹理。
   注意：字体大小保持现状（minicamp 的字号偏大），这里只动背景、字距、字重与颜色。
   ============================================================================ */

/* --- 1. 整页一张背景：hero 之外的所有区块共用它，章节之间不留接缝 ---------- */
/* 颜色直接取自 logo 本身的双色：标志左半 #7ab9fd（天蓝）、右半 #7cdab3（薄荷绿）。
   两者兑淡到接近纸白之后做一条自上而下的蓝→绿渐变，整页就这一层，没有斜带也没有网格。
   html 先落底色，body 的背景就不会被提升成画布背景（那样百分比尺寸会按视口算），
   于是 body 的这张渐变按整页盒子铺开，跨章节连续、不留接缝。
   注：hero 是 <iframe src="/intro/">，海报文档自带不透明底色，首屏那一屏会盖住渐变顶端；
   渐变铺满整个 body 盒子，所以滚过首屏后看到的是它偏上的一段（接近天蓝），越往下越偏薄荷。 */
html { background-color: #e6f2fc; }
body[data-page="home"] {
  background-color: #e6f2fc;
  background-image: linear-gradient(180deg, #e5f1ff 0%, #e6f4f8 40%, #e4f6ee 72%, #e3f6e9 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* hero 之外的区块不再自带底色，统一露出上面这张背景。
   页脚不在此列：它与加入区合成一条薄荷收尾带，底色由 base.css 统一给（见「收尾区」）。 */

/* --- 2. 分隔线统一成 minicamp 的蓝绿细线 ---------------------------------- */
body[data-page="home"] .community-rows,
body[data-page="home"] .community-row,
body[data-page="home"] .community-intro-strip {
  border-color: #b7d1c9;
}
body[data-page="home"] .community-ecosystem {
  border-block-color: #bcd7df;
  /* 这个区块在 collage.css 里自带一层不透明薄荷底 #e5f3ec。上面第 1 节把整页改成一张
     连续渐变之后，那层底就成了一条横贯页面的硬边色块，把渐变截断。这里让它也露出背景。 */
  background: transparent;
}
/* 底色去掉之后还剩一条硬边：这个区块自带的 ::before 是两团径向柔光（见 collage.css），
   absolute inset:0 正好贴着区块边框起止，柔光在边界那一行从零直接跳到满值。右上那团
   最强，实测单行跳 11~15/255。给它加一层上下渐隐的遮罩，柔光淡入淡出，边界就看不出来了。 */
body[data-page="home"] .community-ecosystem::before {
  mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

/* --- 3. 小标签字体：等宽字距 + 硬边标签块 --------------------------------- */
/* 社区行的左侧标签：前面加一小段实线，字重压紧 */
body[data-page="home"] .row-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  letter-spacing: .005em;
  color: #1f5a4a;
}
body[data-page="home"] .row-label::before {
  content: "";
  flex: none;
  width: 20px;
  height: 2px;
  background: #5da98a;
}
/* 行尾动作：等宽字距，箭头换成会翻色的圆形印章 */
body[data-page="home"] .row-action {
  gap: 13px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  color: #1f5a4a;
}
body[data-page="home"] .row-action b {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  /* 静止态只有一个箭头：不描边、不加圆底；圆底留给 hover */
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #2f7d5d;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
body[data-page="home"] .community-row:hover .row-action b,
body[data-page="home"] .community-row:focus-within .row-action b {
  background: #2f7d5d;
  color: #fff;
  transform: translate(2px, -2px);
}
/* 活动徽章 / 活动事实：等宽字距 + 硬边阴影 */
body[data-page="home"] .event-badge {
  padding: 5px 11px;
  border-radius: 3px;
  border-color: #c2b3d7;
  background: #faf7fe;
  color: #514569;
  box-shadow: 3px 3px 0 #ddd2ef;
  font-family: var(--mono);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
body[data-page="home"] .event-facts {
  font-family: var(--mono);
  letter-spacing: .06em;
  color: #5b5170;
}
body[data-page="home"] .event-facts span + span {
  border-left-color: #c2b3d7;
}
/* 档案卡上的小标签与底部动作 */
body[data-page="home"] .archive-links > a > span {
  font-family: var(--mono);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
body[data-page="home"] .archive-links b {
  font-family: var(--mono);
  letter-spacing: .05em;
}

/* --- 4. 加入区：这套样式已升为全站标准，搬进 base.css 的「收尾区」 --------
   原来首页在这里单独画分段背景、斜纹层、右下角小签和纸卡阴影，其余页面另有一套；
   既然两版要统一，就只留 base.css 那一份，首页不再保留副本（含 nc-join-lines 关键帧）。 */

/* --- 6. 响应式：小屏把网格和斜带都收窄一点 ---------------------------------- */
@media (max-width: 640px) {
  body[data-page="home"] .row-label::before { width: 14px; }
  body[data-page="home"] .row-action b { width: 25px; height: 25px; }
}

/* --- 8. 活动面板：媒体框不再横向溢出压住右栏文字 ---------------------------- */
/* 通用样式是 .event-visual .media-frame{height:100%} 配 .media-frame{aspect-ratio:4/3}，
   也就是"高度撑满行高、宽度由高度反推"：行高 630px 时算出 840px 宽，直接盖到右边的文字上。
   这里改成按列宽铺满、由宽度定高度（保持 4:3，整张合照不被裁），并在列内垂直居中。 */
/* 只在多列（桌面）档覆盖：手机档 styles.css 已经给了
   .event-visual .media-frame{height:270px;min-height:0;aspect-ratio:auto}，覆盖会把它压成 0 高。 */
@media (min-width: 641px) {
  body[data-page="home"] .home-camp .event-visual {
    display: flex;
    align-items: center;
  }
  body[data-page="home"] .home-camp .event-visual .media-frame {
    width: 100%;
    height: auto;
  }
}
/* 带 transform 的 .event-visual 会进入定位层，绘制在普通流文字之上；文字抬一层更保险。 */
body[data-page="home"] .home-camp .event-copy {
  position: relative;
  z-index: 1;
}

/* 加入区的 reduce-motion 处理已随样式一起搬进 base.css。 */

/* --- 7. 首页作品区：横向滚动（卡片数据与滚动参数见 content/home-showcase*.json） --- */
body[data-page="home"] .projects-scroller {
  position: relative;
}
body[data-page="home"] .projects-track {
  display: flex;
  gap: var(--card-gap, 22px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* 负外边距抵消内边距：卡片抬起/投影不会被 overflow 裁掉，版式位置也不变 */
  margin: -10px -2px 0;
  padding: 10px 2px 14px;
  /* 注意是 auto：自动滚动每帧直接改 scrollLeft，smooth 会把每帧都变成一段补间动画。
     箭头手动翻页时由 JS 显式传 behavior:'smooth'。 */
  scroll-behavior: auto;
  scrollbar-width: none;
}
body[data-page="home"] .projects-track[data-snap] { scroll-snap-type: x mandatory; }
/* 会自己动的横滑区里滚动条太吵，隐藏掉；hint 文案负责提示可以拖动 */
body[data-page="home"] .projects-track::-webkit-scrollbar { height: 0; }
/* 每屏几张由 JSON 的 perView 决定，这里只按断点取对应那个数字 */
body[data-page="home"] .projects-track > .project-card {
  flex: 0 0 calc((100% - (var(--per-wide, 3) - 1) * var(--card-gap, 22px)) / var(--per-wide, 3));
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 1000px) {
  body[data-page="home"] .projects-track > .project-card {
    flex-basis: calc((100% - (var(--per-medium, 2) - 1) * var(--card-gap, 22px)) / var(--per-medium, 2));
  }
}
@media (max-width: 640px) {
  body[data-page="home"] .projects-track > .project-card {
    flex-basis: calc((100% - (var(--per-narrow, 1) - 1) * var(--card-gap, 22px)) / var(--per-narrow, 1));
  }
}
body[data-page="home"] .scroller-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}
body[data-page="home"] .scroller-hint {
  color: #5b7085;
  font-size: 11px;
  letter-spacing: .08em;
}
body[data-page="home"] .scroller-controls {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
body[data-page="home"] .scroller-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #b9cbe0;
  border-radius: 50%;
  background: #fff;
  color: #245fd6;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
}
body[data-page="home"] .scroller-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-page="home"] .scroller-arrow:is(:hover, :focus-visible):not(:disabled) {
  background: #245fd6;
  border-color: #245fd6;
  color: #fff;
  transform: translateY(-2px);
}
body[data-page="home"] .scroller-arrow:disabled { opacity: .35; }
/* 一屏就放得下时箭头没有意义，projects-scroll.js 会加上 is-static */
body[data-page="home"] .projects-scroller.is-static .scroller-controls { display: none; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .projects-track { scroll-behavior: auto; }
  body[data-page="home"] .scroller-arrow:is(:hover, :focus-visible) { transform: none; }
  /* 不自动滚时，做无缝循环用的那组副本没有意义，直接收掉 */
  body[data-page="home"] .projects-track > .project-card[aria-hidden="true"] { display: none; }
}