<!-- source-hash: 02a29dbf8a78be028a2e952b979247a7 -->
Pure presentation component for displaying MSP case studies in two density modes — `default` (vertical detail card) and `sm` (compact horizontal for chat-inline rendering).

## Key Components

### `CaseStudyCard`
Main card component. Renders a linked, non-interactive card (no click logic — callers wrap with their own anchor and pass a resolved `href`). Supports:
- **`default` size**: Full vertical layout with OG-ratio cover image (`1200×630`), title, and author/MSP attribution with avatar stack.
- **`sm` size**: Compact horizontal layout for embedding in chat threads.

### `CaseStudyCardSkeleton`
Loading placeholder that mirrors the exact layout and aspect ratios of `CaseStudyCard` for both size variants, using `animate-pulse`.

### Image Fallback Chain
```text
study.featured_image → placeholderUrl (from useOgPlaceholder) → bg-ods-bg background
```

## Key Props (`CaseStudyCardProps`)

| Prop | Type | Description |
|------|------|-------------|
| `study` | `CaseStudy` | Case study data object |
| `href` | `string` | Resolved detail URL (caller-provided) |
| `target` | `'_blank'` | Opens in new tab (set by chat dispatch) |
| `placeholderUrl` | `string \| null` | OG fallback image when `featured_image` is missing |
| `size` | `'default' \| 'sm'` | Card density mode |

## Usage Example

```typescript
import { CaseStudyCard, CaseStudyCardSkeleton } from './case-study-card'
import { useOgPlaceholder } from '../hooks/use-og-placeholder'

function CaseStudyGrid({ studies }: { studies: CaseStudy[] }) {
  const placeholderUrl = useOgPlaceholder(study.id)

  if (!studies) return <CaseStudyCardSkeleton size="default" />

  return (
    <CaseStudyCard
      study={study}
      href={`/case-studies/${study.slug}`}
      placeholderUrl={placeholderUrl}
      size="default"
    />
  )
}

// Chat-inline compact variant
<CaseStudyCard
  study={study}
  href={`/case-studies/${study.slug}`}
  target="_blank"
  rel="noopener noreferrer"
  size="sm"
/>
```