From 7e297300727df0c33ee1ac8bf4901e52cf1a83c5 Mon Sep 17 00:00:00 2001
From: Alex Dunmow <alex@dx314.com>
Date: Sun, 5 Jul 2026 17:40:20 +0800
Subject: [PATCH] fix(theme): drive responsive layout from theme-owned CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Host Tailwind JIT does not scan theme templates, so responsive grid/hero
utilities (sm:/md:/lg:grid-cols-*, min-h-screen, arbitrary values) are
dropped and multi-column layouts collapse to one column. Ship the
load-bearing responsive layout as compiled theme CSS and point the
override templates at it. Layout only — colours stay on semantic tokens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 assets/style.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/assets/style.css b/assets/style.css
index f6b99f4..619369e 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -178,3 +178,91 @@
         50%      { border-radius: 58% 42% 38% 62% / 56% 58% 42% 44%; }
     }
 }
+
+/* ── Responsive layout primitives ──────────────────────────────────────────
+   These are shipped as compiled CSS (not Tailwind utilities) on purpose: the
+   host Tailwind JIT does not scan a theme's page/layout, override or
+   master-page templates, so responsive grid utilities that live only in those
+   files (e.g. sm:grid-cols-3, md:grid-cols-[2fr_1fr]) are silently dropped and
+   never collapse or expand. Compiling them here guarantees the layout works on
+   both mobile and desktop. Layout-only — no colour tokens. */
+
+/* Donation CTA — preset amount tiles: 1-up on mobile, 3-up from 640px. */
+.earthen-amount-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+}
+@media (min-width: 640px) {
+    .earthen-amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+/* Donation CTA — custom amount + submit: stack on mobile, inline from 640px. */
+.earthen-amount-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: stretch;
+}
+@media (min-width: 640px) {
+    .earthen-amount-row { flex-direction: row; align-items: center; }
+}
+
+/* Field Journal — post cards: 1-up mobile, 2-up >=640px, 3-up >=1024px. */
+.earthen-post-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+}
+@media (min-width: 640px) {
+    .earthen-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (min-width: 1024px) {
+    .earthen-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+/* Contact — form + aside: stacked on mobile, 2fr/1fr from 768px. */
+.earthen-contact-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3rem;
+}
+@media (min-width: 768px) {
+    .earthen-contact-grid { grid-template-columns: 2fr 1fr; }
+}
+
+/* Article — body + byline rail: stacked on mobile, main + 260px rail >=1024px. */
+.earthen-article-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3rem;
+}
+@media (min-width: 1024px) {
+    .earthen-article-grid { grid-template-columns: minmax(0, 1fr) 260px; }
+}
+
+/* Hero — comfortable padded band. A text-only (image-less) hero uses padding
+   only, so it never balloons into a tall empty band. When a background image
+   IS present the taller band is applied via the --media modifier. */
+.earthen-hero {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+}
+@media (min-width: 768px) {
+    .earthen-hero { padding-top: 6rem; padding-bottom: 6rem; }
+}
+.earthen-hero.earthen-hero--media {
+    min-height: 60vh;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+}
+@media (min-width: 768px) {
+    .earthen-hero.earthen-hero--media { min-height: 72vh; }
+}
+
+/* Split hero — the media column needs a floor so its absolutely-positioned
+   image has height to fill. Only rendered when an image is present. */
+.earthen-hero-split-media {
+    position: relative;
+    min-height: 320px;
+}