feat(events): breadcrumb on page

- Add breadcrumb on ``/events`` page

app/assets/stylesheets/pages/events.css

@@ -0,0 +1,90 @@
+/* Events page specific styles */
+
+.events-page {
+  background: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-neutral-100) 100%);
+  min-height: 100vh;
+}
+
+.events-page .breadcrumb {
+  padding: var(--space-4) 0;
+}
+
+.events-page .event-card {
+  background: white;
+  border-radius: var(--radius-2xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+  transition: all var(--duration-slow) var(--ease-out);
+  border: 1px solid var(--color-neutral-200);
+  position: relative;
+}
+
+.events-page .event-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: var(--shadow-2xl);
+  border-color: var(--color-primary-200);
+}
+
+.events-page .event-date-badge {
+  background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-accent-100) 100%);
+  color: var(--color-primary-800);
+  font-weight: 700;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+}
+
+.events-page .price-highlight {
+  color: var(--color-primary-600);
+  font-weight: 800;
+}
+
+.events-page .pagination {
+  margin-top: var(--space-12);
+}
+
+.events-page .pagination .page,
+.events-page .pagination .next,
+.events-page .pagination .last,
+.events-page .pagination .prev,
+.events-page .pagination .first {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-lg);
+  margin: 0 var(--space-1);
+  transition: all var(--duration-normal);
+}
+
+.events-page .pagination .page:hover,
+.events-page .pagination .next:hover,
+.events-page .pagination .last:hover,
+.events-page .pagination .prev:hover,
+.events-page .pagination .first:hover {
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+}
+
+.events-page .pagination .current {
+  background: var(--color-primary-600);
+  color: white;
+  font-weight: 700;
+}
+
+.events-page .no-events-card {
+  background: white;
+  border-radius: var(--radius-2xl);
+  padding: var(--space-12);
+  box-shadow: var(--shadow-lg);
+  text-align: center;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .events-page .event-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .events-page .no-events-card {
+    padding: var(--space-8);
+  }
+}