/* Video Card Styles */
/* Remove default blue color and underline from all links */
a {
    text-decoration: none; /* Removes underline */
    color: inherit; /* Ensures the link inherits text color from its parent */
}

/* Ensure focus and hover styles don't apply default blue styling */
a:focus,
a:hover {
    text-decoration: none; /* Prevents underline on hover/focus */
    color: inherit; /* Prevents blue color on hover/focus */
}

.video-card {
    display: block; /* Each video card is a block */
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    text-decoration: none; /* Remove underline */
    transition: opacity 0.5s ease, transform 0.5s ease, margin 0.5s ease; /* Smooth fade, scale, and position effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
    flex: 1 1 calc(20% - 20px); /* Flexible width for responsiveness */
    max-width: calc(20% - 20px); /* Maximum width */
    min-width: 200px; /* Minimum size */
    opacity: 1; /* Fully visible by default */
    transform: scale(1); /* Default size */
    box-sizing: border-box; /* Include padding/border in size calculations */
    pointer-events: all; /* Enable interactions */
    visibility: visible; /* Fully visible */
    position: relative; /* Enable reflow adjustments */
    z-index: 1; /* Ensure visibility priority */
}

body.dark-mode .video-card {
    background-color: #202020; /* Background for dark mode */
}

.video-card img {
    object-fit: contain;
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

.video-card:hover {
    background-color: #e6f7ff; /* Lighter background on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Slightly darker shadow on hover */
    transform: scale(1.02); /* Slight zoom effect on hover */
}

.video-card:hover img {
    transform: scale(1.02); /* Zoom effect on the image */
}

.video-card h3 {
    font-size: 16px; /* Adjusted font size for titles */
    margin: 10px 0 5px;
    color: inherit;
}

.video-card p {
    font-size: 12px; /* Smaller text for descriptions */
    color: #777; /* Light gray text */
    transition: color 0.3s; /* Smooth color transitions */
}

body.dark-mode .video-card p {
    color: #aaa; /* Lighter text for dark mode */
}

/* Hidden State (For Filtering - Fade/Slide Left) */
.video-card.hidden {
    opacity: 0; /* Fade out */
    transform: translateX(-20px) scale(0.9); /* Slide left and slightly shrink */
    pointer-events: none; /* Disable interactions */
    visibility: hidden; /* Hidden from layout */
    position: absolute; /* Remove from layout for smoother reflow */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transitions */
}

/* Videos Grid */
.videos {
    display: flex;
    flex-wrap: wrap; /* Wrap items to new rows if needed */
    gap: 20px; /* Space between items */
    justify-content: flex-start; /* Align all visible items to the left */
    padding: 0; /* No extra padding */
    transition: all 0.5s ease; /* Smooth reflow transitions */
}

/* Add responsiveness for smaller screens */
@media (max-width: 768px) {
    .video-card {
        flex: 1 1 calc(50% - 20px); /* Adjust to two cards per row on small screens */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .video-card {
        flex: 1 1 calc(100% - 20px); /* Full width for small devices */
        max-width: calc(100% - 20px);
    }
}