Enhance interactivity and mobile responsiveness in widget components

- Added touchend event listeners to certification, education, and skills cards for improved mobile compatibility.
- Updated click event listeners to prevent default actions, ensuring modals display correctly on both desktop and mobile devices.
- Enhanced mobile-specific styles in the Work Experience component for better usability, including adjustments to padding, gap, and text sizing.

src/components/widgets/ModernWorkExperience.astro

@@ -195,6 +195,21 @@ const getYearRange = (dateStr: string = '') => {
     max-height: 300px;
   }
 
+  /* Mobile-specific description styling */
+  @media (max-width: 768px) {
+    .work-description {
+      max-height: 100px;
+    }
+    
+    .work-card:hover .work-description {
+      max-height: 400px; /* More room on mobile */
+    }
+    
+    .work-card:active .work-description {
+      max-height: 400px; /* Also trigger on touch */
+    }
+  }
+
   /* Responsive adjustments */
   @media (max-width: 1024px) {
     .work-card {
@@ -204,11 +219,11 @@ const getYearRange = (dateStr: string = '') => {
 
   @media (max-width: 640px) {
     .work-card {
-      padding: 1.25rem;
+      padding: 1.5rem; /* More padding on mobile */
     }
     
     .work-card .flex {
-      gap: 0.75rem;
+      gap: 1rem; /* More gap on mobile */
     }
     
     .work-card .w-12.h-12 {
@@ -220,5 +235,15 @@ const getYearRange = (dateStr: string = '') => {
       width: 1.25rem;
       height: 1.25rem;
     }
+    
+    /* Better mobile text sizing */
+    .work-card h3 {
+      font-size: 1rem;
+      line-height: 1.3;
+    }
+    
+    .work-card .text-sm {
+      font-size: 0.8rem;
+    }
   }
 </style>