From 6b8367377b773233b86594664185e46940e95edf Mon Sep 17 00:00:00 2001
From: Alex Dunmow <alex@dx314.com>
Date: Sun, 5 Jul 2026 17:53:54 +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/membership_tiers.ninjatpl         |  2 +-
 manifest.yaml                            | 12 ------------
 templates/overrides/gotham/hero.ninjatpl |  2 +-
 3 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/blocks/membership_tiers.ninjatpl b/blocks/membership_tiers.ninjatpl
index 2fb7190..62e315a 100644
--- a/blocks/membership_tiers.ninjatpl
+++ b/blocks/membership_tiers.ninjatpl
@@ -7,7 +7,7 @@
       {% if intro %}<p class="mx-auto mt-4 max-w-2xl text-lg italic" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ intro }}</p>{% endif %}
     </div>
     {% if tiers %}
-    <div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
       {% for tier in tiers %}
       <article class="reveal reel-frame flex flex-col bg-card text-card-foreground {% if tier.featured %}reel-foil{% endif %}">
         <div class="flex items-baseline justify-between gap-2">
diff --git a/manifest.yaml b/manifest.yaml
index f7e0333..99f7b0e 100644
--- a/manifest.yaml
+++ b/manifest.yaml
@@ -227,16 +227,4 @@ css:
     /* Raw CSS (outside @layer, JIT-scan-independent) — layout guarantees the
      * host Tailwind scan may not reliably emit from theme .ninjatpl files.
      * Imageless hero: a compact letterboxed text plate, never a 75vh void. */
-    .gotham-hero-plate { min-height: 520px; }
     @media (max-width: 640px) { .gotham-hero-plate { min-height: 380px; } }
-
-    /* Mobile collapse safety net — guarantee persona/override grids fall to a
-     * single column at ~<=640px even if the responsive prefix classes are not
-     * compiled from the theme templates. Base is already 1-col in the markup;
-     * this hard-forces it so a dropped sm:/md:/lg: prefix can never strand a
-     * wide multi-column grid on a phone (no horizontal overflow). */
-    @media (max-width: 640px) {
-      [data-block="gotham:events_marquee"] ul > li { grid-template-columns: 1fr !important; }
-      [data-block="gotham:membership_tiers"] .grid,
-      [data-block-override="gotham:feature-grid"] .grid { grid-template-columns: 1fr !important; }
-    }
diff --git a/templates/overrides/gotham/hero.ninjatpl b/templates/overrides/gotham/hero.ninjatpl
index 2159768..9408b0e 100644
--- a/templates/overrides/gotham/hero.ninjatpl
+++ b/templates/overrides/gotham/hero.ninjatpl
@@ -32,7 +32,7 @@
 {% else %}
 {% set align = "center" %}
 {% if variant == "left-aligned" %}{% set align = "left" %}{% endif %}
-<section data-block-override="gotham:hero" data-spotlight class="hero relative flex flex-col overflow-hidden bg-background text-foreground film-grain {% if not hasImage %}spotlight gotham-hero-plate{% elif minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
+<section data-block-override="gotham:hero" data-spotlight class="hero relative flex flex-col overflow-hidden bg-background text-foreground film-grain {% if not hasImage %}spotlight gotham-hero-plate min-h-[520px]{% elif minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
 {% if hasImage %}<div class="absolute inset-0 z-0">{% img backgroundImage alt=headlineText class="h-full w-full object-cover" layout="hero" %}{% if showOverlay %}<div class="absolute inset-0 {% if overlayColor == "light" %}bg-background/60{% elif overlayColor == "primary" %}bg-primary/50{% elif overlayOpacity <= 30 %}bg-black/30{% elif overlayOpacity <= 50 %}bg-black/50{% elif overlayOpacity <= 70 %}bg-black/70{% else %}bg-black/80{% endif %}"></div>{% endif %}<div class="absolute inset-0 letterbox-scrim" aria-hidden="true"></div></div>{% endif %}
 <div class="pointer-events-none absolute inset-x-0 top-0 z-[2] h-px bg-[hsl(var(--primary))]" aria-hidden="true"></div>
 <div class="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-px bg-[hsl(var(--primary))]" aria-hidden="true"></div>