fix(css): move card styles to AlbumCard.razor.css, use ::deep for grid-to-card selectors

MilkStream.Client/Components/Pages/Albums.razor.css

@@ -13,91 +13,21 @@
     padding: 0 8px;
 }
 
-/* ── Card shared ── */
-.album-card {
-    overflow: hidden;
-    border-radius: 4px;
-    cursor: pointer;
-    background: var(--bs-dark, #1a1a1a);
-    transition: filter 0.2s, transform 0.2s;
-    position: relative;
-}
-
-.album-card:hover {
-    filter: brightness(1.1);
-}
-
-.album-card img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-.album-card-fallback {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bs-dark, #1a1a1a);
-    color: var(--bs-secondary, #666);
-    font-size: 2rem;
-}
-
-.album-grid.masonry .album-card {
+/* ── Card in masonry ── */
+.album-grid.masonry ::deep .album-card {
     break-inside: avoid;
     margin-bottom: 8px;
 }
 
-.album-grid.grid .album-card {
+.album-grid.grid ::deep .album-card {
     aspect-ratio: 1;
 }
 
-.album-grid.masonry .album-card-fallback {
+.album-grid.masonry ::deep .album-card-fallback {
     aspect-ratio: 4 / 3;
     height: auto;
 }
 
-/* ── Info overlay ── */
-.album-card-info {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 12px 10px 8px;
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
-    pointer-events: none;
-}
-
-.album-card-title {
-    display: block;
-    color: #fff;
-    font-size: 0.85rem;
-    font-weight: 600;
-    line-height: 1.3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.album-card-person {
-    display: block;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.75rem;
-    line-height: 1.3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.album-card-count {
-    display: block;
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 0.7rem;
-    line-height: 1.3;
-    margin-top: 2px;
-}
-
 .masonry-sentinel {
     height: 1px;
 }

MilkStream.Client/Components/Shared/AlbumCard.razor.css

@@ -0,0 +1,68 @@
+.album-card {
+    overflow: hidden;
+    border-radius: 4px;
+    cursor: pointer;
+    background: var(--bs-dark, #1a1a1a);
+    transition: filter 0.2s, transform 0.2s;
+    position: relative;
+}
+
+.album-card:hover {
+    filter: brightness(1.1);
+}
+
+.album-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.album-card-fallback {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bs-dark, #1a1a1a);
+    color: var(--bs-secondary, #666);
+    font-size: 2rem;
+}
+
+.album-card-info {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 12px 10px 8px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+    pointer-events: none;
+}
+
+.album-card-title {
+    display: block;
+    color: #fff;
+    font-size: 0.85rem;
+    font-weight: 600;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.album-card-person {
+    display: block;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.75rem;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.album-card-count {
+    display: block;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.7rem;
+    line-height: 1.3;
+    margin-top: 2px;
+}