[Bug] Storyline header: stats grid rendered twice in DOM (hidden/block duplication)

[realproject7]

Problem

PR #821 uses hidden sm:block + sm:hidden to show stats in different positions on mobile vs desktop. This means the stats grid and CTA button are rendered twice in the DOM — one copy hidden via CSS. Components like MarketCapBox (API call) and DeadlineCountdown (setInterval timer) mount twice, doubling their side effects.

Solution

Replace the dual-render approach with CSS grid and grid-template-areas so stats are rendered once and repositioned responsively.

<!-- Single render, repositioned via grid areas -->
<div class="grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr] gap-x-4 sm:gap-x-6
            grid-rows-[auto_auto] sm:grid-rows-[1fr]
            [grid-template-areas:'cover_info'_'stats_stats'] 
            sm:[grid-template-areas:'cover_info'_'._stats']">
  
  <div style="grid-area: cover">Moleskine cover</div>
  <div style="grid-area: info">Title, rating, writer, genre</div>
  <div style="grid-area: stats">Stats grid + CTA</div>
</div>

Mobile: stats span full width below cover+info row (stats stats)
Desktop: stats align with info column only (. stats — dot = empty cell under cover)

This keeps the exact same visual result but with a single DOM instance of each component.

Safety

• Pure CSS structural change — no logic, prop, or data changes
• Same visual output on both breakpoints
• MarketCapBox and DeadlineCountdown mount once instead of twice
• Reduces DOM size and eliminates duplicate API calls/timers

Acceptance Criteria

• Stats grid and CTA rendered once in the DOM (no hidden duplicates)
• Mobile: stats full-width below cover+info (same as current)
• Desktop: stats in right column next to cover (same as current)
• Desktop spacing preserved (mt-6, gap-6)
• MarketCapBox and DeadlineCountdown only mount once
• No visual changes on any breakpoint

Branch

task/<issue>-header-single-render