feat: CardSidebar layout component and ExperienceCard sidebar redesign

Sidebar: period badge, company, stack tags.
Main: role title and rich-text description.

src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx

@@ -32,6 +32,32 @@ describe('ExperienceCard', () => {
     });
   });
 
+  describe('layout', () => {
+    it('period badge is inside the sidebar column', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const badge = screen.getByText('2021 – 2024');
+      expect(badge.closest('.brutal-border-sidebar')).toBeInTheDocument();
+    });
+
+    it('company name is inside the sidebar column', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const company = screen.getByText('Acme Corp');
+      expect(company.closest('.brutal-border-sidebar')).toBeInTheDocument();
+    });
+
+    it('title is outside the sidebar column', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const title = screen.getByText('Senior Developer');
+      expect(title.closest('.brutal-border-sidebar')).toBeNull();
+    });
+
+    it('description is outside the sidebar column', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const desc = screen.getByText('Built scalable frontend systems.');
+      expect(desc.closest('.brutal-border-sidebar')).toBeNull();
+    });
+  });
+
   describe('structure', () => {
     it('title is rendered as an h3', () => {
       render(<ExperienceCard {...DEFAULT_PROPS} />);
@@ -44,25 +70,33 @@ describe('ExperienceCard', () => {
       expect(badge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
     });
 
-    it('company paragraph has opacity-60', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />);
-      const company = screen.getByText('Acme Corp');
-      expect(company.tagName).toBe('P');
-      expect(company).toHaveClass('opacity-60');
-    });
-
     it('description renders via RichText with rich-text class', () => {
       render(<ExperienceCard {...DEFAULT_PROPS} />);
       const desc = screen.getByText('Built scalable frontend systems.');
       expect(desc.closest('.rich-text')).toBeInTheDocument();
     });
 
-    it('card has brutal-border class (from Card component)', () => {
+    it('card has brutal-border class', () => {
       const { container } = render(<ExperienceCard {...DEFAULT_PROPS} />);
       expect(container.firstChild).toHaveClass('brutal-border');
     });
   });
 
+  describe('stack tags', () => {
+    it('renders stack tags in the sidebar', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} stack={['React', 'TypeScript']} />);
+      const react = screen.getByText('React');
+      const ts = screen.getByText('TypeScript');
+      expect(react.closest('.brutal-border-sidebar')).toBeInTheDocument();
+      expect(ts.closest('.brutal-border-sidebar')).toBeInTheDocument();
+    });
+
+    it('renders nothing extra when stack is empty', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} stack={[]} />);
+      expect(screen.queryByRole('list')).toBeNull();
+    });
+  });
+
   describe('className passthrough', () => {
     it('forwards className to the card', () => {
       const { container } = render(<ExperienceCard {...DEFAULT_PROPS} className="custom-class" />);