From 8b3e7e0620b3820489ba28fdbe84569644e26d3a Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sun, 7 Jun 2026 07:48:26 -0400
Subject: [PATCH] fix: wrap hero and section-split MudGrids in plain HTML
 elements so CSS isolation scope attributes reach .hero and .section-split
 rules

---
 DeepDrftPublic.Client/Pages/Home.razor | 120 ++++++++++++++-----------
 1 file changed, 67 insertions(+), 53 deletions(-)

diff --git a/DeepDrftPublic.Client/Pages/Home.razor b/DeepDrftPublic.Client/Pages/Home.razor
index ff6bd68..4ae0fbf 100644
--- a/DeepDrftPublic.Client/Pages/Home.razor
+++ b/DeepDrftPublic.Client/Pages/Home.razor
@@ -5,15 +5,21 @@
 <PageTitle>Deep DRFT - Electronic Music Collective</PageTitle>
 
 @* Hero - split 50/50 *@
-<MudGrid Spacing="0" Class="hero">
-    <MudItem xs="12" md="6" Class="hero-left">
-        <DeepDrftHero />
-    </MudItem>
+<section class="hero">
+    <MudGrid Spacing="0" Style="height: 100%;">
+        <MudItem xs="12" md="6">
+            <div class="hero-left">
+                <DeepDrftHero />
+            </div>
+        </MudItem>
 
-    <MudItem xs="12" md="6" Class="hero-right">
-        <NowPlaying />
-    </MudItem>
-</MudGrid>
+        <MudItem xs="12" md="6">
+            <div class="hero-right">
+                <NowPlaying />
+            </div>
+        </MudItem>
+    </MudGrid>
+</section>
 
 @* Divider *@
 <div class="section-divider">
@@ -24,17 +30,19 @@
 
 @* Sound section *@
 <section class="section">
-    <MudGrid Class="section-header-grid" Style="margin-bottom: 5rem;">
-        <MudItem xs="12" md="4">
-            <div class="section-label">Genres &amp; Moods</div>
-            <h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
-        </MudItem>
-        <MudItem xs="12" md="8">
-            <p class="section-body">
-                From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette &mdash; not a cage. Each session begins as something and ends as something else entirely.
-            </p>
-        </MudItem>
-    </MudGrid>
+    <div class="section-header-grid">
+        <MudGrid Style="margin-bottom: 5rem;">
+            <MudItem xs="12" md="4">
+                <div class="section-label">Genres &amp; Moods</div>
+                <h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
+            </MudItem>
+            <MudItem xs="12" md="8">
+                <p class="section-body">
+                    From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette &mdash; not a cage. Each session begins as something and ends as something else entirely.
+                </p>
+            </MudItem>
+        </MudGrid>
+    </div>
 
     <div class="genre-grid">
         @* TODO Phase 2.2: wire each genre to /genres/{slug} *@
@@ -105,43 +113,49 @@
 </section>
 
 @* Split: origin + connect *@
-<MudGrid Spacing="0" Class="section-split">
-    <MudItem xs="12" md="6" Class="split-left">
-        <div class="split-eyebrow">Our Origin</div>
-        <h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
-        <p class="split-body">
-            Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio &mdash; tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
-        </p>
-    </MudItem>
+<div class="section-split">
+    <MudGrid Spacing="0" Style="height: 100%;">
+        <MudItem xs="12" md="6">
+            <div class="split-left">
+                <div class="split-eyebrow">Our Origin</div>
+                <h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
+                <p class="split-body">
+                    Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio &mdash; tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
+                </p>
+            </div>
+        </MudItem>
 
-    <MudItem xs="12" md="6" Class="split-right">
-        <div class="connect-label">Stay Connected</div>
-        <h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
-        <div class="connect-options">
-            @* TODO: wire to subscription system when newsletter/alerts backend exists *@
-            <div class="connect-option">
-                <div class="option-icon">
-                    <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
-                </div>
-                <div>
-                    <div class="option-text-label">Newsletter</div>
-                    <div class="option-text-sub">New releases &amp; studio dispatches</div>
+        <MudItem xs="12" md="6">
+            <div class="split-right">
+                <div class="connect-label">Stay Connected</div>
+                <h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
+                <div class="connect-options">
+                    @* TODO: wire to subscription system when newsletter/alerts backend exists *@
+                    <div class="connect-option">
+                        <div class="option-icon">
+                            <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
+                        </div>
+                        <div>
+                            <div class="option-text-label">Newsletter</div>
+                            <div class="option-text-sub">New releases &amp; studio dispatches</div>
+                        </div>
+                    </div>
+                    <div class="connect-option">
+                        <div class="option-icon">
+                            <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
+                        </div>
+                        <div>
+                            <div class="option-text-label">Live Alerts</div>
+                            <div class="option-text-sub">Know the moment we go live</div>
+                        </div>
+                    </div>
                 </div>
+                @* TODO: subscription form lives behind this CTA *@
+                <button class="btn-primary connect-cta" type="button">Subscribe Free</button>
             </div>
-            <div class="connect-option">
-                <div class="option-icon">
-                    <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
-                </div>
-                <div>
-                    <div class="option-text-label">Live Alerts</div>
-                    <div class="option-text-sub">Know the moment we go live</div>
-                </div>
-            </div>
-        </div>
-        @* TODO: subscription form lives behind this CTA *@
-        <button class="btn-primary connect-cta" type="button">Subscribe Free</button>
-    </MudItem>
-</MudGrid>
+        </MudItem>
+    </MudGrid>
+</div>
 
 @* CTA banner *@
 <section class="cta-banner">