@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Video Components - YouTube-like Interface */
.video-card {
    @apply rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl bg-white h-96;
}

.video-thumbnail-container {
    @apply relative overflow-hidden;
}

.video-iframe {
    @apply w-full h-full border-0;
}

/* Video Modal */
.video-modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center p-4;
}

.video-modal {
    @apply bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-hidden;
}

.video-modal-header {
    @apply flex justify-end p-4 border-b border-gray-200;
}

.close-button {
    @apply text-gray-500 hover:text-gray-700 text-2xl transition-colors duration-200;
}

.video-modal-body {
    @apply p-4;
}

.video-embed-container {
    @apply relative w-full h-0 pb-[56.25%] overflow-hidden rounded-lg;
}

.video-iframe {
    @apply absolute top-0 left-0 w-full h-full border-0 rounded-lg;
}

/* No Videos State */
.no-videos {
    @apply py-12;
}

.no-videos i {
    @apply text-gray-300;
}

/* Responsive Grid */
@media (max-width: 768px) {
    .video-card {
        @apply h-80;
    }
}

@media (max-width: 576px) {
    .video-card {
        @apply h-72;
    }
}