# News & Media — Round 3 reconcile (fresh-eyes, from-scratch)

Agent: news-r3 · Date: 2026-06-18 · Browser slot: browse
Target: `html/news-media.html`
Figma (key R6EY4TpNCvVqUEikM7Lof9): Desktop News `3121:24934` / Press `3121:25016` / Video `3121:25098`; Mobile `3121:24028`.

Method: pulled each section's IR (bbox + per-run fonts/colors + strokes/corners), measured our DOM
(getBoundingClientRect + getComputedStyle at 1440 and 393), compared numbers, fixed mismatches,
verified tab-switch + every hover FIRES by computed-style read. Findings as measured facts.

## Desktop (3 tab states)

| Section | Figma node | measured-vs-IR | fixed? | residual/Q |
|---|---|---|---|---|
| Hero card | 3121:24942 / :24944 / :24945 | card 723×329→ours 723×330 x29; H1 Poppins SemiBold 55 #2b286f → 55px/600/Poppins/#2b286f; sub Poppins Light 25 → 25px/300 | already correct | — |
| Hero image | 3121:24936 right frame 526w, navy r28 | ours img 524×330 at x887; gap card→img 135 (Figma 135) | already correct | image is a building photo (`hero-building.png`); Figma fill is a building too — subject matches |
| Tab bar | Group 1049 (3121:24982); variants 15349/15352 | each 196×50 r7 gap30, text Poppins 22 ls-4% TITLE #2b286f; active=Medium500 yellow, inactive=Light300 white+navy-border | already correct | — |
| Tab hover | variant 3121:15352 | delta = fill none+border → #ffcb05; text Light300→Medium500. Triggered hover: bg rgb(255,203,5), weight 500 | fires | — |
| News featured | Frame 1597884747 (3121:24977) | big-left 723×760 x0; right-top 672×380 x723; right-bottom 672×380 x723y380. Grid total 1395 in a **1382 container → right cards bled 13px past right margin** (lastCardRight 1424 vs 1411) | **FIXED** | grid was `[723px_672px]`→`[716px_minmax(0,1fr)]`; now left716/right666, right edge 1411 = container |
| News card hover | variant 3121:16909 | delta = bg #fff→#2b286f, border off, all text #2b286f→#fff. Triggered big + grid card: bg rgb(43,40,111), title+meta #fff | fires | — |
| All News grid | Frame 1597884746 (3121:24963) | 3 rows×3 cols = 9 cards, each ~465×388 touch-borders; media 427×246 (mx19 mt17); title Poppins Regular 20 | already correct (9 cloned) | grey media = CMS Drupal Views rows, no design-specific per-card asset |
| Pagination | Group 1057 | 38×38 squares, active navy #fff text, 1·2·3·…·10 | already correct | — |
| Press featured | Frame 1597884748 (3121:25063) | big-left 723×644 **title-only no excerpt**; right cards 672×322 media aspect 617/175. Ours big 716×646 no-excerpt, right 666×323 | already correct (+grid fix above) | — |
| Press grid | Frame 1597884746 (3121:25049) | 9 cards, same as News grid | already correct | — |
| Video panel | frame 3121:25098 | **NO featured frame, NO grid in Figma — empty content** | placeholder kept | **CLIENT Q (flagged in HTML): Video & Media tab has no designed content in Figma; "Videos coming soon" placeholder + tab present.** |

Tab switching (data-newstab JS): verified — clicking Press shows press panel + press tab yellow/weight500,
news tab back to white; clicking Video shows video placeholder. News default. All panels toggle correctly.

## Mobile (393px, frame 3121:24028 — different structure)

| Section | Figma node | measured-vs-IR | fixed? | residual/Q |
|---|---|---|---|---|
| Tabs | Group 1058 + Component 92 | each 147×31 r7 gap20, Poppins Light 15 ls-4% TITLE; **3 tabs wrap to 2 rows** (News+Press row1, Video row2); active yellow+navy-border | ours h31/15px, wraps (tab3 y=740) | tab widths content-driven (137–162) not fixed 147 — dynamic-tab-safe, intentional |
| Big featured card | Group 1087 (3121:24049) | 345×637, photo `[14,18 318x311]` aspect318/311, title Poppins Light 18, excerpt 15. Photo inset was mx18 | **FIXED** mx-18→mx-14 (Figma 14); now media 315×308 | — |
| Horizontal cards | Frame 1597884749/750 | 345×162, photo-left 89w full-h, r0 sharp, title Light 18 lh25 | already correct (photo 89×154, title 18/300) | — |
| All-news grid | Group 1093 (3121:24131) | 9 cards single-column stacked, each 345×388; photo `[14,17 316x246]` aspect **316/246** (NOT desktop 427/246); title Light 18 | **FIXED** grid card photo aspect was 427/246 at all bp → `aspect-[316/246] lg:aspect-[427/246]`, mx14 mt17; now media 315×245 ratio1.28 | — |
| "All News" heading | text 3121:24130 | 30px centered (desktop is Light 50) | already correct (30px/300/center) | — |

No horizontal overflow at any state: `document.documentElement.scrollWidth` = 393 (mobile) / 1440 (desktop)
across News/Press/Video panels.

## Dynamic-tab stress test
Injected 4 extra tabs (mobile) / 5 extra (desktop) via DOM. Bar wrapped to multiple rows
(mobile barH 286, desktop 130), scrollWidth stayed 393 / 1440 — no horizontal overflow, no clip.
`flex-wrap gap` handles N tabs per the dynamic-tab rule.

## Fixes committed
1. `fix(news-media): featured grid fills container — no right-edge bleed` — `[716px_minmax(0,1fr)]` (both News + Press panels).
2. `fix(news-media): mobile card photo aspect + margins match Figma` — grid card mobile aspect 316/246 + mx14/mt17; big card mobile mx-14.

## Residuals / open questions
- **Video tab content**: Figma frame has only hero+tabs, no designed video cards. Placeholder + tab kept; needs client spec for video-card layout. (Flagged in markup.)
- Card media areas render as grey `#d9d9d9` placeholders (CMS Drupal Views rows) — Figma shows distinct
  per-card photos but these are dynamic content slots with no single design-specified asset; left as placeholders.
- Mobile tab widths are content-driven (not Figma's fixed 147px) by design — required for dynamic CMS tab counts.