From 9e7d27c03cf67ab726f4267860a5011c194511aa Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Tue, 9 Jun 2026 18:31:05 +0700
Subject: [PATCH] fix(bento): add global !important override for tile width

Scoped CSS in BentoTile.astro was supposed to enforce
min-width: 0 + width: 100%, but the tiles were still
rendering at different widths in the same row.

Adding a global !important override in global.css that
applies to ALL .bento-tile instances regardless of
scoping, plus a flex column layout so tile-body fills
available space and pushes the CTA to the bottom.

This guarantees equal width + equal height in the row.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/BentoTile.astro |  2 +-
 src/styles/global.css          | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/BentoTile.astro b/src/components/BentoTile.astro
index 41f5496..c1fb16e 100644
--- a/src/components/BentoTile.astro
+++ b/src/components/BentoTile.astro
@@ -69,7 +69,7 @@ const revealClass = reveal ? 'reveal' : '';
     transform-style: preserve-3d;
     min-height: 380px;
     min-width: 0;
-    width: 100%;
+    width: 100% !important;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
diff --git a/src/styles/global.css b/src/styles/global.css
index c051393..fa217aa 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -830,3 +830,29 @@ p {
     padding: 16px 28px;
   }
 }
+
+
+/* ============================================
+   BENTO TILE — global override (unscoped)
+   Forces equal-width tiles regardless of content
+   ============================================ */
+.bento-tile {
+  min-width: 0 !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  min-height: 380px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Make tile-body grow to push CTA to bottom */
+.bento-tile .tile-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.bento-tile .tile-body > .mega-cta,
+.bento-tile .tile-body > .btn,
+.bento-tile .tile-body > a:last-child {
+  margin-top: auto;
+}