add AdSlot component and place banner zones on article pages

Adds <AdSlot zone size /> server component that renders a labeled
placeholder for now (size + zone exposed as data attrs for the future
bb.ad_placements lookup).

Inserted on news/[slug] article template:
- 728×90 leaderboard above the <article>
- 300×600 half-page at top of sidebar
- 300×250 mid-rectangle in sidebar (replaces the old hand-rolled
  placeholder div)
- 728×90 leaderboard below the </article>, before related-articles

Same scheme should be applied to articles/[slug]/page.tsx in a follow-up
once that template's body is finalized.

src/app/news/[slug]/NewsArticleDetailClient.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import AppImage from "@/components/ui/AppImage";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
+import AdSlot from "@/components/AdSlot";
 import { createClient } from "@/lib/supabase/client";
 import type { Article } from "@/lib/articles/sampleArticles";
 
@@ -280,6 +281,11 @@ export default function NewsArticleDetailClient({
         </div>
       </div>
 
+      {/* Top leaderboard */}
+      <div className="max-w-container mx-auto px-4 pt-6">
+        <AdSlot zone="article-top" size="728x90" />
+      </div>
+
       {/* Article */}
       <article className="max-w-container mx-auto px-4 py-8 md:py-12">
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
@@ -444,6 +450,9 @@ export default function NewsArticleDetailClient({
 
           {/* Sidebar */}
           <aside className="lg:col-span-4 space-y-6">
+            {/* Sidebar fixed half-page */}
+            <AdSlot zone="article-sidebar-top" size="300x600" />
+
             {/* Related Articles Sidebar */}
             <div className="bg-[#111] border border-[#222] p-5">
               <h3 className="font-body font-bold text-xs text-[#3b82f6] uppercase tracking-widest mb-4 pb-2 border-b border-[#222]">
@@ -491,16 +500,16 @@ export default function NewsArticleDetailClient({
             </div>
 
             {/* Ad placeholder */}
-            <div className="ad-placeholder w-full h-[250px] flex items-center justify-center">
-              <div className="text-center">
-                <p className="text-[#444] text-xs font-body">Advertisement</p>
-                <p className="text-[#333] text-[10px] font-body mt-1">300×250</p>
-              </div>
-            </div>
+            <AdSlot zone="article-sidebar-mid" size="300x250" />
           </aside>
         </div>
       </article>
 
+      {/* Bottom leaderboard */}
+      <div className="max-w-container mx-auto px-4 pb-8">
+        <AdSlot zone="article-bottom" size="728x90" />
+      </div>
+
       {/* Related Articles Carousel */}
       {relatedArticles.length > 0 && (
         <section className="border-t border-[#1a1a1a] bg-[#0d0d0d] py-10">