From f550f703180f665f6b54d3a0df947f74ea44cfdf Mon Sep 17 00:00:00 2001
From: Hermes <hermes@local>
Date: Wed, 16 Sep 2026 16:14:07 +0200
Subject: [PATCH] feat(portfolio): add mp-card--bleed variant, use in Portfolio
 block + design-system

---
 public/cases/design-system/index.html         | 26 +++++++++----------
 .../cases/template-elements-demo/index.html   | 14 +++++-----
 public/css/main.css                           | 25 ++++++++++++++++++
 public/en/cases/design-system/index.html      | 26 +++++++++----------
 .../cases/template-elements-demo/index.html   | 14 +++++-----
 public/en/index.html                          | 14 +++++-----
 public/index.html                             | 14 +++++-----
 src/pages/cases/design-system.en.html         | 26 +++++++++----------
 src/pages/cases/design-system.html            | 26 +++++++++----------
 src/partials/projects-section-mp.en.html      | 14 +++++-----
 src/partials/projects-section-mp.html         | 14 +++++-----
 11 files changed, 119 insertions(+), 94 deletions(-)

diff --git a/public/cases/design-system/index.html b/public/cases/design-system/index.html
index 9758ee3..6fcf39e 100644
--- a/public/cases/design-system/index.html
+++ b/public/cases/design-system/index.html
@@ -937,20 +937,12 @@
         </div>
         <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
 
-        <h3>Карточка портфолио — bleed</h3>
+        <h3>Карточка портфолио — bleed (mp-card)</h3>
         <div class="sg-portfolio-wrap">
-          <a class="portfolio-card portfolio-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
-            <div class="portfolio-card__body">
-              <h3 class="portfolio-card__title">portfolio-card--bleed</h3>
-              <p class="portfolio-card__summary">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
-              <ul class="portfolio-card__tags" aria-label="Теги">
-                <li class="portfolio-card__tag">Демо</li>
-                <li class="portfolio-card__tag">UI</li>
-              </ul>
-            </div>
-            <div class="portfolio-card__cover" aria-hidden="true">
+          <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
+            <div class="mp-card__media" aria-hidden="true">
               <img
-                class="portfolio-card__image"
+                class="mp-card__image"
                 src="../../assets/shared/placeholder.webp"
                 alt=""
                 width="400"
@@ -958,9 +950,17 @@
                 decoding="async"
               />
             </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card--bleed</h3>
+              <ul class="mp-card__tags" aria-label="Теги">
+                <li class="mp-card__tag">Демо</li>
+                <li class="mp-card__tag">UI</li>
+              </ul>
+              <p class="mp-card__desc">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
+            </div>
           </a>
         </div>
-        <p class="sg-label">.portfolio-card--bleed — изображение bleed внизу справа</p>
+        <p class="sg-label">.mp-card--bleed — текст сверху, изображение bleed внизу справа</p>
 
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
diff --git a/public/cases/template-elements-demo/index.html b/public/cases/template-elements-demo/index.html
index b3a3a93..bf398cc 100644
--- a/public/cases/template-elements-demo/index.html
+++ b/public/cases/template-elements-demo/index.html
@@ -692,7 +692,7 @@
           <h2 class="section__title">Портфолио</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack" href="../ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -715,7 +715,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack" href="../lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -738,7 +738,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="../manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -761,7 +761,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="../mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -784,7 +784,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack" href="../orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -806,7 +806,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="../task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -829,7 +829,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
diff --git a/public/css/main.css b/public/css/main.css
index 322394c..06cd385 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -3409,6 +3409,31 @@ html[data-theme="light"] .hero__portrait-shell {
   aspect-ratio: 16 / 9;
 }
 
