From e533931048f0457ebfd844e212d7e5d28e6926bf Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Mon, 4 May 2026 02:03:22 +0000
Subject: [PATCH] Fix navigation downwards from hero section that was leaving a
 focus marker on the bottom row tile.

---
 frontend/src/components/CollageHero.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/frontend/src/components/CollageHero.vue b/frontend/src/components/CollageHero.vue
index dc4675c..b91e4c7 100644
--- a/frontend/src/components/CollageHero.vue
+++ b/frontend/src/components/CollageHero.vue
@@ -134,6 +134,7 @@ function updateVisibility() {
 
 onMounted(() => {
   window.addEventListener('resize', updateVisibility);
+  document.addEventListener('focusin', handleDocumentFocusIn);
   // Initial visibility check after render
   nextTick(() => {
     updateVisibility();
@@ -142,8 +143,20 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateVisibility);
+  document.removeEventListener('focusin', handleDocumentFocusIn);
 });
 
+function clearHeroFocus() {
+  focusedIndex.value = null;
+}
+
+function handleDocumentFocusIn(event: FocusEvent) {
+  const target = event.target as HTMLElement | null;
+  if (!target?.closest('.collage-hero')) {
+    clearHeroFocus();
+  }
+}
+
 // Coordinate system for navigation based on actual CSS positioning:
 // Visual layout (honeycomb stagger, but sequential cols for navigation):
 //   top=-12.5%:    [1]      [3]   [6]   [9]  [12] [15]    <- row 0
@@ -376,7 +389,11 @@ function handleKeyDown(e: KeyboardEvent) {
     e.stopPropagation();
     focusedIndex.value = next;
     itemRefs.value[next]?.focus({ preventScroll: true });
+    return;
   }
+
+  // Navigation is leaving this section; clear local highlight and let global handler continue.
+  clearHeroFocus();
   // If next is null, let event bubble to global navigation
 }