/* ==========================================================================
   home-v2.css — 首页第二级改造
   1. Hero 星空层（视差）
   2. 热门区 bento 杂志式网格
   3. 分类卡片语义化补全后的视觉收敛
   约束：纯静态 / 离线 / 尊重 prefers-reduced-motion
   ========================================================================== */

/* ==========================================================================
   1. 星空：三层不同密度的 radial-gradient 叠加，制造不规则星野
   ========================================================================== */
.v-stars {
  position: absolute;
  inset: -10% 0 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image:
    radial-gradient(
      circle at 18% 24%,
      hsl(var(--foreground) / 0.55) 0.7px,
      transparent 0.9px
    ),
    radial-gradient(
      circle at 62% 12%,
      hsl(var(--foreground) / 0.4) 0.9px,
      transparent 1.1px
    ),
    radial-gradient(
      circle at 84% 66%,
      hsl(var(--foreground) / 0.32) 0.6px,
      transparent 0.8px
    ),
    radial-gradient(
      circle at 36% 78%,
      hsl(var(--primary) / 0.5) 0.8px,
      transparent 1px
    );
  background-size: 137px 129px, 211px 197px, 173px 181px, 293px 271px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 18%, #000 12%, transparent 74%);
  -webkit-mask-image: radial-gradient(
    ellipse 75% 65% at 50% 18%,
    #000 12%,
    transparent 74%
  );
  will-change: transform;
}

/* 第二层：更远、更淡，反向视差制造纵深 */
.v-stars--far {
  opacity: 0.5;
  background-size: 239px 227px, 317px 301px, 257px 271px, 401px 389px;
  filter: blur(0.3px);
}

/* ==========================================================================
   2. 热门区 bento 网格
   ========================================================================== */
.v-bento {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8rem;
}

.v-bento > li:nth-child(1) {
  grid-column: span 4;
  grid-row: span 2;
}

.v-bento > li:nth-child(2) {
  grid-column: span 2;
}

.v-bento > li:nth-child(3) {
  grid-column: span 2;
}

.v-bento > li:nth-child(4) {
  grid-column: span 3;
}

.v-bento > li:nth-child(5) {
  grid-column: span 3;
}

/* bento 内的卡片统一撑满格子 */
.v-bento > li > a {
  height: 100%;
}

/* 主卡：图片占比更大，标题放大 */
.v-bento > li:nth-child(1) > a {
  flex-direction: column !important;
}

.v-bento > li:nth-child(1) .v-card__title {
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   3. 卡片语义补全：h3 已填入工具名，荧光 badge 改为分类角标
   ========================================================================== */
.v-card-tag {
  display: none;
}

/* 卡片标题与描述 */
.v-card__title {
  font-weight: 650 !important;
  letter-spacing: -0.024em !important;
  line-height: 1.24 !important;
}

.v-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.42;
  color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   4. 分区标题：编号 + 计数右对齐
   ========================================================================== */
.v-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid hsl(var(--border));
}

/* ==========================================================================
   5. 移动端：bento 降级为两列
   ========================================================================== */
@media (max-width: 900px) {
  .v-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v-bento > li:nth-child(n) {
    grid-column: span 1;
    grid-row: auto;
  }
  .v-bento > li:nth-child(1) {
    grid-column: span 2;
  }
}

/* ==========================================================================
   6. 降级
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .v-stars {
    display: none;
  }
}