feat: Replaced plain list rendering of related techniques with a respon…

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/TechniquePage.tsx"
- "frontend/src/App.css"

GSD-Task: S02/T02

frontend/src/App.css

@@ -1781,27 +1781,62 @@ a.app-footer__repo:hover {
   margin-bottom: 0.5rem;
 }
 
-.technique-related__list {
+.technique-related__grid {
-  list-style: none;
+  display: grid;
-  display: flex;
+  grid-template-columns: 1fr;
-  flex-direction: column;
+  gap: 0.75rem;
-  gap: 0.375rem;
 }
 
-.technique-related__list a {
+@media (min-width: 600px) {
+  .technique-related__grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.related-card {
+  background: var(--color-surface-card);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 0.875rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.related-card__title {
   color: var(--color-link-accent);
   text-decoration: none;
+  font-weight: 600;
   font-size: 0.9375rem;
 }
 
-.technique-related__list a:hover {
+.related-card__title:hover {
   text-decoration: underline;
 }
 
-.technique-related__rel {
+.related-card__creator {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: var(--color-text-muted);
-  margin-left: 0.375rem;
+}
+
+.related-card__badge {
+  display: inline-block;
+  align-self: flex-start;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  background: var(--color-badge-bg, rgba(255, 255, 255, 0.08));
+  color: var(--color-badge-text, var(--color-text-muted));
+}
+
+.related-card__reason {
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--color-text-muted);
+  margin: 0;
 }
 
 /* ══════════════════════════════════════════════════════════════════════════════

frontend/src/api/public-client.ts

@@ -49,6 +49,9 @@ export interface RelatedLinkItem {
   target_title: string;
   target_slug: string;
   relationship: string;
+  creator_name: string;
+  topic_category: string;
+  reason: string;
 }
 
 export interface TechniquePageDetail {

frontend/src/pages/TechniquePage.tsx

@@ -495,18 +495,24 @@ export default function TechniquePage() {
       {technique.related_links.length > 0 && (
         <section className="technique-related">
           <h2>Related Techniques</h2>
-          <ul className="technique-related__list">
+          <div className="technique-related__grid">
             {technique.related_links.map((link) => (
-              <li key={link.target_slug}>
+              <div key={link.target_slug} className="related-card">
-                <Link to={`/techniques/${link.target_slug}`}>
+                <Link to={`/techniques/${link.target_slug}`} className="related-card__title">
                   {link.target_title}
                 </Link>
-                <span className="technique-related__rel">
+                {link.creator_name && (
-                  ({link.relationship})
+                  <span className="related-card__creator">{link.creator_name}</span>
-                </span>
+                )}
-              </li>
+                {link.topic_category && (
+                  <span className="related-card__badge">{link.topic_category}</span>
+                )}
+                {link.reason && (
+                  <p className="related-card__reason">{link.reason}</p>
+                )}
+              </div>
             ))}
-          </ul>
+          </div>
         </section>
       )}
         </div>