Improve carousel functionality and visual presentation for video content

Refactors the `SimpleCarousel` component to use horizontal scrolling with duplicated content for an infinite scrolling effect. Updates styling for video cards, including dynamic sizing and improved visual overlays for "Top 10" content. Removes fixed poster styling from `index.css`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/kdQ95gE

client/src/components/simple-carousel.tsx

@@ -122,27 +122,40 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
           <ChevronRight className="w-6 h-6 text-white" />
         </button>
 
-        {/* Flex container z poster postavitvijo */}
-        <div className="flex flex-wrap justify-center gap-2.5 p-2.5">
-          {category.videos.map((video, videoIndex) => (
-            <div key={video.id} className="poster-container relative">
-              {/* Top 10 Number overlay for first category */}
-              {category.title.includes("Top 10") && (
-                <div className="absolute top-1 left-1 z-30 text-white font-black text-xl md:text-2xl drop-shadow-2xl pointer-events-none"
-                     style={{ 
-                       textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
-                       WebkitTextStroke: '1px rgba(0,0,0,0.8)',
-                     }}>
-                  {videoIndex + 1}
+        {/* Scroll container */}
+        <div 
+          ref={scrollContainerRef}
+          className="overflow-x-auto pb-8"
+          style={{ 
+            scrollbarWidth: 'none', 
+            msOverflowStyle: 'none'
+          }}
+        >
+          <div className="flex space-x-4 w-max">
+            {/* Create many copies for infinite feel */}
+            {Array.from({ length: 20 }).map((_, copyIndex) => 
+              category.videos.map((video, videoIndex) => (
+                <div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-48 md:w-80 relative individual-video-hover">
+                  {/* Top 10 Number overlay for first category */}
+                  {category.title.includes("Top 10") && (
+                    <div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none individual-video-hover:opacity-0 transition-opacity duration-300"
+                         style={{ 
+                           textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
+                           WebkitTextStroke: '2px rgba(0,0,0,0.8)',
+                           transform: 'none'
+                         }}>
+                      {videoIndex + 1}
+                    </div>
+                  )}
+                  <VideoCard
+                    video={video}
+                    onClick={onVideoClick}
+                    className="w-full hover:scale-105 transition-all duration-300 hover:shadow-2xl rounded-md overflow-hidden relative"
+                  />
                 </div>
-              )}
-              <VideoCard
-                video={video}
-                onClick={onVideoClick}
-                className="poster w-full h-auto max-w-full hover:scale-105 transition-all duration-300 hover:shadow-2xl rounded-md overflow-hidden relative"
-              />
-            </div>
-          ))}
+              ))
+            ).flat()}
+          </div>
         </div>
       </div>
     </div>