/**
 * blocks 索引：分类 groups → 类型卡（对齐 shadcnuikit.com/blocks）
 * 词表真源：catalog.json；橱窗壳复用 layouts/index.css（.wa-lg-mini / .wa-lg-jump）
 *
 * 版心竖轨 / 通栏横线：对齐 blocks/type.css（wa-bg-type-page）
 * 还原备份：_backup/2026-10-10-pre-rails/
 */

/* 版心壳 / CTA / footer / 公众号卡片：见 components/index.css（.wa-index-page） */
.wa-bg-index-page {
  --wa-bg-index-rail: var(--wa-index-rail, #eeeeee);
  --wa-bg-index-gap: var(--wa-index-gap, 48px);
  --wa-bg-index-stage-radius: 12px; /* 对齐 layouts 舞台 */
}

/* 页头轻着色：青绿 / 青蓝 / 琥珀（区别于组件索引的紫粉） */
.wa-bg-index > .wa-comp-index__head::before {
  background:
    radial-gradient(
      42% 55% at 58% 28%,
      color-mix(in srgb, #14b8a6 22%, transparent),
      transparent 72%
    ),
    radial-gradient(
      38% 50% at 78% 42%,
      color-mix(in srgb, #38bdf8 20%, transparent),
      transparent 70%
    ),
    radial-gradient(
      34% 48% at 28% 55%,
      color-mix(in srgb, #fbbf24 16%, transparent),
      transparent 72%
    );
}

html[data-theme='dark'] .wa-bg-index > .wa-comp-index__head::before {
  background:
    radial-gradient(
      42% 55% at 58% 28%,
      color-mix(in srgb, #2dd4bf 40%, transparent),
      transparent 72%
    ),
    radial-gradient(
      38% 50% at 78% 42%,
      color-mix(in srgb, #38bdf8 36%, transparent),
      transparent 70%
    ),
    radial-gradient(
      34% 48% at 28% 55%,
      color-mix(in srgb, #fbbf24 28%, transparent),
      transparent 72%
    );
}

.wa-bg-index .wa-comp-index__lead a {
  color: var(--wa-color-primary);
  text-decoration: none;
}

.wa-bg-index .wa-comp-index__lead a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wa-bg-index .wa-comp-index__lead code {
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--wa-color-fill-2);
}

.wa-bg-load-err {
  margin: 24px 0;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, rgb(var(--danger-6, 245 63 63)) 35%, var(--wa-color-border-1));
  background: color-mix(in srgb, rgb(var(--danger-6, 245 63 63)) 8%, transparent);
  color: var(--wa-color-text);
  font-size: 14px;
}

.wa-bg-cat-filter a.is-active {
  border-color: var(--wa-color-primary);
  color: var(--wa-color-primary);
  background: color-mix(in srgb, var(--wa-color-primary) 8%, var(--wa-color-surface));
}

.wa-bg-cat-filter a.is-active .wa-lg-jump__en {
  color: color-mix(in srgb, var(--wa-color-primary) 72%, transparent);
}

.wa-bg-cat-filter a.is-active .wa-lg-jump__n {
  background: color-mix(in srgb, var(--wa-color-primary) 14%, transparent);
  color: var(--wa-color-primary);
}

.wa-bg-cat[hidden] {
  display: none !important;
}

/* 分类头：复用 layouts .wa-lg-cat-head / .wa-lg-cat */
.wa-bg-index .wa-lg-cat-head.wa-bg-cat__head {
  margin: 0 0 24px;
}

/* 类型网格：密度比 layouts 略高（4 列） */
.wa-bg-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
}

/*
 * 类型卡：去浮层卡片感，对齐页级 1px 线框
 * 外层透明；舞台 1px 轨色描边；标题作图注；悬停改描边
 */
.wa-bg-index-page .wa-fam-card.wa-bg-type {
  padding: 0;
  gap: 10px;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
}

.wa-bg-index-page .wa-fam-card.wa-bg-type:hover,
.wa-bg-index-page .wa-fam-card.wa-bg-type.is-empty:hover {
  outline: none;
  box-shadow: none;
}

/* 未上架：只弱化舞台，标题/副标题字色与已上架一致（勿整卡 opacity） */
.wa-bg-index-page .wa-fam-card.wa-bg-type.is-soon {
  opacity: 1;
}

.wa-bg-index-page .wa-fam-card.wa-bg-type.is-soon .wa-fam-card__stage {
  opacity: 0.72;
}

/* 舞台：与 layouts 一致——无外框，仅 TypeUI 十字参考线 + 斜纹 */
.wa-bg-index-page .wa-bg-type .wa-fam-card__stage {
  border: none;
  border-radius: var(--wa-bg-index-stage-radius);
  background-color: var(--wa-stage-hatch-bg, #fafafa);
  background-image: var(--wa-stage-hatch-tile);
  background-size: var(--wa-stage-hatch-tile-size, 5px) var(--wa-stage-hatch-tile-size, 5px);
  background-repeat: repeat;
}

.wa-bg-index-page .wa-bg-type .wa-lg-stage-cta {
  border-radius: var(--wa-bg-index-stage-radius);
}

/* 迷你图：白底、去圆角/描边（外框交给舞台） */
.wa-bg-index-page .wa-bg-type .wa-fam-card__stage > .wa-lg-mini {
  height: 168px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}

html[data-theme='dark'] .wa-bg-index-page .wa-bg-type .wa-fam-card__stage > .wa-lg-mini {
  background: var(--wa-color-bg, #0d0d0d);
}

.wa-bg-type__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border-top: none;
}

.wa-bg-type__foot .wa-comp-meta {
  min-width: 0;
}

.wa-bg-type__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.wa-bg-type__count {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--wa-bg-index-rail, #eeeeee);
  border-radius: 0;
  background: transparent;
  color: var(--wa-color-muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* —— 区块迷你示意图：Hero 分栏 / 未落地通用占位 —— */
.wa-bg-mini {
  flex-direction: column;
}

.wa-bg-mini__cta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* Hero 有货：居中公告条示意 */
.wa-bg-mini__center {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 14px;
}

.wa-bg-mini--center .wa-bg-mini__line.is-short {
  width: 40%;
}

.wa-bg-mini--center .wa-bg-mini__line.is-title {
  width: 72%;
}

.wa-bg-mini--center .wa-bg-mini__line.is-lead {
  width: 88%;
}

.wa-bg-mini--center .wa-bg-mini__cta {
  margin-top: 4px;
  justify-content: center;
}

.wa-bg-mini__cta b {
  display: block;
  width: 22px;
  height: 8px;
  border-radius: 99px;
  background: var(--wa-color-fill-2);
  font-weight: 400;
}

.wa-bg-mini__cta b.is-primary {
  width: 28px;
  background: var(--wa-color-primary);
}

.wa-bg-mini__row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 8px;
  padding: 10px 8px;
  align-items: stretch;
}

.wa-bg-mini__copy {
  flex: 1.05 1 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  justify-content: center;
  padding: 4px 2px;
}

.wa-bg-mini__media {
  flex: 0.95 1 0;
  min-width: 0;
  margin: 0 !important;
  border-radius: 8px;
}

.wa-bg-mini__line {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: var(--wa-color-fill-2);
}

.wa-bg-mini__line.is-title {
  width: 68%;
  height: 9px;
  background: var(--color-fill-3);
}

.wa-bg-mini__line.is-lead {
  width: 88%;
}

.wa-bg-mini__line.is-short {
  width: 48%;
}

/* 未落地：居中标题 + 三格内容瓦片 */
.wa-bg-mini__soon {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px 12px;
}

.wa-bg-mini__soon-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.wa-bg-mini__soon-head .wa-bg-mini__line.is-title {
  width: 42%;
  height: 8px;
}

.wa-bg-mini__soon-head .wa-bg-mini__line.is-lead {
  width: 58%;
  height: 4px;
}

.wa-bg-mini__soon-tiles {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 6px;
}

.wa-bg-mini__tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--wa-color-border-1);
  background: var(--wa-color-surface);
}

.wa-bg-mini__tile i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--wa-color-primary) 22%, var(--wa-color-fill-2));
}

.wa-bg-mini__tile b {
  display: block;
  width: 78%;
  height: 4px;
  border-radius: 99px;
  background: var(--wa-color-fill-2);
  font-weight: 400;
}

.wa-bg-mini__tile b.is-short {
  width: 52%;
}

@media (max-width: 1100px) {
  .wa-bg-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .wa-bg-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .wa-bg-type-grid {
    grid-template-columns: 1fr;
  }

  .wa-bg-type__foot {
    flex-wrap: wrap;
  }
}