@layer components {
  /* 精选案例：编辑式 7/5 */
  .case-feature { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-7); align-items: stretch; }
  .case-cover { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--hilite); }
  .case-cover img, .case-cover .wf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .case-cover .case-industry { position: absolute; top: var(--s-4); left: var(--s-4); }
  .case-body { display: flex; flex-direction: column; gap: var(--s-4); padding-block: var(--s-3); }
  .case-body h3 { font-size: var(--t-xl); font-family: var(--font-display); font-weight: 700; }
  .case-body .summary { color: var(--muted); text-wrap: pretty; }
  .case-metrics { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; padding: 0; }
  .case-metrics li { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-xs); min-width: 110px; }
  .case-metrics .v { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cyan-ink); font-size: var(--t-lg); line-height: 1.1; }
  .case-metrics .l { font-size: var(--t-xs); color: var(--muted); }
  .case-quote { margin: 0; padding-left: var(--s-4); border-left: 2px solid var(--amber); color: var(--text); font-size: var(--t-base); line-height: 1.5; }
  .case-quote footer { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--muted); font-family: var(--font-mono); }
  @media (max-width: 1023px) { .case-feature { grid-template-columns: 1fr; } }

  /* 案例/场景卡片列表 */
  .case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-5); }
  .case-card {
    position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--hilite); color: inherit; text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .case-card:hover { border-color: color-mix(in oklab, var(--cyan) 40%, var(--line)); transform: translateY(-2px); }
  .case-card .case-cover { aspect-ratio: 16 / 9; border-radius: var(--r-sm); margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; }
  .case-card h3 { font-size: var(--t-lg); }
  .case-card p { color: var(--muted); font-size: var(--t-sm); flex: 1; }
  .case-card .meta { display: flex; justify-content: space-between; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); letter-spacing: .06em; }
  .case-card .meta .more { color: var(--cyan-ink); display: inline-flex; align-items: center; gap: 4px; }
  .case-card:hover .meta .more .icon { transform: translateX(3px); }
  .case-card .meta .icon { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
  /* 场景卡：编号 + 导线角标 */
  .scenario-card::before { content: attr(data-no); font-family: var(--font-display); font-weight: 700; font-size: var(--t-2xl); line-height: 1; color: color-mix(in oklab, var(--cyan-ink) 35%, transparent); }
  .scenario-card::after { content: ""; position: absolute; right: var(--s-4); top: var(--s-4); width: 28px; height: 28px; border-right: 1.5px solid var(--amber); border-top: 1.5px solid var(--amber); opacity: .7; }
  .scenario-card:nth-child(2) { transform: translateY(var(--s-5)); }
  .scenario-card:nth-child(2):hover { transform: translateY(calc(var(--s-5) - 2px)); }
  @media (max-width: 1023px) { .scenario-card:nth-child(2), .scenario-card:nth-child(2):hover { transform: none; } }

  /* 画廊 */
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
  .gallery a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line); }
  .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
  .gallery a:hover img { transform: scale(1.03); }
}