From f63d2e931f107758cc8899feb248e3b8d13e2a25 Mon Sep 17 00:00:00 2001
From: Alex Dunmow <alex@dx314.com>
Date: Sun, 5 Jul 2026 17:53:45 +0800
Subject: [PATCH] refactor: replace hand-rolled utility CSS with Tailwind
 classes (host build now scans theme templates)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 blocks/lookbook.ninjatpl |  2 +-
 manifest.yaml            | 15 +--------------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/blocks/lookbook.ninjatpl b/blocks/lookbook.ninjatpl
index 77d078a..fbb5f8b 100644
--- a/blocks/lookbook.ninjatpl
+++ b/blocks/lookbook.ninjatpl
@@ -4,7 +4,7 @@
     {% if heading %}<h2 class="mb-heading text-3xl md:text-5xl text-foreground">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="mt-4 max-w-2xl text-deck text-muted-foreground">{{ intro }}</p>{% endif %}
     {% if looks %}
-    <div class="mt-10 mb-grid-resp mb-cols-3">
+    <div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
       {% for look in looks %}
       <figure class="mb-reveal flex flex-col">
         {% if look.image %}<div class="mb-duotone aspect-[3/4] w-full overflow-hidden">{% img look.image alt=look.caption|default:"" class="h-full w-full object-cover" %}</div>{% endif %}
diff --git a/manifest.yaml b/manifest.yaml
index 1664020..41e0f1b 100644
--- a/manifest.yaml
+++ b/manifest.yaml
@@ -392,25 +392,12 @@ css:
         .mb-frame-half, .mb-frame-full, .mb-frame-tall { grid-column: 1 / -1; grid-row: auto; }
       }
 
-      /* --- Guaranteed responsive helpers — host Tailwind JIT does NOT reliably scan
-       *     theme .ninjatpl files, so any layout-critical responsive rule lives here as
-       *     literal CSS (always emitted) instead of interpolated/utility classes that
-       *     could be dropped (grids that then never collapse on mobile). --- */
+      /* --- River container (centred max-width column for the story river slot) --- */
       .mb-river {
         max-width: 64rem;
         margin-left: auto; margin-right: auto;
         padding-left: 1rem; padding-right: 1rem;
       }
-      .mb-grid-resp { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
-      @media (min-width: 640px) {
-        .mb-grid-resp.mb-cols-2, .mb-grid-resp.mb-cols-3, .mb-grid-resp.mb-cols-4 {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-      }
-      @media (min-width: 1024px) {
-        .mb-grid-resp.mb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-        .mb-grid-resp.mb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-      }
 
       /* --- Color-block accent panel --- */
       .colorblock-accent { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }