From dd2a8c8da7e03d53e87d0ab19af6d5549799a3ba Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 29 May 2026 13:31:46 +0000
Subject: [PATCH] bento: lock left column to 600px so 3-up rail bottom aligns
 w/ 300x600

Previously the rail row could drift past the bottom of the Blackmagic
banner by ~17px depending on title length. Left column is now pinned to
lg:h-[600px] (matching the right column 300x600), and the rail grid uses
flex-1 min-h-0 to absorb the remaining vertical space after the hero
takes its natural aspect-ratio height. Each card switches to a flex
column with the image flex-shrink-0 and the text area flex-1
overflow-hidden so the bottom edge lines up perfectly regardless of
title/category length.

Also tightened the title clamp from line-clamp-3 to line-clamp-2 since
the card height is now bounded.

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

diff --git a/src/components/FeaturedBentoFromDb.tsx b/src/components/FeaturedBentoFromDb.tsx
index 057adb9..76b4c2b 100644
--- a/src/components/FeaturedBentoFromDb.tsx
+++ b/src/components/FeaturedBentoFromDb.tsx
@@ -85,7 +85,7 @@ export default async function FeaturedBento() {
           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">
+        <div className="flex flex-col gap-3 min-w-0 lg:h-[600px]">
           {/* Cinematic 21:9 hero — fills left column, aspect ratio preserved */}
           <Link
             href={`/news/${hero.wp_slug}`}
@@ -129,34 +129,39 @@ export default async function FeaturedBento() {
             </div>
           </Link>
 
-          {/* 3-up rail directly under the hero, still in the left column */}
-          <div className="grid grid-cols-3 gap-3">
+          {/* 3-up rail — flex-1 so it fills the exact remaining height inside
+              the 600px left column. Each card uses h-full + flex-col so the
+              image keeps its 16:10 ratio while the text area absorbs any
+              leftover pixels (overflow-hidden line-clamps the title cleanly).
+              Result: bottom edge of the rail lines up with the bottom of the
+              300x600 banner regardless of hero or text-content height. */}
+          <div className="grid grid-cols-3 gap-3 flex-1 min-h-0">
             {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"
+                className="group flex flex-col h-full 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">
+                <div className="aspect-[16/10] bg-[#111] relative flex-shrink-0">
                   <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">
+                <div className="p-3 flex flex-col gap-1 flex-1 min-h-0 overflow-hidden">
+                  <div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)]">
                     {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">
+                  <h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-2">
                     {r.title}
                   </h4>
-                  <div className="mt-2">
+                  <div className="mt-auto">
                     <StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} />
+                  </div>
                 </div>
-              </div>
-            </Link>
-          ))}
+              </Link>
+            ))}
           </div>
         </div>
         <aside className="hidden lg:block" aria-label="Premium sponsor">