Responsive requirements

Showcase is browse-driven on desktop, scan-driven on mobile. Listing optimizes for scrollable scanning; detail page optimizes for vertical reading flow with the snapshot sidecard collapsing on mobile.

Per-breakpoint behaviors

Mobile (≤640px)

Listing: 1-up grid, full-width cards. Detail: hero stacks vertically (main column → snapshot → description). Related Signals: 1-up with swipe-scroll. Filter row collapses to horizontal scroll.

Tablet (641-1023px)

Listing 2-up. Detail keeps hero 2-column when space allows; snapshot stays on the right.

Desktop (≥1024px)

Listing 3-up. Detail full layout (`lg:grid-cols-[2fr_1fr]` for hero + snapshot side-by-side).

Card-specific responsive rules

• 16:9 logo canvas keeps its ratio at every viewport. Brand-name fallback (when no logo image) scales with `.t-section-h2` token.
• Verified badge stays top-end (corner-aware via `top-2 end-2` logical positioning) — flips correctly in RTL.
• Sector + stage chip row wraps on narrow cards; never overflows the card width.