# S03: Featured Technique + Technique Grid Restyle

**Goal:** Featured technique card shown prominently on creator page. All technique cards use recent-card styling with summary, tags, and moment count.
**Demo:** After this: Featured technique card shown prominently. All technique cards use recent-card styling.

## Tasks
- [x] **T01: Added summary, topic_tags, and key_moment_count fields to CreatorTechniqueItem and enriched the creator detail query with a correlated KeyMoment count subquery** — Extend the backend schema and query so the creator detail endpoint returns enriched technique data needed for the featured card and restyled grid.

## Steps

1. Read `backend/schemas.py` and add three fields to `CreatorTechniqueItem`:
   - `summary: str | None = None`
   - `topic_tags: list[str] | None = None`
   - `key_moment_count: int = 0`

2. Read `backend/routers/creators.py` (the creator detail endpoint around line 140-175). Update the technique query to also select `TechniquePage.summary` and `TechniquePage.topic_tags`. For `key_moment_count`, add a correlated subquery: `select(func.count(KeyMoment.id)).where(KeyMoment.technique_page_id == TechniquePage.id).correlate(TechniquePage).scalar_subquery().label('key_moment_count')`. Pass all new fields when constructing `CreatorTechniqueItem` instances.

3. Verify the schema loads: `cd backend && python -c "from schemas import CreatorTechniqueItem; print(CreatorTechniqueItem.model_fields.keys())"`

## Must-Haves

- [ ] `CreatorTechniqueItem` has `summary`, `topic_tags`, `key_moment_count` fields
- [ ] Creator detail endpoint query selects summary, topic_tags, and computes key_moment_count
- [ ] Existing fields (title, slug, topic_category, created_at) unchanged

## Verification

- `cd backend && python -c "from schemas import CreatorTechniqueItem; fields = list(CreatorTechniqueItem.model_fields.keys()); assert 'summary' in fields and 'topic_tags' in fields and 'key_moment_count' in fields, f'Missing fields: {fields}'; print('OK:', fields)"`
  - Estimate: 20m
  - Files: backend/schemas.py, backend/routers/creators.py
  - Verify: cd backend && python -c "from schemas import CreatorTechniqueItem; fields = list(CreatorTechniqueItem.model_fields.keys()); assert 'summary' in fields and 'topic_tags' in fields and 'key_moment_count' in fields; print('OK')"
- [x] **T02: Featured technique card with gradient border and enriched recent-card grid rendered on creator detail page** — Update the frontend to consume the enriched technique fields: render the first technique as a featured card with gradient border, and restyle remaining cards to match the recent-card pattern.

## Steps

1. Read `frontend/src/api/public-client.ts` and add to the `CreatorTechniqueItem` interface:
   - `summary: string | null`
   - `topic_tags: string[] | null`
   - `key_moment_count: number`

2. Read `frontend/src/pages/CreatorDetail.tsx`. In the technique list section:
   - Extract the first technique from the sorted array as `featuredTechnique`, remaining as `gridTechniques`
   - Above the existing grid, render the featured technique card (only when it exists) as a `Link` to `/techniques/{slug}` with class `creator-featured`. Include: title, summary (if present), category badge, TagList for topic_tags (if present), moment count.
   - Change the grid cards from `creator-technique-card` to `recent-card` class. Add summary, topic_tags (TagList), and moment count spans inside each card.
   - Import `TagList` component if not already imported.

3. Read `frontend/src/App.css`. Add `.creator-featured` styles adapted from `.home-featured`:
   - Same gradient `border-image` (linear-gradient 135deg cyan→purple)
   - Same surface background, padding, text alignment
   - Omit the creator link (we're already on the creator page)
   - Add `__title`, `__summary`, `__meta`, `__moments` sub-classes
   - Add a `.creator-featured__label` for a 'Featured Technique' heading
   - Remove or comment out the old `.creator-technique-card` rules (or leave them — they become dead CSS)

4. Run `cd frontend && npx tsc --noEmit` — must exit 0.
5. Run `cd frontend && npm run build` — must exit 0.

## Must-Haves

- [ ] `CreatorTechniqueItem` interface has summary, topic_tags, key_moment_count
- [ ] Featured technique card rendered above grid with gradient border and summary
- [ ] Grid technique cards use `recent-card` class pattern with summary, tags, moment count
- [ ] TypeScript compiles with zero errors
- [ ] Production build succeeds

## Verification

- `cd frontend && npx tsc --noEmit` exits 0
- `cd frontend && npm run build` exits 0
- `grep -q 'creator-featured' frontend/src/pages/CreatorDetail.tsx` confirms featured card class
- `grep -q 'recent-card' frontend/src/pages/CreatorDetail.tsx` confirms grid restyle
  - Estimate: 30m
  - Files: frontend/src/api/public-client.ts, frontend/src/pages/CreatorDetail.tsx, frontend/src/App.css
  - Verify: cd frontend && npx tsc --noEmit && npm run build && grep -q 'creator-featured' src/pages/CreatorDetail.tsx && grep -q 'recent-card' src/pages/CreatorDetail.tsx && echo 'ALL OK'
