<!-- source-hash: be03f9107f1ebb36349ea65aa7f3ebeb -->
Pure presentation component for rendering customer interview content in three density modes: `default` (full card), `sm` (compact horizontal for chat-inline), and `portrait` (rail/strip layout).

## Key Components

### `CustomerInterviewCardProps`
| Prop | Type | Description |
|---|---|---|
| `interview` | `CustomerInterview` | Data model for the interview |
| `href` | `string` | Resolved detail URL — no click logic inside the card |
| `target` | `'_blank'` | Optional new-tab behavior |
| `targetPlatform` | `string \| null` | Passed to `useEntityCardLink` for platform-aware link resolution |
| `placeholderUrl` | `string \| null` | OG image fallback when `featured_image` is absent |
| `size` | `'default' \| 'sm' \| 'portrait'` | Render density |
| `showTypeBadge` | `boolean` | Portrait mode only — renders the "Customer Interview" chip (default: `true`) |

### `CustomerInterviewCard`
Main export. Delegates link resolution to `useEntityCardLink` and placeholder generation to `useEntityCardPlaceholder`. Branches render path by `size`:
- **`default`** — Full card with 1200×630 aspect image, title, summary, and avatar footer with MSP icon overlay
- **`sm`** — Compact horizontal layout with square thumbnail and video indicator icon
- **`portrait`** — Delegates entirely to `EntityPortraitCard`

### `CustomerInterviewCardSkeleton`
Loading placeholder matching each density's layout zones, with `animate-pulse` shimmer.

## Usage Example

```typescript
import { CustomerInterviewCard, CustomerInterviewCardSkeleton } from './customer-interview-card'

// Default full card
<CustomerInterviewCard
  interview={interviewData}
  href="/interviews/acme-corp-story"
  size="default"
  showTypeBadge={false}
/>

// Compact chat-inline variant
<CustomerInterviewCard
  interview={interviewData}
  href="/interviews/acme-corp-story"
  target="_blank"
  rel="noopener noreferrer"
  size="sm"
/>

// Loading state
<CustomerInterviewCardSkeleton size="default" />
```