/* Author: VIVI x Codex */
/* Eazo 作品库 · 本页只做布局微调，组件一律用 kit 的 v- 类（⛔ 别在这里另发明组件） */

.wk-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }

.wk-head { padding-bottom: var(--s-9); }
.wk-head .v-sect-head { margin-bottom: var(--s-8); }
.wk-head .v-sect-sub a { color: var(--teal-ink); }

/* 31 件是质数，任何列数最后一行都会空 ⇒ 列数取 4 / 3 / 2（最后一行只剩 3 / 1 / 1 张），
   卡片宽度按 1200 宽 4 列来定。以后加减作品重新挑列数，别硬凑 */
.wk-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-7);
  padding-bottom: var(--pad-sect);
}
@media (max-width: 1079px) { .wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
@media (max-width: 699px)  { .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }

/* 作品都是竖屏手机页 ⇒ 封面用 3:4，不用 kit 默认的 4:3 */
.wk-grid .v-card-shot { aspect-ratio: 3 / 4; }
/* ⚠️ .v-card 自带 display:flex，会盖掉 hidden 属性，筛选时必须显式藏掉 */
.v-card[hidden] { display: none; }

@media (max-width: 699px) {
  .wk-grid .v-card-body { padding: var(--s-4) var(--s-5) var(--s-5); }
  .wk-grid .v-card-title { font-size: var(--t-body); }
  .wk-grid .v-card-intro { -webkit-line-clamp: 2; }
}

/* ---------- 详情弹层：左边整张截图，右边介绍 ---------- */
.wk-modal .v-modal-inner { width: min(860px, calc(100vw - 28px)); }

.wk-d {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s-10);
  align-items: start;
}
.wk-d-shot { margin: 0; display: flex; justify-content: center; }
.wk-d-shot img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: min(72vh, 650px);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--line);
}
.wk-d-body { display: grid; gap: var(--s-5); align-content: start; }
.wk-d-body .v-modal-title { margin: 0; }
.wk-d-by { margin: 0; font-size: var(--t-sm); font-weight: 800; color: var(--muted); }
.wk-d-by a { color: var(--teal-ink); }
.wk-d-line { margin: 0; font-size: var(--t-lede); line-height: var(--lh-relaxed); }
.wk-d-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.wk-d-desc summary { cursor: pointer; font-size: var(--t-sm); font-weight: 800; color: var(--muted); }
.wk-d-desc p {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm); line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--ink) 80%, var(--paper));
}
.wk-d-pos { align-self: center; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); }

@media (max-width: 699px) {
  .wk-d { grid-template-columns: 1fr; gap: var(--s-7); }
  .wk-d-shot img { max-height: 50vh; }
}