/* Video Features Section Styles */

:root {
    --font-family-heading: 'Plus Jakarta Sans', sans-serif;
    --font-family-base: 'Plus Jakarta Sans', sans-serif;
}

/* Main section styling */
.video-features-section {
    font-family: var(--font-family-heading);
}

/* Video card container */
.video-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Video container with rounded corners */
.video-container {
    position: relative;
    background-color: #f3f4f6;
    border-radius: 1.5rem; /* 24px rounded corners */
    overflow: hidden;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

/* Video element styling - KEY FIX for rounded corners */
.video-element {
    border-radius: 1rem !important; /* 16px rounded corners */
    object-fit: cover;
    width: calc(100% - 3rem); /* Shrink to show background */
    height: calc(100% - 3rem); /* Shrink to show background */
    position: absolute;
    top: 1.5rem; /* Center with padding */
    left: 1.5rem; /* Center with padding */
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Override any conflicting Tailwind classes */
.video-container .rounded-2xl {
    border-radius: 1rem !important;
}

.video-container .rounded-xl {
    border-radius: 0.75rem !important;
}

/* Fallback content styling */
.video-fallback {
    position: absolute;
    top: 1.5rem; /* Match video positioning */
    left: 1.5rem; /* Match video positioning */
    right: 1.5rem; /* Match video positioning */
    bottom: 1.5rem; /* Match video positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    z-index: 1;
}

/* Video loading states */
.video-element[data-loaded="false"] {
    opacity: 0;
}

.video-element[data-loaded="true"] {
    opacity: 1;
}

.video-element[data-loaded="true"] + .video-fallback {
    opacity: 0;
    pointer-events: none;
}

/* Error state */
.video-container.error .video-fallback {
    opacity: 1;
    background-color: #fee2e2;
    color: #dc2626;
}

.video-container.error .video-element {
    opacity: 0;
}

/* Loading animation */
.video-container.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 2;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .video-features-section h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .video-features-section h2 {
        font-size: 2rem;
    }
    
    .video-container {
        height: 20rem;
    }
}

@media (max-width: 480px) {
    .video-container {
        height: 16rem;
        border-radius: 1rem;
    }
    
    .video-element {
        border-radius: 0.75rem !important;
    }
    
    .video-fallback {
        border-radius: 0.75rem;
    }
    
    .video-fallback .text-6xl {
        font-size: 3rem;
    }
    
    .video-fallback .text-4xl {
        font-size: 2rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .video-card,
    .video-container,
    .video-element {
        transition: none;
    }
    
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(0deg); }
    }
}

/* Focus states for accessibility */
.video-container:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .video-container {
        background-color: #f9fafb;
        box-shadow: none;
    }
    
    .video-element {
        display: none;
    }
    
    .video-fallback {
        opacity: 1;
        position: static;
    }
}

/* Just add this to your existing CSS */