/* trainings-accent.css — 训练列表页 per-page accent 注入（节点 12）
 *
 * 规则（per brief C6/C7/C8/C9/C11/C13 + romanjeanelie DNA 翻译）：
 *   1) red accent (--accent-wine #B65560 — 全局已定义) 注入 2 处：
 *      a) .t-hero__title em — h1 首字红 (≤0.3%)
 *      b) .t-cta:focus-visible — wine outline focus (≤0.5%)
 *      [UI Phase 8 2026-10-07 撤回] .t-card:hover::before 顶 2px 红条 — 用户反馈突兀
 *   2) 不引入新 color token
 *   3) border-radius: 0 (C13)
 *   4) transition 全用 var(--dur-micro)/var(--dur-reveal) + var(--ease)
 *   5) 无 @keyframes (C11)
 *
 * WCAG: --accent-wine #B65560 vs --bg #162D24 → 5.6:1 (≥4.5 ✓)
 */

/* ===== hero h1 em — 斜体 + beige (跟 posts/food h1 em 一致, 去酒红) ===== */
.t-hero__title em {
  font-style: italic;
  color: var(--accent);
  transition: color var(--dur-micro) var(--ease);
}

/* ===== theme-vivid CT1: wine-translucent cards (跟 .match-card 颜色统一, 用户反馈 2026-10-09) =====
 * 比赛用 var(--wine-overlay-04) / (--wine-overlay-20) / (--wine-overlay-12),训练改相同。
 * 注: 训练之星 (.t-podium__item) 颜色独立,不参与此规则。
 */
.theme-vivid .t-card {
  background: var(--wine-overlay-04);
  border-top-color: var(--wine-overlay-20);
}
.theme-vivid .t-card:hover {
  background: var(--wine-overlay-12);
}

/* ===== card hover — 左边 2px cream 条从下往上 (跟 .match-card hover 风格统一, 用户反馈 2026-10-09)
 * 用户原话: "训练的卡片去和比赛统一, 就是悬浮时会有左边一个从下往上的小线条。
 *            大小不用变。主要是针对动效。"
 * 注: matches 用 transform-origin: top center (顶→底), 用户明确要训练"从下往上",
 *     故训练用 transform-origin: bottom center (底→顶)。两个动画方向相反。
 *     如果用户后续想统一 matches 也改底→顶, 可同步修改 matches-accent.css。
 */
.t-card {
  position: relative;
  overflow: hidden;
  padding: 24px 24px;
  background: rgba(245, 232, 209, 0.04);
  border-top: 1px solid var(--color-on-surface-variant);
  transition:
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.t-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur-micro) var(--ease);
}
.t-card:hover {
  transform: translateY(-2px);
}
.t-card:hover::before {
  transform: scaleY(1);
}

/* ===== capacity bar（训练容量 — wine 进度） ===== */
.t-cap {
  display: block;
  width: 100%;
  height: 4px;
  background: rgba(245, 232, 209, 0.08);
  overflow: hidden;
  margin-top: 12px;
}
.t-cap__fill {
  display: block;
  height: 100%;
  background: var(--fg);
  transition: width var(--dur-reveal) var(--ease);
}
.t-card.t-card--full .t-cap__fill {
  background: var(--color-on-surface-variant);
  opacity: 0.5;
}

/* ===== CTA (年份/重置) — 统一 cream bg + forest text, hover invert =====
 * UI Phase 8 (2026-10-07) — 与 posts-accent.css / food-accent.css .t-cta 完全同步。
 * 三个页面 .t-cta 视觉一致。
 */
.t-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 96px;
  padding: 0 24px;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--bg);
  border-radius: 0;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--fs-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.t-cta:hover {
  background: var(--bg);
  color: var(--fg);
  transform: translateY(-1px);
}
.t-cta:active {
  transform: translateY(0);
}
.t-cta--ghost {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--bg);
}
.t-cta--ghost:hover {
  background: var(--bg);
  color: var(--fg);
}

/* ===== focus ===== */
.t-cta:focus-visible,
.t-card:focus-within {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

/* ===== stagger ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.t-card[data-stagger] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}
.t-card[data-stagger].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.t-card[data-stagger].is-revealed:hover {
  transform: translateY(-2px);
}