/* AssBook Carousel + Grid (v2.4) */
.ab-home{padding:10px 16px; overflow-x:hidden}

/* Ad slots */
.ad-top, .ad-under-trending, .ad-bottom{
  display:flex; align-items:center; justify-content:center;
  min-height:80px; margin:10px 0; color:#9aa3b2; background:#101217; border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Headings */
.trending h2, .latest h2{margin:8px 4px 12px}

/* Carousel (single row) */
.trending .ab-carousel{position:relative}
.trending .ab-carousel .ab-track{
  display:flex; gap:16px; overflow-x:auto; padding:0 8px 6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.trending .ab-carousel .ab-track::-webkit-scrollbar{display:none}
.trending .ab-carousel .ab-track > .ab-card-wrap{ flex:0 0 300px; max-width:300px; scroll-snap-align:start }
@media (max-width:1440px){ .trending .ab-carousel .ab-track > .ab-card-wrap{ flex-basis:280px; max-width:280px } }
@media (max-width:1200px){ .trending .ab-carousel .ab-track > .ab-card-wrap{ flex-basis:260px; max-width:260px } }
@media (max-width:900px){  .trending .ab-carousel .ab-track > .ab-card-wrap{ flex-basis:220px; max-width:220px } }

/* CSS fallback animation (runs if JS missing) */
@keyframes ab-drift-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trending .ab-carousel[data-fallback="1"] .ab-track{
  animation: ab-drift-left 120s linear infinite;
}

/* Main grid: 7/6/5/4/3/2 with minmax fix */
.ab-grid .ab-cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(7, minmax(0,1fr));
}
@media (min-width:1400px) and (max-width:1599px){ .ab-grid .ab-cards{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
@media (min-width:1200px) and (max-width:1399px){ .ab-grid .ab-cards{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (min-width:992px)  and (max-width:1199px){ .ab-grid .ab-cards{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:768px)  and (max-width:991px) { .ab-grid .ab-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:767px)                         { .ab-grid .ab-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* Ensure children don't force overflow */
.ab-grid .ab-cards > .ab-card-wrap, .abti-card{ min-width:0 }

/* Cards: centered one-line title + meta row */
.abti-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:#191a1f;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset}
.abti-card:hover{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.abti-thumb{position:relative;overflow:hidden}
.abti-thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;display:block;transition:transform .18s}
.abti-card:hover .abti-thumb img{transform:scale(1.02)}
.abti-info{padding:10px 12px 12px; text-align:center}
.abti-title{margin:0;font-weight:700;font-size:14px;line-height:1.2;color:#e7eaef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abti-meta{margin-top:4px;font:600 12.5px/1.2 system-ui;color:#9aa3b2;display:flex;gap:10px;justify-content:center}
.abti-meta .abti-views, .abti-meta .abti-duration{opacity:.9}