Merge branch 'p6-w1-home-mobile' into dev

DeepDrftPublic.Client/Pages/Home.razor

@@ -6,13 +6,19 @@
 
 @* Hero - split 50/50 *@
 <section class="hero">
-    <div class="hero-left">
+    <MudGrid Spacing="0" Style="height: 100%;">
-        <DeepDrftHero />
+        <MudItem xs="12" md="6">
-    </div>
+            <div class="hero-left">
+                <DeepDrftHero />
+            </div>
+        </MudItem>
 
-    <div class="hero-right">
+        <MudItem xs="12" md="6">
-        <NowPlaying />
+            <div class="hero-right">
-    </div>
+                <NowPlaying />
+            </div>
+        </MudItem>
+    </MudGrid>
 </section>
 
 @* Divider *@
@@ -24,14 +30,18 @@
 
 @* Sound section *@
 <section class="section">
-    <div class="section-header">
+    <div class="section-header-grid">
-        <div>
+        <MudGrid Style="margin-bottom: 5rem;">
-            <div class="section-label">Genres &amp; Moods</div>
+            <MudItem xs="12" md="4">
-            <h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
+                <div class="section-label">Genres &amp; Moods</div>
-        </div>
+                <h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
-        <p class="section-body">
+            </MudItem>
-            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.
+            <MudItem xs="12" md="8">
-        </p>
+                <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">
@@ -104,41 +114,47 @@
 
 @* Split: origin + connect *@
 <div class="section-split">
-    <div class="split-left">
+    <MudGrid Spacing="0" Style="height: 100%;">
-        <div class="split-eyebrow">Our Origin</div>
+        <MudItem xs="12" md="6">
-        <h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
+            <div class="split-left">
-        <p class="split-body">
+                <div class="split-eyebrow">Our Origin</div>
-            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.
+                <h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
-        </p>
+                <p class="split-body">
-    </div>
+                    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>
 
-    <div class="split-right">
+        <MudItem xs="12" md="6">
-        <div class="connect-label">Stay Connected</div>
+            <div class="split-right">
-        <h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
+                <div class="connect-label">Stay Connected</div>
-        <div class="connect-options">
+                <h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
-            @* TODO: wire to subscription system when newsletter/alerts backend exists *@
+                <div class="connect-options">
-            <div class="connect-option">
+                    @* TODO: wire to subscription system when newsletter/alerts backend exists *@
-                <div class="option-icon">
+                    <div class="connect-option">
-                    <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 class="option-icon">
-                </div>
+                            <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>
-                    <div class="option-text-sub">New releases &amp; studio dispatches</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">
+        </MudItem>
-                <div class="option-icon">
+    </MudGrid>
-                    <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>
 
 @* CTA banner *@

DeepDrftPublic.Client/Pages/Home.razor.css

@@ -6,8 +6,6 @@
 /* ── HERO ── */
 .hero {
     min-height: 100vh;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     overflow: hidden;
 }
 
@@ -18,6 +16,7 @@
     padding: 6rem 3rem;
     position: relative;
     background: var(--deepdrft-white);
+    height: 100%;
 }
 
 .hero-right {
@@ -27,6 +26,13 @@
     flex-direction: column;
     justify-content: flex-end;
     overflow: hidden;
+    height: 100%;
+}
+
+@media (max-width: 960px) {
+    .hero { min-height: auto; }
+    .hero-left { padding: 4rem 1.5rem 3rem; }
+    .hero-right { min-height: 50vh; }
 }
 
 /* ── DIVIDER ── */
@@ -59,12 +65,10 @@
     background: var(--deepdrft-white);
 }
 
-.section-header {
+@media (min-width: 960px) {
-    display: grid;
+    .section-header-grid {
-    grid-template-columns: 1fr 2fr;
+        align-items: end;
-    gap: 4rem;
+    }
-    margin-bottom: 5rem;
-    align-items: end;
 }
 
 .section-label {
@@ -109,6 +113,14 @@
     margin-bottom: 4rem;
 }
 
+@media (max-width: 960px) {
+    .genre-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 600px) {
+    .genre-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
 .genre-card {
     background: var(--deepdrft-white);
     padding: 2rem 1.5rem;
@@ -191,6 +203,20 @@
 
 .feature-card:hover { background: rgba(250, 250, 248, 0.04); }
 
+/* Below md: per-card border-right leaves dangling hairlines when columns
+   collapse, so switch to border-bottom dividers instead. */
+@media (max-width: 960px) {
+    .features-grid { grid-template-columns: repeat(2, 1fr); }
+    .feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); }
+    .feature-card:last-child { border-bottom: none; }
+}
+
+@media (max-width: 600px) {
+    .features-grid { grid-template-columns: 1fr; }
+    .feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); }
+    .feature-card:last-child { border-bottom: none; }
+}
+
 .feature-icon {
     width: 2.5rem;
     height: 2.5rem;
@@ -227,11 +253,13 @@
 
 /* ── SPLIT: ORIGIN + CONNECT ── */
 .section-split {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     min-height: 60vh;
 }
 
+@media (max-width: 960px) {
+    .section-split { min-height: auto; }
+}
+
 .split-left {
     background: var(--deepdrft-green);
     padding: 6rem 4rem;
@@ -240,6 +268,7 @@
     justify-content: center;
     position: relative;
     overflow: hidden;
+    height: 100%;
 }
 
 .split-left::before {
@@ -259,6 +288,7 @@
     flex-direction: column;
     justify-content: center;
     background: var(--deepdrft-white);
+    height: 100%;
 }
 
 .split-eyebrow {
@@ -442,6 +472,7 @@
     position: relative;
     z-index: 1;
     flex-shrink: 0;
+    flex-wrap: wrap;
 }
 
 .btn-white {
@@ -480,3 +511,29 @@
 }
 
 .btn-outline-white:hover { border-color: var(--deepdrft-white); }
+
+@media (max-width: 600px) {
+    .cta-banner {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2rem;
+        padding: 4rem 1.5rem;
+    }
+
+    .cta-actions {
+        width: 100%;
+    }
+
+    .btn-white,
+    .btn-outline-white {
+        flex: 1;
+        text-align: center;
+        min-width: 140px;
+    }
+
+    /* At 22rem the "DRFT" watermark forces horizontal scroll on mobile. */
+    .cta-banner::before {
+        font-size: 8rem;
+        right: -0.5rem;
+    }
+}