From c959a5f8f7e897f0f7052a1c4036be60e8939c50 Mon Sep 17 00:00:00 2001
From: ops-bot <ops@relevantmediaproperties.com>
Date: Thu, 4 Jun 2026 14:56:26 +0000
Subject: [PATCH] =?UTF-8?q?ui(article):=20editorial=20standard=20=E2=80=94?=
 =?UTF-8?q?=20cap=20featured=20image=20at=20480px=20(mirror=20of=20BB)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/articles/[slug]/ArticleDetailClient.tsx |  8 ++++----
 src/app/news/[slug]/NewsArticleDetailClient.tsx | 12 ++++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/articles/[slug]/ArticleDetailClient.tsx b/src/app/articles/[slug]/ArticleDetailClient.tsx
index cddcd51..dcd257b 100644
--- a/src/app/articles/[slug]/ArticleDetailClient.tsx
+++ b/src/app/articles/[slug]/ArticleDetailClient.tsx
@@ -341,17 +341,17 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
               </div>
             </div>
 
-            {/* Featured Image */}
-            <div className="mb-8 overflow-hidden rounded-sm">
+            {/* Featured Image — editorial standard: cap at 480px high. */}
+            <figure className="mb-8 overflow-hidden rounded-sm bg-[#F1F5F9] flex items-center justify-center" style={{maxHeight: 480}}>
               <AppImage
                 src={article.image}
                 alt={article.alt}
                 width={800}
                 height={450}
-                className="w-full h-auto object-cover"
+                className="max-h-[480px] w-auto max-w-full object-contain"
                 priority
               />
-            </div>
+            </figure>
 
             {/* Article Body */}
             {/* DO NOT OVERRIDE — article body prose styles */}
diff --git a/src/app/news/[slug]/NewsArticleDetailClient.tsx b/src/app/news/[slug]/NewsArticleDetailClient.tsx
index 370b9c2..b91eee0 100644
--- a/src/app/news/[slug]/NewsArticleDetailClient.tsx
+++ b/src/app/news/[slug]/NewsArticleDetailClient.tsx
@@ -442,17 +442,21 @@ export default function NewsArticleDetailClient({
               </div>
             </div>
 
-            {/* Featured Image */}
-            <div className="mb-8 overflow-hidden rounded-sm">
+            {/* Featured Image — editorial standard:
+                  cap visual height at 480px AND container at 16:9 aspect.
+                  Wide images shrink to fit width; tall/portrait images are
+                  letterboxed against the slate background instead of
+                  ballooning the layout. */}
+            <figure className="mb-8 overflow-hidden rounded-sm bg-[#F1F5F9] flex items-center justify-center" style={{maxHeight: 480}}>
               <AppImage
                 src={article.image}
                 alt={article.alt}
                 width={800}
                 height={450}
-                className="w-full h-auto object-cover"
+                className="max-h-[480px] w-auto max-w-full object-contain"
                 priority
               />
-            </div>
+            </figure>
 
             {/* Article Body — paragraphs interleaved with rotating 300×250 ads every 4 paragraphs */}
             <ArticleBody