fix(portfolio): mp-card--reflect — use --surface (was undefined --card) for tint, fix pseudo-element stacking; regenerate broken placeholder

public/css/main.css

@@ -3446,15 +3446,21 @@ html[data-theme="light"] .hero__portrait-shell {
    текст поверх в нижней части. */
 .mp-card--reflect {
   position: relative;
+  isolation: isolate;
   flex-direction: column;
   aspect-ratio: 4 / 3;
+  min-height: 16rem;
   overflow: hidden;
 }
 .mp-card--reflect .mp-card__media {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   width: 100%;
   height: 100%;
+  z-index: 0;
   padding: 0;
   margin: 0;
   border: 0;
@@ -3468,17 +3474,26 @@ html[data-theme="light"] .hero__portrait-shell {
   border-radius: 0;
   object-fit: cover;
 }
-/* прогрессивное размытие + тонировка снизу вверх */
+/* прогрессивное размытие + тонировка снизу вверх.
+   blur — через backdrop-filter по всей карточке;
+   тонировка — градиент от непрозрачной --surface снизу к прозрачности вверху
+   (обход mask-image/color-mix ради совместимости + фолбэки). */
 .mp-card--reflect::before {
   content: "";
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   z-index: 1;
-  background: color-mix(in srgb, var(--card) 60%, transparent);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
-  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 85%);
-  mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 85%);
+  background: var(--surface);
+  background: linear-gradient(to top, var(--surface), rgba(0, 0, 0, 0));
+  background: linear-gradient(to top,
+    color-mix(in srgb, var(--surface) 58%, transparent) 0%,
+    color-mix(in srgb, var(--surface) 34%, transparent) 45%,
+    transparent 80%);
   pointer-events: none;
 }
 /* зеркальное отображение (отражение) внизу */
@@ -3488,21 +3503,22 @@ html[data-theme="light"] .hero__portrait-shell {
   left: 0;
   right: 0;
   bottom: 0;
-  height: 45%;
-  z-index: 1;
+  top: auto;
+  height: 50%;
+  z-index: 2;
   background-image: var(--card-cover);
   background-size: cover;
   background-position: center;
   transform: scaleY(-1);
   transform-origin: bottom;
-  opacity: 0.55;
+  opacity: 0.6;
   -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
   mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
   pointer-events: none;
 }
 .mp-card--reflect .mp-card__body {
   position: relative;
-  z-index: 2;
+  z-index: 3;
   margin-top: auto;
   padding: 1.2rem 1.35rem 1.3rem;
 }