From 5f07f925f20a75366ce16ab369cfec00bcf37ec5 Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Thu, 17 Sep 2026 21:52:50 +0200
Subject: [PATCH] style(mp-card): restyle mp-card__tag to filled chips; sync
 design-system portfolio-card specimen to real homepage card

---
 public/cases/design-system/index.html    | 33 +++++++++++-----------
 public/css/main.css                      | 18 ++++++------
 public/en/cases/design-system/index.html | 35 ++++++++++++------------
 src/pages/cases/design-system.en.html    | 35 ++++++++++++------------
 src/pages/cases/design-system.html       | 33 +++++++++++-----------
 5 files changed, 80 insertions(+), 74 deletions(-)

diff --git a/public/cases/design-system/index.html b/public/cases/design-system/index.html
index 5beb38c..ede01ae 100644
--- a/public/cases/design-system/index.html
+++ b/public/cases/design-system/index.html
@@ -906,36 +906,37 @@
           <li class="hero__tag">UX/UI</li>
         </ul>
         <p class="sg-label">.hero__tags / .hero__tag</p>
-        <ul class="portfolio-card__tags" style="display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.5rem 0">
-          <li class="portfolio-card__tag">portfolio-card__tag</li>
-          <li class="portfolio-card__tag">Web App</li>
+        <ul class="mp-card__tags" aria-label="Демо тегов" style="display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; list-style: none; padding: 0; margin: 0.5rem 0">
+          <li class="mp-card__tag">mp-card__tag</li>
+          <li class="mp-card__tag">Web App</li>
         </ul>
-        <p class="sg-label">.portfolio-card__tags / .portfolio-card__tag</p>
+        <p class="sg-label">.mp-card__tags / .mp-card__tag</p>
 
         <h3>Карточка портфолио</h3>
         <div class="sg-portfolio-wrap">
-          <a class="portfolio-card" href="#components" tabindex="-1" aria-hidden="true">
-            <div class="portfolio-card__body">
-              <h3 class="portfolio-card__title">portfolio-card</h3>
-              <p class="portfolio-card__summary">Краткое описание проекта в две-три строки для демо Design System.</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-bottom" 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"
                 height="225"
+                loading="lazy"
                 decoding="async"
               />
             </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card — портфолио</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">Краткое описание проекта в две-три строки для демо Design System.</p>
+            </div>
           </a>
         </div>
