/* Basic Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #111; color: #fff; }
a { text-decoration: none; color: #fff; }

/* Categories Menu (Left Aligned & Wrapped - Forced) */
.categories { background: #222; padding: 15px 20px; border-bottom: 2px solid #e50914; display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 15px 20px !important; text-align: left !important; }
.categories a { color: #aaa; font-size: 15px; text-transform: uppercase; font-weight: bold; margin: 0 !important; white-space: nowrap !important; display: inline-block !important; }
.categories a:hover { color: #fff; }

/* Adsterra Top Banner (728x90) - Responsive Setup */
.ad-container-728 { margin: 15px auto; max-width: 728px; min-height: 90px; background: #222; display: flex; align-items: center; justify-content: center; color: #555; border: 1px dashed #444; overflow-x: auto; }
.demo-ad-728 { font-size: 14px; white-space: nowrap; }

/* Main Container */
.container { max-width: 1200px; margin: 20px auto; padding: 0 15px; }

/* Player Container & Iframe */
.player-container { max-width: 900px; margin-bottom: 40px; }
.video-title { font-size: 18px; margin-top: 15px; margin-bottom: 15px; line-height: 1.3; font-weight: normal; }
.iframe-wrapper { position: relative; padding-bottom: 56.25%; height: 0; background: #000; border-radius: 5px; overflow: hidden; border: 1px solid #333; }
.iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.section-title { font-size: 20px; margin-bottom: 20px; border-left: 4px solid #e50914; padding-left: 10px; }

/* Responsive Grid (Desktop: 4, Tablet: 2-3) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* Video Card & Hover Styles */
.video-card { background: #222; border-radius: 5px; overflow: hidden; display: block; position: relative; border: 1px solid #333;}
.thumb-container { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; overflow: hidden; }
.static-thumb, .hover-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.static-thumb { z-index: 2; transition: opacity 0.3s ease; }
.hover-video { z-index: 1; }
.video-card.active .static-thumb { opacity: 0; }

/* Card Info (Clean Design - Only Title) */
.card-info { padding: 12px; }
.card-info h3 { margin: 0; font-size: 15px; line-height: 1.3; height: 38px; overflow: hidden; text-align: left; }

/* Adsterra Native Ad Space (300x250) */
.ad-native { display: flex; align-items: center; justify-content: center; background: #1a1a1a; border: 1px dashed #555; min-height: 250px; color: #666; }

/* Load More Button */
.load-more-container { text-align: center; margin: 40px 0; }
#loadMoreBtn { background: #e50914; color: #fff; border: none; padding: 12px 30px; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: 0.3s; }
#loadMoreBtn:hover { background: #f40612; }

/* Mobile View Optimization (2 Column Grid) */
@media (max-width: 600px) {
    .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .video-title { font-size: 15px; }
    .card-info { padding: 8px; }
    .card-info h3 { font-size: 13px; height: 34px; line-height: 1.3; }
    .ad-native { min-height: 150px; grid-column: span 2; }
}