From 5ab00efd150acc70f3cab1c7675ae526e69677c3 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Wed, 10 Jun 2026 10:48:05 +0700
Subject: [PATCH] fix(home): separate mega-cta from tile-link-overlay (was
 overlapping with objective)

Before: .tile-link-overlay contained the .mega-cta text. Both overlay and .mega-objective were positioned at the bottom of the tile, causing visual overlap.
After: .mega-cta is a normal-flow <span> in tile-body (pushed to bottom via margin-top: auto). .tile-link-overlay is now an empty click target (no inner content, no padding, no flex).
---
 src/pages/index.astro | 5 ++---
 src/styles/global.css | 8 +-------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 94f1e18..8829fb0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -210,9 +210,8 @@ const featuredPortfolio = portfolio.filter(p =>
                 <span class="objective-label">เป้าหมาย:</span>
                 <span class="objective-value">{copy.objective}</span>
               </div>
-              <a href={`/services/${s.id}`} class="tile-link-overlay">
-                <span class="mega-cta">ดูรายละเอียด →</span>
-              </a>
+              <span class="mega-cta">ดูรายละเอียด →</span>
+              <a href={`/services/${s.id}`} class="tile-link-overlay" aria-label={`ดูรายละเอียด ${s.data.title}`}></a>
             </BentoTile>
           );
         })}
diff --git a/src/styles/global.css b/src/styles/global.css
index 3a235cd..6d16f37 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -854,15 +854,9 @@ p {
   position: absolute;
   inset: 0;
   z-index: 1;
+  display: block;
   text-decoration: none;
   color: inherit;
-  display: flex;
-  align-items: flex-end;
-  padding: 32px;
-}
-.tile-link-overlay .mega-cta {
-  margin-top: 0;
-  font-weight: 700;
 }
 .bento-tile > *:not(.tile-link-overlay) {
   position: relative;