/* বেসিক রিসেট */
* { 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 (300x250) */
.ad-container-top { text-align: center; margin: 15px auto; max-width: 300px; min-height: 250px; background: #222; display: flex; align-items: center; justify-content: center; color: #555; border: 1px dashed #444;}
.demo-ad { font-size: 14px; }

/* Main Container */
.container { max-width: 1200px; margin: 20px auto; padding: 0 15px; }
.section-title { font-size: 20px; margin-bottom: 20px; border-left: 4px solid #e50914; padding-left: 10px; }

/* Responsive Grid (Desktop: 4, Tablet: 2-3, Mobile: 1-2) */
.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 (ক্লিন ডিজাইন - ভিউজ ও ডিউরেশন বাদ) */
.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 (গ্রিডের ভেতরে) */
.ad-native { display: flex; align-items: center; justify-content: center; background: #1a1a1a; border: 1px dashed #555; min-height: 200px; 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 */
@media (max-width: 600px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }
}