/* css/components/video.css */

/* Video Player Card specific styles */
.video-player-card {
    max-height: 0; /* Initially hidden, takes no space */
    overflow: hidden; /* Hide content that overflows */
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, margin-bottom 0.5s ease-out; /* Smooth slide-in/out */
    padding: 0 var(--spacing-unit); /* Initial padding (left/right only) */
    margin-bottom: 0; /* No margin initially */
    background-color: var(--bg-card); /* Ensure it has a background */
}

.video-player-card.active {
    max-height: 500px; /* Adjust based on expected video player height + padding */
    padding: var(--spacing-unit); /* Full padding when active */
    margin-bottom: var(--spacing-unit); /* Restore margin when active */
}

.video-player-card .video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (height / width = 9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.video-player-card .video-container iframe,
.video-player-card .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Close icon for video card */
.video-player-card .close-video {
    cursor: pointer;
    color: var(--text-dark);
    font-size: 1.2rem;
    transition: color 0.2s ease;
}

.video-player-card .close-video:hover {
    color: var(--text-light);
}