/* ==========================================================================
   项目案例：列表卡片图标、详情页封面、正文 + 侧栏布局、成果占位
   （.case 卡片基础样式在 components.css，首页共用）
   ========================================================================== */


/* 详情 */
.case-hero__meta { margin-top: 8px; }
.case-cover {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 21 / 9; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: #0b0d10;
}
.case-cover .gridbg { background-size: 40px 40px; }
.case-cover__ph { position: relative; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--c-dim); }
@media (max-width: 640px) { .case-cover { aspect-ratio: 4 / 3; } }

.case-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .case-layout { grid-template-columns: minmax(0, 1fr); } }
.case-aside { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 960px) { .case-aside { position: static; } }
.aside-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); }
.aside-card__title { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; color: var(--c-dim); }
.aside-links { display: flex; flex-direction: column; }
.aside-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  border-top: 1px solid var(--c-line); color: var(--c-text-2); font-size: 15px;
  transition: color var(--dur-fast), padding-left var(--dur) var(--ease-out);
}
.aside-links a:hover { color: var(--c-lemon); padding-left: 4px; }

.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.outcome { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-sm); border: 1px dashed var(--c-line-2); }
.outcome b { font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--c-lemon); }
.outcome span { font-size: 13px; color: var(--c-dim); }