From dd559cd1e9ddd26752c657e59df2bda2450ab815 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Fri, 3 Apr 2026 13:08:18 -0700
Subject: [PATCH] Improve foundation section responsive breakpoints

- Switch staircase to grid at 1200px (was 1024px) to prevent tall
  stairs from clipping at narrow desktop widths
- Add 2-col grid at 768px, compact horizontal cards at 520px
- Fix count crowding heading: use overflow hidden to gracefully
  hide count when card is too narrow instead of wrapping or cramming

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 public/css/main.css   | 47 ++++++++++++++++++++++++++++++++++-------
 public/css/styles.css | 49 +++++++++++++++++++++++++++++++++++++------
 2 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 2adbca615..fab8c9768 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1060,9 +1060,10 @@ code {
 
 .foundation-card-header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  align-items: baseline;
+  gap: var(--spacing-xs);
   margin-bottom: 8px;
+  overflow: hidden;
 }
 
 .foundation-card-label {
@@ -1076,7 +1077,7 @@ code {
   font-family: var(--font-mono);
   font-size: 0.7rem;
   color: var(--color-accent);
-  margin-top: 4px;
+  flex-shrink: 0;
 }
 
 .foundation-card-detail {
@@ -1154,20 +1155,21 @@ code {
 .anim-blink { animation: blink-key 1s step-end infinite; }
 @keyframes blink-key { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
 
-@media (max-width: 1024px) {
+/* Tablet: 3-col grid (switch before stairs clip) */
+@media (max-width: 1200px) {
   .foundation-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     height: auto;
     gap: var(--spacing-md);
     margin-top: var(--spacing-xl);
   }
   .foundation-column { height: auto; }
-  .foundation-card { height: auto; min-height: 220px; }
+  .foundation-card { height: auto; min-height: 200px; }
   .foundation-plinth { display: none; }
   .foundation-column:hover .foundation-card { transform: translateY(-4px); }
 
-  /* Enable hover animations on card hover for mobile grid */
+  /* Enable hover animations on card hover for grid */
   .foundation-card:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
   .foundation-card:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
   .foundation-card:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
@@ -1182,6 +1184,37 @@ code {
   .foundation-card:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
 }
 
+/* Small tablet: 2-col grid */
+@media (max-width: 768px) {
+  .foundation-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* Small mobile: compact horizontal cards */
+@media (max-width: 520px) {
+  .foundation-grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-sm);
+  }
+  .foundation-card {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    align-items: start;
+    min-height: auto;
+    padding: var(--spacing-sm) var(--spacing-md);
+    gap: 0 var(--spacing-md);
+  }
+  .foundation-card-viz {
+    grid-row: 1 / -1;
+    align-self: center;
+    height: auto;
+    margin-bottom: 0;
+  }
+  .foundation-card-header { margin-bottom: 2px; }
+  .foundation-card-label { font-size: 1.1rem; }
+  .foundation-card-detail { margin: 0; font-size: 0.8125rem; }
+}
+
 .foundation-cta {
   text-align: center;
 }
diff --git a/public/css/styles.css b/public/css/styles.css
index ba4c31c42..498054301 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -3247,9 +3247,10 @@ code {
 }
 .foundation-card-header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  align-items: baseline;
+  gap: var(--spacing-xs);
   margin-bottom: 8px;
+  overflow: hidden;
 }
 .foundation-card-label {
   font-family: var(--font-display);
@@ -3261,7 +3262,7 @@ code {
   font-family: var(--font-mono);
   font-size: 0.7rem;
   color: var(--color-accent);
-  margin-top: 4px;
+  flex-shrink: 0;
 }
 .foundation-card-detail {
   font-size: 0.875rem;
@@ -3474,10 +3475,10 @@ code {
     opacity: 0;
   }
 }
-@media (max-width: 1024px) {
+@media (max-width: 1200px) {
   .foundation-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     height: auto;
     gap: var(--spacing-md);
     margin-top: var(--spacing-xl);
@@ -3487,7 +3488,7 @@ code {
   }
   .foundation-card {
     height: auto;
-    min-height: 220px;
+    min-height: 200px;
   }
   .foundation-plinth {
     display: none;
@@ -3532,6 +3533,42 @@ code {
     animation: bounce-ball 1.5s linear infinite;
   }
 }
+@media (max-width: 768px) {
+  .foundation-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 520px) {
+  .foundation-grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-sm);
+  }
+  .foundation-card {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    align-items: start;
+    min-height: auto;
+    padding: var(--spacing-sm) var(--spacing-md);
+    gap: 0 var(--spacing-md);
+  }
+  .foundation-card-viz {
+    grid-row: 1 / -1;
+    align-self: center;
+    height: auto;
+    margin-bottom: 0;
+  }
+  .foundation-card-header {
+    margin-bottom: 2px;
+  }
+  .foundation-card-label {
+    font-size: 1.1rem;
+  }
+  .foundation-card-detail {
+    margin: 0;
+    font-size: 0.8125rem;
+  }
+}
 .foundation-cta {
   text-align: center;
 }