-        <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
+        <p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
 
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
diff --git a/public/css/main.css b/public/css/main.css
index 07be508..19e2668 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -3349,15 +3349,17 @@ html[data-theme="light"] .hero__portrait-shell {
 .mp-card__tag {
   display: inline-flex;
   align-items: center;
-  padding: 0.22rem 0.58rem;
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: lowercase;
+  min-height: 1.95rem;
+  padding: 0.25rem 0.82rem;
+  border: 0;
+  border-radius: var(--radius-btn);
+  background: color-mix(in srgb, var(--surface) 62%, var(--bg-elevated) 38%);
   color: var(--text-muted);
-  border: 1px solid color-mix(in srgb, var(--line) 92%, var(--text-muted));
-  border-radius: 999px;
-  line-height: 1.2;
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  text-transform: none;
+  white-space: nowrap;
 }
 
 .mp-card__media {
diff --git a/public/en/cases/design-system/index.html b/public/en/cases/design-system/index.html
index 3371292..df685f5 100644
--- a/public/en/cases/design-system/index.html
+++ b/public/en/cases/design-system/index.html
@@ -348,7 +348,7 @@
       .sg-portfolio-wrap {
         max-width: 100%;
       }
-      .sg-portfolio-wrap .portfolio-card {
+      .sg-portfolio-wrap .mp-card {
         pointer-events: none;
       }
       .sg-section-demo.section {
@@ -905,36 +905,37 @@
           <li class="hero__tag">UX/UI</li>
         </ul>
         <p class="sg-label">.hero__tags / .hero__tag</p>
-        <ul class="portfolio-card__tags" style="display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.5rem 0">
-          <li class="portfolio-card__tag">portfolio-card__tag</li>
-          <li class="portfolio-card__tag">Web App</li>
+        <ul class="mp-card__tags" aria-label="Tag Demo" style="display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; list-style: none; padding: 0; margin: 0.5rem 0">
+          <li class="mp-card__tag">mp-card__tag</li>
+          <li class="mp-card__tag">Web App</li>
         </ul>
-        <p class="sg-label">.portfolio-card__tags / .portfolio-card__tag</p>
+        <p class="sg-label">.mp-card__tags / .mp-card__tag</p>
 
         <h3>Portfolio Card</h3>
         <div class="sg-portfolio-wrap">
-          <a class="portfolio-card" href="#components" tabindex="-1" aria-hidden="true">
-            <div class="portfolio-card__body">
-              <h3 class="portfolio-card__title">portfolio-card</h3>
-              <p class="portfolio-card__summary">A brief two- or three-line description of the project for the Design System demo.</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-bottom" 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"
                 height="225"
+                loading="lazy"
                 decoding="async"
               />
             </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card — portfolio</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">A brief two- or three-line description of the project for the Design System demo.</p>
+            </div>
           </a>
         </div>
-        <p class="sg-label">.portfolio-card and child BEM classes</p>
+        <p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</p>
 
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
diff --git a/src/pages/cases/design-system.en.html b/src/pages/cases/design-system.en.html
index 5be03e5..a6d006e 100644
--- a/src/pages/cases/design-system.en.html
+++ b/src/pages/cases/design-system.en.html
@@ -255,7 +255,7 @@
       .sg-portfolio-wrap {
         max-width: 100%;
       }
-      .sg-portfolio-wrap .portfolio-card {
+      .sg-portfolio-wrap .mp-card {
         pointer-events: none;
       }
       .sg-section-demo.section {
@@ -717,36 +717,37 @@
           <li class="hero__tag">UX/UI</li>
         </ul>
         <p class="sg-label">.hero__tags / .hero__tag</p>
-        <ul class="portfolio-card__tags" style="display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.5rem 0">
-          <li class="portfolio-card__tag">portfolio-card__tag</li>
-          <li class="portfolio-card__tag">Web App</li>
+        <ul class="mp-card__tags" aria-label="Tag Demo" style="display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; list-style: none; padding: 0; margin: 0.5rem 0">
+          <li class="mp-card__tag">mp-card__tag</li>
+          <li class="mp-card__tag">Web App</li>
         </ul>
-        <p class="sg-label">.portfolio-card__tags / .portfolio-card__tag</p>
+        <p class="sg-label">.mp-card__tags / .mp-card__tag</p>
 
         <h3>Portfolio Card</h3>
         <div class="sg-portfolio-wrap">
-          <a class="portfolio-card" href="#components" tabindex="-1" aria-hidden="true">
-            <div class="portfolio-card__body">
-              <h3 class="portfolio-card__title">portfolio-card</h3>
-              <p class="portfolio-card__summary">A brief two- or three-line description of the project for the Design System demo.</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-bottom" 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"
                 height="225"
+                loading="lazy"
                 decoding="async"
               />
             </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card — portfolio</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">A brief two- or three-line description of the project for the Design System demo.</p>
+            </div>
           </a>
         </div>
-        <p class="sg-label">.portfolio-card and child BEM classes</p>
+        <p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</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 3aa7e71..b21627d 100644
--- a/src/pages/cases/design-system.html
+++ b/src/pages/cases/design-system.html
@@ -718,36 +718,37 @@
           <li class="hero__tag">UX/UI</li>
         </ul>
         <p class="sg-label">.hero__tags / .hero__tag</p>
-        <ul class="portfolio-card__tags" style="display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.5rem 0">
-          <li class="portfolio-card__tag">portfolio-card__tag</li>
-          <li class="portfolio-card__tag">Web App</li>
+        <ul class="mp-card__tags" aria-label="Демо тегов" style="display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; list-style: none; padding: 0; margin: 0.5rem 0">
+          <li class="mp-card__tag">mp-card__tag</li>
+          <li class="mp-card__tag">Web App</li>
         </ul>
-        <p class="sg-label">.portfolio-card__tags / .portfolio-card__tag</p>
+        <p class="sg-label">.mp-card__tags / .mp-card__tag</p>
 
         <h3>Карточка портфолио</h3>
         <div class="sg-portfolio-wrap">
-          <a class="portfolio-card" href="#components" tabindex="-1" aria-hidden="true">
-            <div class="portfolio-card__body">
-              <h3 class="portfolio-card__title">portfolio-card</h3>
-              <p class="portfolio-card__summary">Краткое описание проекта в две-три строки для демо Design System.</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-bottom" 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"
                 height="225"
+                loading="lazy"
                 decoding="async"
               />
             </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card — портфолио</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">Краткое описание проекта в две-три строки для демо Design System.</p>
+            </div>
           </a>
         </div>
-        <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
+        <p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
 
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">