+/* Вариант: текст сверху (заголовок → описание → теги),
+   изображение прижато к нижнему правому углу без отступов;
+   угол скругляется самой карточкой (overflow:hidden + border-radius). */
+.mp-card--bleed {
+  flex-direction: column-reverse;
+}
+.mp-card--bleed .mp-card__media {
+  width: 60%;
+  align-self: flex-end;
+  aspect-ratio: 4 / 3;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+.mp-card--bleed .mp-card__image {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+  object-fit: cover;
+}
+.mp-card--bleed .mp-card__title { order: 0; }
+.mp-card--bleed .mp-card__desc { order: 1; }
+.mp-card--bleed .mp-card__tags { order: 2; }
+
 .mp-card--horizontal {
   flex-direction: row;
   align-items: stretch;
diff --git a/public/en/cases/design-system/index.html b/public/en/cases/design-system/index.html
index 5c99503..6a3f428 100644
--- a/public/en/cases/design-system/index.html
+++ b/public/en/cases/design-system/index.html
@@ -936,20 +936,12 @@
         </div>
         <p class="sg-label">.portfolio-card and child BEM classes</p>
 
-        <h3>Portfolio Card — bleed</h3>
+        <h3>Portfolio Card — bleed (mp-card)</h3>
         <div class="sg-portfolio-wrap">
-          <a class="portfolio-card portfolio-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
-            <div class="portfolio-card__body">
-              <h3 class="portfolio-card__title">portfolio-card--bleed</h3>
-              <p class="portfolio-card__summary">Image pinned to the bottom-right corner with no padding; the corner is rounded by the card.</p>
-              <ul class="portfolio-card__tags" aria-label="Tags">
-                <li class="portfolio-card__tag">Demo</li>
-                <li class="portfolio-card__tag">UI</li>
-              </ul>
-            </div>
-            <div class="portfolio-card__cover" aria-hidden="true">
+          <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
+            <div class="mp-card__media" aria-hidden="true">
               <img
-                class="portfolio-card__image"
+                class="mp-card__image"
                 src="../../../assets/shared/placeholder.webp"
                 alt=""
                 width="400"
@@ -957,9 +949,17 @@
                 decoding="async"
               />
             </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card--bleed</h3>
+              <ul class="mp-card__tags" aria-label="Tags">
+                <li class="mp-card__tag">Demo</li>
+                <li class="mp-card__tag">UI</li>
+              </ul>
+              <p class="mp-card__desc">Image pinned to the bottom-right corner, no padding; corner is rounded by the card.</p>
+            </div>
           </a>
         </div>
-        <p class="sg-label">.portfolio-card--bleed — image bleeds bottom-right</p>
+        <p class="sg-label">.mp-card--bleed — text on top, image bleeds bottom-right</p>
 
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
diff --git a/public/en/cases/template-elements-demo/index.html b/public/en/cases/template-elements-demo/index.html
index 4608e5c..2883166 100644
--- a/public/en/cases/template-elements-demo/index.html
+++ b/public/en/cases/template-elements-demo/index.html
@@ -692,7 +692,7 @@
           <h2 class="section__title">Portfolio</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack" href="../ai-platform-primo-rpa/" aria-label="AI platform — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../ai-platform-primo-rpa/" aria-label="AI platform — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -715,7 +715,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack" href="../lunacy/" aria-label="Graphics editor Lunacy — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../lunacy/" aria-label="Graphics editor Lunacy — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -738,7 +738,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="../manu-game-maker/" aria-label="MANU game engine — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../manu-game-maker/" aria-label="MANU game engine — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -761,7 +761,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="../mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -784,7 +784,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack" href="../orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -806,7 +806,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="../task-distribution-concept/" aria-label="Task distribution service concept — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-distribution-concept/" aria-label="Task distribution service concept — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -829,7 +829,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="../task-tracker/" aria-label="Task tracker for a back-office system — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-tracker/" aria-label="Task tracker for a back-office system — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
diff --git a/public/en/index.html b/public/en/index.html
index 1c464b2..65a6f51 100644
--- a/public/en/index.html
+++ b/public/en/index.html
@@ -303,7 +303,7 @@
           <h2 class="section__title">Portfolio</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/ai-platform-primo-rpa/" aria-label="AI platform — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/ai-platform-primo-rpa/" aria-label="AI platform — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -326,7 +326,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/lunacy/" aria-label="Graphics editor Lunacy — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/lunacy/" aria-label="Graphics editor Lunacy — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -349,7 +349,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/manu-game-maker/" aria-label="MANU game engine — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/manu-game-maker/" aria-label="MANU game engine — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -372,7 +372,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -395,7 +395,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -417,7 +417,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/task-distribution-concept/" aria-label="Task distribution service concept — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-distribution-concept/" aria-label="Task distribution service concept — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -440,7 +440,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/task-tracker/" aria-label="Task tracker for a back-office system — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-tracker/" aria-label="Task tracker for a back-office system — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
diff --git a/public/index.html b/public/index.html
index 4cb36ef..76ec2a8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -303,7 +303,7 @@
           <h2 class="section__title">Портфолио</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -326,7 +326,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -349,7 +349,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -372,7 +372,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -395,7 +395,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -417,7 +417,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -440,7 +440,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
diff --git a/src/pages/cases/design-system.en.html b/src/pages/cases/design-system.en.html
index 7f6ef30..69e2c94 100644
--- a/src/pages/cases/design-system.en.html
+++ b/src/pages/cases/design-system.en.html
@@ -748,20 +748,12 @@
         </div>
         <p class="sg-label">.portfolio-card and child BEM classes</p>
 
-        <h3>Portfolio Card — bleed</h3>
+        <h3>Portfolio Card — bleed (mp-card)</h3>
         <div class="sg-portfolio-wrap">
-          <a class="portfolio-card portfolio-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
-            <div class="portfolio-card__body">
-              <h3 class="portfolio-card__title">portfolio-card--bleed</h3>
-              <p class="portfolio-card__summary">Image pinned to the bottom-right corner with no padding; the corner is rounded by the card.</p>
-              <ul class="portfolio-card__tags" aria-label="Tags">
-                <li class="portfolio-card__tag">Demo</li>
-                <li class="portfolio-card__tag">UI</li>
-              </ul>
-            </div>
-            <div class="portfolio-card__cover" aria-hidden="true">
+          <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
+            <div class="mp-card__media" aria-hidden="true">
               <img
-                class="portfolio-card__image"
+                class="mp-card__image"
                 src="{{assetPrefix}}assets/shared/placeholder.webp"
                 alt=""
                 width="400"
@@ -769,9 +761,17 @@
                 decoding="async"
               />
             </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card--bleed</h3>
+              <ul class="mp-card__tags" aria-label="Tags">
+                <li class="mp-card__tag">Demo</li>
+                <li class="mp-card__tag">UI</li>
+              </ul>
+              <p class="mp-card__desc">Image pinned to the bottom-right corner, no padding; corner is rounded by the card.</p>
+            </div>
           </a>
         </div>
-        <p class="sg-label">.portfolio-card--bleed — image bleeds bottom-right</p>
+        <p class="sg-label">.mp-card--bleed — text on top, image bleeds bottom-right</p>
 
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
diff --git a/src/pages/cases/design-system.html b/src/pages/cases/design-system.html
index 1a97c4d..b63f505 100644
--- a/src/pages/cases/design-system.html
+++ b/src/pages/cases/design-system.html
@@ -749,20 +749,12 @@
         </div>
         <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
 
-        <h3>Карточка портфолио — bleed</h3>
+        <h3>Карточка портфолио — bleed (mp-card)</h3>
         <div class="sg-portfolio-wrap">
-          <a class="portfolio-card portfolio-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
-            <div class="portfolio-card__body">
-              <h3 class="portfolio-card__title">portfolio-card--bleed</h3>
-              <p class="portfolio-card__summary">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
-              <ul class="portfolio-card__tags" aria-label="Теги">
-                <li class="portfolio-card__tag">Демо</li>
-                <li class="portfolio-card__tag">UI</li>
-              </ul>
-            </div>
-            <div class="portfolio-card__cover" aria-hidden="true">
+          <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
+            <div class="mp-card__media" aria-hidden="true">
               <img
-                class="portfolio-card__image"
+                class="mp-card__image"
                 src="{{assetPrefix}}assets/shared/placeholder.webp"
                 alt=""
                 width="400"
@@ -770,9 +762,17 @@
                 decoding="async"
               />
             </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card--bleed</h3>
+              <ul class="mp-card__tags" aria-label="Теги">
+                <li class="mp-card__tag">Демо</li>
+                <li class="mp-card__tag">UI</li>
+              </ul>
+              <p class="mp-card__desc">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
+            </div>
           </a>
         </div>
-        <p class="sg-label">.portfolio-card--bleed — изображение bleed внизу справа</p>
+        <p class="sg-label">.mp-card--bleed — текст сверху, изображение bleed внизу справа</p>
 
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
diff --git a/src/partials/projects-section-mp.en.html b/src/partials/projects-section-mp.en.html
index ecd90e9..c057879 100644
--- a/src/partials/projects-section-mp.en.html
+++ b/src/partials/projects-section-mp.en.html
@@ -3,7 +3,7 @@
           <h2 class="section__title">Portfolio</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -26,7 +26,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -49,7 +49,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -72,7 +72,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -95,7 +95,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -117,7 +117,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -140,7 +140,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
diff --git a/src/partials/projects-section-mp.html b/src/partials/projects-section-mp.html
index 36a77b2..0fc7b8b 100644
--- a/src/partials/projects-section-mp.html
+++ b/src/partials/projects-section-mp.html
@@ -3,7 +3,7 @@
           <h2 class="section__title">Портфолио</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -26,7 +26,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -49,7 +49,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -72,7 +72,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -95,7 +95,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -117,7 +117,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -140,7 +140,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"