# S03: Key Moment Card Redesign

**Goal:** Key moment cards show title prominently on its own line, with source file, timestamp, and type badge on a clean secondary metadata row.
**Demo:** After this: Key moment cards show title prominently on its own line, with source file, timestamp, and type badge on a clean secondary row

## Tasks
- [x] **T01: Split key moment card header into standalone h3 title and flex-row metadata div, replacing single-row __header layout** — Restructure the key moment card in TechniquePage.tsx and App.css so the title is a standalone prominent element and the metadata (source filename, timestamp, content type badge) sits on a clean secondary row below it.

## Context

The technique page sidebar (22rem, established by S02 via D019) contains key moment cards. Currently the card header is a single flex row with `flex-wrap: wrap` containing title, source, timestamp, and badge as siblings. At 22rem width this wraps unpredictably. The fix splits the header into two explicit rows.

## Steps

1. Read `frontend/src/pages/TechniquePage.tsx` around lines 413–430 to locate the key moment card JSX (the `.technique-moment` list items inside the Key Moments section within `.technique-columns__sidebar`).

2. Restructure the card JSX:
   - Pull the title `<span className="technique-moment__title">` out of the `__header` div and place it before it as a standalone element. Change from `<span>` to `<h3>` for semantic correctness (it's a sub-heading within the Key Moments `<h2>` section).
   - Rename the remaining `<div className="technique-moment__header">` to `<div className="technique-moment__meta">` — it now contains only source, timestamp, and badge.
   - The `<p className="technique-moment__summary">` stays unchanged after the meta div.
   - Target structure per card:
     ```
     <li className="technique-moment">
       <h3 className="technique-moment__title">{km.title}</h3>
       <div className="technique-moment__meta">
         {km.video_filename && <span className="technique-moment__source">...}  
         <span className="technique-moment__time">...</span>
         <span className="badge badge--content-type">...</span>
       </div>
       <p className="technique-moment__summary">{km.summary}</p>
     </li>
     ```

3. Read `frontend/src/App.css` around lines 1337–1380 to locate the key moment card styles.

4. Update CSS:
   - `.technique-moment__title`: Change to `display: block; margin: 0 0 0.25rem 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.3;` — block display gives it its own line, bottom margin separates from meta row. Reset h3 default margins.
   - Add `.technique-moment__meta` with the same styles as the current `__header`: `display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap;`
   - Remove or comment out `.technique-moment__header` (no longer used in JSX). If other code references it, keep it but it should be dead CSS after the JSX change.
   - All other moment card styles (`.technique-moment__time`, `.technique-moment__source`, `.technique-moment__summary`, `.badge--content-type`) remain unchanged.

5. Verify:
   - Run `cd frontend && npx tsc --noEmit` — zero errors
   - Run `cd frontend && npm run build` — succeeds
   - Grep for any remaining references to `technique-moment__header` in .tsx files to confirm it's fully replaced
   - Confirm no hardcoded hex/rgba values in new or modified CSS rules

## Constraints

- Sidebar width is fixed at 22rem (D019). Card must look good within this constraint.
- Do NOT modify `.badge` or `.badge--content-type` classes — they're shared across the app.
- Preserve the `<ol>` list wrapper and `<li>` card container structure.
- Use only existing CSS custom properties for any color values.
- The `<h3>` for the title should not introduce unwanted default browser margins — reset with explicit margin in CSS.
  - Estimate: 20m
  - Files: frontend/src/pages/TechniquePage.tsx, frontend/src/App.css
  - Verify: cd frontend && npx tsc --noEmit && npm run build && ! grep -q 'technique-moment__header' src/pages/TechniquePage.tsx && echo 'PASS'
