Enhance HoverCard behavior and styles for better mobile interactivity and accessibility:

- **Hover support refinement**: Limited hover effects to devices with pointer precision and hover capability.
- **Active state improvements**: Added visual feedback for tap and ensured consistent card toggling on mobile, including outside-click handling.
- **Styling additions**: Introduced a tappable hint for better user guidance and refined cursor styles.
- **Script update**: Prevented multiple active cards and ensured seamless closing on external clicks.

src/components/HoverCard.astro

@@ -1,5 +1,4 @@
 ---
-// src/components/HoverCard.astro
 import "../styles/components/HoverCard.css";
 const {title, description, image = "", date} = Astro.props;
 ---
@@ -21,12 +20,29 @@ const {title, description, image = "", date} = Astro.props;
 		const hoverCards = document.querySelectorAll('.hover-card');
 		
 		hoverCards.forEach(card => {
-			card.addEventListener('click', () => {
+			card.addEventListener('click', (e) => {
 				// Only toggle on mobile devices
 				if (window.innerWidth <= 768) {
+					e.preventDefault();
+					
+					// Close all other active cards first
+					hoverCards.forEach(otherCard => {
+						if (otherCard !== card) {
+							otherCard.classList.remove('active');
+						}
+					});
+					
+					// Toggle current card
 					card.classList.toggle('active');
 				}
 			});
+
+			// Close card when clicking outside (mobile only)
+			document.addEventListener('click', (e) => {
+				if (window.innerWidth <= 768 && !card.contains(e.target)) {
+					card.classList.remove('active');
+				}
+			});
 		});
 	});
-</script>
+</script>