feat: replace home genre cards with Music through Every Medium image section

DeepDrftPublic.Client/Pages/Home.razor.css

@@ -103,36 +103,36 @@
     align-self: end;
 }
 
-/* Genre grid */
-.genre-grid {
+/* ── MEDIUM GRID (Music through Every Medium) ── */
+.medium-grid {
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     background: var(--deepdrft-border);
     border: 1px solid var(--deepdrft-border);
     margin-bottom: 4rem;
 }
 
-@media (max-width: 960px) {
-    .genre-grid { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 959px) {
+    .medium-grid { grid-template-columns: repeat(2, 1fr); }
+    .medium-card:last-child { grid-column: 1 / -1; }
 }
 
 @media (max-width: 599px) {
-    .genre-grid { grid-template-columns: repeat(2, 1fr); }
+    .medium-grid { grid-template-columns: 1fr; }
+    .medium-card:last-child { grid-column: auto; }
 }
 
-.genre-card {
+.medium-card {
     background: var(--deepdrft-white);
-    padding: 2rem 1.5rem;
-    transition: background 0.3s, color 0.3s;
     cursor: pointer;
-    position: relative;
     overflow: hidden;
     text-decoration: none;
     display: block;
+    position: relative;
 }
 
-.genre-card::after {
+.medium-card::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -143,25 +143,63 @@
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s;
+    z-index: 1;
 }
 
-.genre-card:hover::after { transform: scaleX(1); }
-.genre-card:hover { background: #f3f6f4; }
+.medium-card:hover::after { transform: scaleX(1); }
 
-.genre-name {
-    font-family: var(--deepdrft-font-display);
-    font-size: 1.5rem;
-    font-weight: 400;
-    color: var(--deepdrft-navy);
-    margin-bottom: 0.5rem;
+.medium-image {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    background-size: cover;
+    background-position: center;
+    transition: transform 0.5s ease;
 }
 
-.genre-count {
+.medium-card:hover .medium-image { transform: scale(1.05); }
+
+.medium-scrim {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom,
+        rgba(17, 35, 56, 0.0) 40%,
+        rgba(17, 35, 56, 0.35) 100%);
+    transition: opacity 0.3s;
+    opacity: 0.7;
+}
+
+.medium-card:hover .medium-scrim { opacity: 1; }
+
+.medium-body {
+    padding: 2rem 1.5rem;
+    position: relative;
+}
+
+.medium-type {
     font-family: var(--deepdrft-font-mono);
     font-size: 0.58rem;
     letter-spacing: 0.2em;
     color: var(--deepdrft-muted);
     text-transform: uppercase;
+    margin-bottom: 0.6rem;
+}
+
+.medium-name {
+    font-family: var(--deepdrft-font-display);
+    font-size: 1.6rem;
+    font-weight: 400;
+    color: var(--deepdrft-navy);
+    margin-bottom: 0.75rem;
+    line-height: 1.1;
+}
+
+.medium-desc {
+    font-family: var(--deepdrft-font-body);
+    font-size: 0.82rem;
+    line-height: 1.65;
+    color: var(--deepdrft-navy);
+    opacity: 0.6;
 }
 
 /* ── DARK FEATURE SECTION ── */