/**
 * styles 索引画廊：复用 layouts 的栏目/卡片壳，舞台改为统一占位封面图。
 */

.wa-st-index .wa-fam-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1100px) {
  .wa-st-index .wa-fam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .wa-st-index .wa-fam-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 页头轻着色：玫粉 / 琥珀 / 雾蓝 */
.wa-st-index > .wa-comp-index__head::before {
  background:
    radial-gradient(
      42% 55% at 58% 28%,
      color-mix(in srgb, #f472b6 18%, transparent),
      transparent 72%
    ),
    radial-gradient(
      38% 50% at 78% 42%,
      color-mix(in srgb, #fbbf24 16%, transparent),
      transparent 70%
    ),
    radial-gradient(
      34% 48% at 28% 55%,
      color-mix(in srgb, #93c5fd 18%, transparent),
      transparent 72%
    );
}

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

/* 首个分类头：紧接 hero 底边线，去掉 layouts 默认 48px 上边距（section 包裹导致 :first-child 规则失效） */
.wa-st-index .wa-index-catalog > .wa-st-section:first-child > .wa-lg-cat-head {
  margin-top: 0;
}

/* 分类底边与分割线留白：对齐 components 的 --wa-index-gap */
.wa-st-index .wa-st-section {
  margin: 0 0 var(--wa-index-gap, 48px);
}

/* 后续分类：对齐 components/layouts 的 --wa-index-gap 节奏 */
.wa-st-index .wa-st-section + .wa-st-section {
  position: relative;
  margin-top: 0;
  padding-top: var(--wa-index-gap, 48px);
}

.wa-st-index .wa-st-section + .wa-st-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: var(--wa-index-rail, #eeeeee);
  transform: translateX(-50%);
  pointer-events: none;
}

.wa-st-index .wa-st-section + .wa-st-section > .wa-lg-cat-head {
  margin-top: 0;
}

html[data-theme='dark'] .wa-st-index .wa-st-section + .wa-st-section::before {
  background: rgba(255, 255, 255, 0.08);
}

/* 风格卡片：窄卡时收斜纹框（容器） */
.wa-st-index .wa-fam-card {
  container-type: inline-size;
  container-name: wa-dr-stage-card;
}

/* 风格卡片：右侧操作钮与左侧标题+描述整体垂直居中 */
.wa-st-index .wa-fam-card__top {
  align-items: center;
}

/* 风格卡片：标题 / 描述略大于组件索引默认 meta */
.wa-st-index .wa-comp-meta__name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}

.wa-st-index .wa-comp-meta__slug {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none; /* 中文描述，勿强制大写 */
}

/* Pro / Free 角标：design-resources.css 有一份；iframe 内再备一份 */
.wa-st-pro,
.wa-st-free {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid #e74c3c;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e74c3c;
  background: color-mix(in srgb, #e74c3c 10%, transparent);
}

.wa-st-free {
  border-color: #16a34a;
  color: #15803d;
  background: color-mix(in srgb, #16a34a 12%, transparent);
}

html[data-theme='dark'] .wa-st-pro {
  border-color: #e74c3c;
  color: #e74c3c;
  background: color-mix(in srgb, #e74c3c 16%, transparent);
}

html[data-theme='dark'] .wa-st-free {
  border-color: #4ade80;
  color: #86efac;
  background: color-mix(in srgb, #22c55e 18%, transparent);
}

/* 舞台：对齐布局框架 — 斜纹底 + 参考线，封面图落在内框 */
.wa-st-index .wa-fam-card__stage {
  --wa-st-guide: 14px; /* 与 layouts/blocks / 首页缩略图舞台斜纹框统一 */
  position: relative;
  aspect-ratio: 16 / 10;
  align-items: stretch;
  justify-content: stretch;
  padding: var(--wa-st-guide);
  border: 1px solid color-mix(in srgb, var(--wa-color-border-1, var(--wa-color-border, #e5e6eb)) 55%, transparent);
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  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-st-index .wa-fam-card__stage::before,
.wa-st-index .wa-fam-card__stage::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
  z-index: 2;
  /* 十字参考线：对齐首页 / templates */
  border-color: color-mix(in srgb, var(--wa-color-border, var(--wa-color-border-1, #e5e6eb)) 70%, transparent);
  border-style: solid;
}

.wa-st-index .wa-fam-card__stage::before {
  top: var(--wa-st-guide);
  right: 0;
  bottom: var(--wa-st-guide);
  left: 0;
  border-width: 1px 0;
}

.wa-st-index .wa-fam-card__stage::after {
  top: 0;
  right: var(--wa-st-guide);
  bottom: 0;
  left: var(--wa-st-guide);
  border-width: 0 1px;
}

/* 须与默认同权（.wa-st-index .wa-fam-card__stage），否则不生效 */
@container wa-dr-stage-card (max-width: 360px) {
  .wa-st-index .wa-fam-card__stage {
    --wa-st-guide: 9px;
  }
}

@container wa-dr-stage-card (max-width: 280px) {
  .wa-st-index .wa-fam-card__stage {
    --wa-st-guide: 7px;
  }
}

/* 封面图窗：贴参考线内框（与布局 .wa-lg-mini 同级） */
.wa-st-shot {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--wa-color-border-1, #e5e6eb);
  border-radius: 0;
  background: var(--wa-color-surface, #fff);
  box-shadow: none;
}

/* 兼容未包 .wa-st-shot 的旧卡片：封面图本身充当内框 */
.wa-st-index .wa-fam-card__stage > .wa-st-cover {
  position: relative;
  z-index: 1;
  border: 1px solid var(--wa-color-border-1, #e5e6eb);
  background: var(--wa-color-surface, #fff);
}

/* 缩略图加载态：骨架画在内框上（勿用 stage::after，与参考线冲突） */
.wa-st-index .wa-fam-card__stage.is-loading .wa-st-shot::after,
.wa-st-index .wa-fam-card__stage.is-loading > .wa-st-cover::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      color-mix(in srgb, #fff 55%, transparent) 45%,
      transparent 90%
    ),
    color-mix(in srgb, var(--wa-stage-hatch-bg, #e8e8ec) 88%, #d4d4d8);
  background-size: 200% 100%, auto;
  animation: wa-st-shimmer 1.1s ease-in-out infinite;
}

html[data-theme='dark'] .wa-st-index .wa-fam-card__stage.is-loading .wa-st-shot::after,
html[data-theme='dark'] .wa-st-index .wa-fam-card__stage.is-loading > .wa-st-cover::after {
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      color-mix(in srgb, #fff 12%, transparent) 45%,
      transparent 90%
    ),
    #1c1c20;
  background-size: 200% 100%, auto;
}

@keyframes wa-st-shimmer {
  0% {
    background-position: 100% 0, 0 0;
  }
  100% {
    background-position: -100% 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-st-index .wa-fam-card__stage.is-loading .wa-st-shot::after,
  .wa-st-index .wa-fam-card__stage.is-loading > .wa-st-cover::after {
    animation: none;
  }
}

.wa-st-index .wa-fam-card__stage.is-error .wa-st-shot,
.wa-st-index .wa-fam-card__stage.is-error > .wa-st-cover {
  background:
    repeating-linear-gradient(
      45deg,
      #f4f4f5,
      #f4f4f5 6px,
      #ececef 6px,
      #ececef 12px
    );
}

.wa-st-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  /* 再淡一档：压饱和/对比，索引里更贴卡片灰阶，悬停略回升 */
  filter: saturate(0.58) contrast(0.9) brightness(1.04);
  transition: opacity 0.22s ease, filter 0.22s ease;
}

.wa-st-index .wa-fam-card__stage.is-ready .wa-st-cover {
  opacity: 1;
}

.wa-st-index .wa-fam-card__stage:hover .wa-st-cover {
  filter: saturate(0.78) contrast(0.95) brightness(1.02);
}

html[data-theme='dark'] .wa-st-index .wa-fam-card__stage {
  background-color: var(--wa-stage-hatch-bg, #121214);
  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;
}

html[data-theme='dark'] .wa-st-shot {
  border-color: var(--wa-color-border-1, #3a3a3a);
  background: var(--wa-color-surface, #1a1a1a);
}

html[data-theme='dark'] .wa-st-cover {
  filter: saturate(0.52) contrast(0.9) brightness(0.96);
}

html[data-theme='dark'] .wa-st-index .wa-fam-card__stage:hover .wa-st-cover {
  filter: saturate(0.72) contrast(0.95) brightness(0.98);
}

/* 悬停：预览主题 + 查看规范（盖过参考线） */
.wa-st-index .wa-st-stage-cta {
  z-index: 3;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  pointer-events: none;
}

.wa-st-index .wa-fam-card__stage:hover .wa-st-stage-cta,
.wa-st-index .wa-st-stage-cta:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.wa-st-index .wa-fam-card__stage:hover .wa-st-stage-cta.is-spent {
  opacity: 0;
  pointer-events: none;
}

.wa-st-index .wa-st-stage-cta__preview,
.wa-st-index .wa-st-stage-cta__doc {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

/* 幽灵钮始终浅底深字：壳页暗色时 --wa-color-text 变浅会导致白底看不见字 */
.wa-st-index .wa-lg-stage-cta__btn--ghost {
  background: color-mix(in srgb, #fff 94%, transparent);
  color: #1d2129;
  box-shadow: 0 8px 24px color-mix(in srgb, #000 16%, transparent);
}

.wa-st-index .wa-st-stage-cta__doc:hover .wa-lg-stage-cta__btn--ghost,
.wa-st-index .wa-st-stage-cta__doc:focus-visible .wa-lg-stage-cta__btn--ghost {
  background: #fff;
  color: #1d2129;
}

html[data-theme='dark'] .wa-st-index .wa-lg-stage-cta__btn--ghost {
  background: color-mix(in srgb, #fff 92%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}