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/styles/components/HoverCard.css

@@ -12,8 +12,19 @@
 	flex-direction: column;
 }
 
-.hover-card:hover {
-	transform: translateY(-5px);
+/* Hover effects only for devices that support hover */
+@media (hover: hover) and (pointer: fine) {
+	.hover-card:hover {
+		transform: translateY(-5px);
+	}
+
+	.hover-card:hover .hover-text {
+		opacity: 1;
+	}
+
+	.hover-card:hover .card-image {
+		opacity: 0.1;
+	}
 }
 
 .card-title {
@@ -93,15 +104,7 @@
 	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
 }
 
-.hover-card:hover .hover-text {
-	opacity: 1;
-}
-
-.hover-card:hover .card-image {
-	opacity: 0.1;
-}
-
-/* Active state for mobile click functionality */
+/* Active state for mobile tap functionality */
 .hover-card.active .hover-text {
 	opacity: 1;
 }
@@ -122,5 +125,33 @@
 		/* Maintain square aspect ratio */
 		aspect-ratio: 1 / 1;
 		height: auto;
+		/* Add cursor pointer to indicate it's clickable */
+		cursor: pointer;
+	}
+
+	/* Add visual feedback for tap */
+	.hover-card:active {
+		transform: scale(0.98);
+	}
+
+	/* Optional: Add a subtle hint that cards are tappable */
+	.hover-card::after {
+		content: "👆 Tap to view details";
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		background-color: rgba(0, 0, 0, 0.7);
+		color: var(--color-accent-beige);
+		font-size: 0.7rem;
+		padding: 4px 8px;
+		border-radius: 12px;
+		opacity: 0.8;
+		pointer-events: none;
+		z-index: 10;
+	}
+
+	/* Hide the hint when card is active */
+	.hover-card.active::after {
+		display: none;
 	}
 }