/* clickable-card.css */

.media-card.clickable {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.media-card.clickable:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

body.dark-theme .media-card.clickable:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Ensure the link inside doesn't interfere with the card click */
.media-card.clickable a {
    text-decoration: none;
    color: inherit;
}