/**
 * LinkedIn Posts Carousel - Tailwind Styles
 * This file contains Tailwind utility classes for browsers that don't have Tailwind loaded
 */

/* Tailwind Reset for the carousel container */
.linkedin-posts-carousel *,
.linkedin-posts-carousel *::before,
.linkedin-posts-carousel *::after {
    box-sizing: border-box;
}

/* Layout utilities */
.linkedin-posts-carousel .relative { position: relative; }
.linkedin-posts-carousel .absolute { position: absolute; }
.linkedin-posts-carousel .flex { display: flex; }
.linkedin-posts-carousel .flex-shrink-0 { flex-shrink: 0; }
.linkedin-posts-carousel .w-full { width: 100%; }
.linkedin-posts-carousel .h-full { height: 100%; }
.linkedin-posts-carousel .overflow-hidden { overflow: hidden; }

/* Positioning */
.linkedin-posts-carousel .left-0 { left: 0; }
.linkedin-posts-carousel .right-0 { right: 0; }
.linkedin-posts-carousel .top-0 { top: 0; }
.linkedin-posts-carousel .bottom-0 { bottom: 0; }
.linkedin-posts-carousel .left-4 { left: 1rem; }
.linkedin-posts-carousel .right-4 { right: 1rem; }
.linkedin-posts-carousel .top-1\/2 { top: 50%; }
.linkedin-posts-carousel .-translate-y-1\/2 { transform: translateY(-50%); }

/* Sizing */
.linkedin-posts-carousel .w-24 { width: 6rem; }
.linkedin-posts-carousel .w-6 { width: 1.5rem; }
.linkedin-posts-carousel .h-6 { height: 1.5rem; }
.linkedin-posts-carousel .w-5 { width: 1.25rem; }
.linkedin-posts-carousel .h-5 { height: 1.25rem; }
.linkedin-posts-carousel .w-2 { width: 0.5rem; }
.linkedin-posts-carousel .h-2 { height: 0.5rem; }
.linkedin-posts-carousel .w-8 { width: 2rem; }

/* Spacing */
.linkedin-posts-carousel .gap-4 { gap: 1rem; }
.linkedin-posts-carousel .gap-2 { gap: 0.5rem; }
.linkedin-posts-carousel .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.linkedin-posts-carousel .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.linkedin-posts-carousel .p-3 { padding: 0.75rem; }
.linkedin-posts-carousel .p-2 { padding: 0.5rem; }
.linkedin-posts-carousel .pb-4 { padding-bottom: 1rem; }
.linkedin-posts-carousel .mb-4 { margin-bottom: 1rem; }
.linkedin-posts-carousel .mr-2 { margin-right: 0.5rem; }

/* Colors */
.linkedin-posts-carousel .bg-white { background-color: #ffffff; }
.linkedin-posts-carousel .bg-gray-300 { background-color: #d1d5db; }
.linkedin-posts-carousel .bg-blue-600 { background-color: #2563eb; }
.linkedin-posts-carousel .bg-primary { background-color: #0073aa; /* WordPress primary blue */ }
.linkedin-posts-carousel .text-gray-800 { color: #1f2937; }
.linkedin-posts-carousel .text-gray-500 { color: #6b7280; }
.linkedin-posts-carousel .text-white { color: #ffffff; }

/* Hover states */
.linkedin-posts-carousel .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.linkedin-posts-carousel .hover\:bg-gray-400:hover { background-color: #9ca3af; }
.linkedin-posts-carousel .hover\:scale-110:hover { transform: scale(1.1); }

/* Borders and Shadows */
.linkedin-posts-carousel .rounded-lg { border-radius: 0.5rem; }
.linkedin-posts-carousel .rounded-full { border-radius: 9999px; }
.linkedin-posts-carousel .rounded { border-radius: 0.25rem; }
.linkedin-posts-carousel .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.linkedin-posts-carousel .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* Transitions */
.linkedin-posts-carousel .transition-all { transition-property: all; }
.linkedin-posts-carousel .duration-200 { transition-duration: 200ms; }

/* Z-index */
.linkedin-posts-carousel .z-10 { z-index: 10; }
.linkedin-posts-carousel .z-20 { z-index: 20; }

/* Pointer events */
.linkedin-posts-carousel .pointer-events-none { pointer-events: none; }

/* Flexbox alignment */
.linkedin-posts-carousel .justify-center { justify-content: center; }

/* Text alignment */
.linkedin-posts-carousel .text-center { text-align: center; }

/* Gradients */
.linkedin-posts-carousel .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.linkedin-posts-carousel .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.linkedin-posts-carousel .from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0)); }
.linkedin-posts-carousel .to-transparent { --tw-gradient-to: transparent; }

/* Responsive Width Classes */
@media (min-width: 640px) {
    .linkedin-posts-carousel .sm\:w-1\/2 { width: 50%; }
}

@media (min-width: 768px) {
    .linkedin-posts-carousel .md\:w-1\/3 { width: 33.333333%; }
}

@media (min-width: 1024px) {
    .linkedin-posts-carousel .lg\:w-1\/4 { width: 25%; }
}

@media (min-width: 1280px) {
    .linkedin-posts-carousel .xl\:w-1\/5 { width: 20%; }
}

/* LinkedIn iframe - respect original dimensions */
.linkedin-posts-carousel .linkedin-embed-wrapper iframe {
    border: none;
    display: block;
}

/* Fix for carousel track */
.linkedin-posts-carousel .carousel-track {
    transition: transform 0.5s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Dragging state */
.linkedin-posts-carousel .carousel-track.dragging {
    transition: none !important;
}

/* Continuous scroll animation - defined in inline styles */

/* Hide scrollbar but maintain functionality */
.linkedin-posts-carousel .relative {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.linkedin-posts-carousel .relative::-webkit-scrollbar {
    display: none;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .linkedin-posts-carousel .linkedin-embed-wrapper iframe {
        height: 600px;
    }
    
    .linkedin-posts-carousel .w-24 {
        width: 3rem;
    }
}

/* Focus styles for keyboard navigation */
.linkedin-posts-carousel:focus {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
}

/* Ensure LinkedIn embeds are centered */
.linkedin-posts-carousel .linkedin-embed-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Button states */
.linkedin-posts-carousel .bg-primary:hover {
    background-color: #005a87; /* Darker shade for hover */
}

.linkedin-posts-carousel button:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Smooth scrolling for continuous carousel */
.linkedin-posts-carousel .animate-scroll {
    will-change: transform;
}

/* Scroll snap for better control */
.linkedin-posts-carousel .relative {
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
}

.linkedin-posts-carousel .carousel-slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Smooth momentum scrolling on iOS */
.linkedin-posts-carousel .relative {
    -webkit-overflow-scrolling: touch;
}

/* Pause on hover is handled via inline styles */