Merge branch 'xs-responsive' into dev

DeepDrftPublic.Client/Controls/NowPlayingStats.razor.css

@@ -26,3 +26,10 @@
     text-transform: uppercase;
     margin-top: 0.4rem;
 }
+
+@media (max-width: 599px) {
+    .hero-stat-row {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+}

DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css

@@ -45,4 +45,17 @@
     font-size: 0.58rem;
     letter-spacing: 0.12em;
     color: var(--deepdrft-muted);
-}
+}
+
+@media (max-width: 599px) {
+    .deepdrft-footer {
+        padding: 1.5rem;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .deepdrft-footer-copy {
+        width: 100%;
+        text-align: right;
+    }
+}

DeepDrftPublic.Client/Pages/Home.razor.css

@@ -117,7 +117,7 @@
     .genre-grid { grid-template-columns: repeat(3, 1fr); }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 599px) {
     .genre-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
@@ -211,7 +211,7 @@
     .feature-card:last-child { border-bottom: none; }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 599px) {
     .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; }
@@ -512,7 +512,7 @@
 
 .btn-outline-white:hover { border-color: var(--deepdrft-white); }
 
-@media (max-width: 600px) {
+@media (max-width: 599px) {
     .cta-banner {
         flex-direction: column;
         align-items: flex-start;