From 968d2036b4be5895a7d23aa4c5ac93676770b16d Mon Sep 17 00:00:00 2001
From: Tim Rijkse <trijkse@gmail.com>
Date: Thu, 15 Jan 2026 14:18:29 +0100
Subject: [PATCH] fix: stretch grid item height for category card

---
 css/styles.css                 | 1 +
 js/components/category-card.js | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/css/styles.css b/css/styles.css
index b641b9e..4e72a74 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -428,6 +428,7 @@ site-content {
   grid-template-columns: repeat(2, 1fr);
   gap: var(--spacing-md, 1rem); /* 16px */
   padding-bottom: var(--spacing-md, 1rem);
+  align-items: stretch;
 }
 
 /* ==========================================================================
diff --git a/js/components/category-card.js b/js/components/category-card.js
index 22655a7..47c413b 100644
--- a/js/components/category-card.js
+++ b/js/components/category-card.js
@@ -48,12 +48,14 @@ class CategoryCard extends HTMLElement {
       <style>
         :host {
           display: block;
+          height: 100%;
         }
 
         .card {
           display: flex;
           flex-direction: column;
           align-items: center;
+          height: 100%;
           color: inherit;
           padding: var(--spacing-md, 0.875rem) var(--spacing-xs, 0.25rem);
           text-decoration: none;