From cc76c21c2418ae7acc7b49cd021de693ea9134a8 Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 29 May 2026 13:21:04 +0000
Subject: [PATCH] homepage bento: hero shrinks into 1fr+300px grid w/ banner at
 top right
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 21:9 hero used to span full width and the Blackmagic 300x600 sat
next to the 3-up rail beneath it. Layout request: shrink the hero
horizontally (keep aspect ratio — height shrinks proportionally) so the
300x600 lifts up alongside the hero itself, with the 3-up rail still
under the hero in the left column. Same outer grid, just hero+rail now
live together in the left column.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/FeaturedBentoFromDb.tsx | 141 +++++++++++++------------
 1 file changed, 73 insertions(+), 68 deletions(-)

diff --git a/src/components/FeaturedBentoFromDb.tsx b/src/components/FeaturedBentoFromDb.tsx
index f73658d..057adb9 100644
--- a/src/components/FeaturedBentoFromDb.tsx
+++ b/src/components/FeaturedBentoFromDb.tsx
@@ -78,81 +78,86 @@ export default async function FeaturedBento() {
         </Link>
       </div>
 
-      {/* Cinematic 21:9 hero — full width, image fills, gradient + overlaid title */}
-      <Link
-        href={`/news/${hero.wp_slug}`}
-        className="group block relative overflow-hidden rounded border border-[#252525] bg-[#0b0f17] hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
-      >
-        <div className="relative aspect-[21/9] md:aspect-[21/8] bg-[#111]">
-          <img
-            src={img(hero)}
-            alt={hero.featured_image_alt || hero.title}
-            className="w-full h-full object-cover"
-          />
-          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/65 to-transparent" />
+      {/* Two-column outer grid: left column holds the 21:9 hero + 3-up rail;
+          right column is the Blackmagic 300x600. The hero now sits NARROWER
+          (constrained to the 1fr-300px column) but keeps its 21:9 / 21:8
+          aspect ratio — height shrinks proportionally. Banner moves UP to
+          start at the very top of the row, baseline-aligned with the hero.
+          Mobile collapses to single column (banner hidden via lg:block). */}
+      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 items-start">
+        <div className="flex flex-col gap-4 min-w-0">
+          {/* Cinematic 21:9 hero — fills left column, aspect ratio preserved */}
+          <Link
+            href={`/news/${hero.wp_slug}`}
+            className="group block relative overflow-hidden rounded border border-[#252525] bg-[#0b0f17] hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
+          >
+            <div className="relative aspect-[21/9] md:aspect-[21/8] bg-[#111]">
+              <img
+                src={img(hero)}
+                alt={hero.featured_image_alt || hero.title}
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black via-black/65 to-transparent" />
 
-          <span className="absolute top-4 left-4 inline-flex items-center gap-1.5 bg-[var(--color-text-info,#60a5fa)] text-black px-3 py-1 rounded font-mono text-[11px] uppercase tracking-widest font-bold shadow-md">
-            <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-              <path d="M12 2l2.6 7.6H22l-6.2 4.5L18.4 22 12 17.3 5.6 22l2.6-7.9L2 9.6h7.4z" />
-            </svg>
-            Feature Story
-          </span>
+              <span className="absolute top-4 left-4 inline-flex items-center gap-1.5 bg-[var(--color-text-info,#60a5fa)] text-black px-3 py-1 rounded font-mono text-[11px] uppercase tracking-widest font-bold shadow-md">
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M12 2l2.6 7.6H22l-6.2 4.5L18.4 22 12 17.3 5.6 22l2.6-7.9L2 9.6h7.4z" />
+                </svg>
+                Feature Story
+              </span>
 
-          <div className="absolute bottom-0 left-0 right-0 p-6 md:p-10">
-            {hero.category && (
-              <div className="text-[10px] font-mono uppercase tracking-widest text-[var(--color-text-info,#60a5fa)] mb-2">
-                {hero.category}
-              </div>
-            )}
-            <h3 className="font-serif text-2xl md:text-4xl lg:text-5xl text-white leading-tight max-w-3xl group-hover:text-[var(--color-text-info,#60a5fa)] transition-colors">
-              {hero.title}
-            </h3>
-            {hero.excerpt && (
-              <p className="font-serif text-base md:text-lg text-[#cbd5e1] mt-3 max-w-2xl line-clamp-2">
-                {cleanExcerpt(hero.excerpt)}
-              </p>
-            )}
-            <div className="mt-4 flex flex-wrap items-center gap-3 text-[11px] font-mono text-[#9ca3af]">
-              <span>{hero.author_name || "Broadcast Beat"}</span>
-              <StarRating seed={hero.wp_slug} publishedAt={hero.wp_published_at} size="sm" />
-              <span aria-hidden="true" className="text-[var(--color-text-info,#60a5fa)] ml-2">→ Read full story</span>
-            </div>
-          </div>
-        </div>
-      </Link>
-
-      {/* Row below the hero — 3-up rail (left) + Blackmagic 300x600 (right).
-          Right column is locked to 300px so its edge aligns with the right
-          edge of the 21:9 hero above; SidebarAdStack downstream skips this
-          banner so it doesn't double-render. */}
-      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 mt-4 items-start">
-        <div className="grid grid-cols-3 gap-3">
-          {rail.map((r) => (
-            <Link
-              key={r.wp_slug}
-              href={`/news/${r.wp_slug}`}
-              className="group block rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
-            >
-              <div className="aspect-[16/10] bg-[#111] relative">
-                <img
-                  src={img(r)}
-                  alt={r.featured_image_alt || r.title}
-                  className="w-full h-full object-cover"
-                />
-              </div>
-              <div className="p-3">
-                <div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)] mb-1">
-                  {r.category || "News"}
+              <div className="absolute bottom-0 left-0 right-0 p-6 md:p-10">
+                {hero.category && (
+                  <div className="text-[10px] font-mono uppercase tracking-widest text-[var(--color-text-info,#60a5fa)] mb-2">
+                    {hero.category}
+                  </div>
+                )}
+                <h3 className="font-serif text-2xl md:text-4xl lg:text-5xl text-white leading-tight max-w-3xl group-hover:text-[var(--color-text-info,#60a5fa)] transition-colors">
+                  {hero.title}
+                </h3>
+                {hero.excerpt && (
+                  <p className="font-serif text-base md:text-lg text-[#cbd5e1] mt-3 max-w-2xl line-clamp-2">
+                    {cleanExcerpt(hero.excerpt)}
+                  </p>
+                )}
+                <div className="mt-4 flex flex-wrap items-center gap-3 text-[11px] font-mono text-[#9ca3af]">
+                  <span>{hero.author_name || "Broadcast Beat"}</span>
+                  <StarRating seed={hero.wp_slug} publishedAt={hero.wp_published_at} size="sm" />
+                  <span aria-hidden="true" className="text-[var(--color-text-info,#60a5fa)] ml-2">→ Read full story</span>
                 </div>
-                <h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-3">
-                  {r.title}
-                </h4>
-                <div className="mt-2">
-                  <StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} />
+              </div>
+            </div>
+          </Link>
+
+          {/* 3-up rail directly under the hero, still in the left column */}
+          <div className="grid grid-cols-3 gap-3">
+            {rail.map((r) => (
+              <Link
+                key={r.wp_slug}
+                href={`/news/${r.wp_slug}`}
+                className="group block rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
+              >
+                <div className="aspect-[16/10] bg-[#111] relative">
+                  <img
+                    src={img(r)}
+                    alt={r.featured_image_alt || r.title}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="p-3">
+                  <div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)] mb-1">
+                    {r.category || "News"}
+                  </div>
+                  <h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-3">
+                    {r.title}
+                  </h4>
+                  <div className="mt-2">
+                    <StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} />
                 </div>
               </div>
             </Link>
           ))}
+          </div>
         </div>
         <aside className="hidden lg:block" aria-label="Premium sponsor">
           {heroAd ? (