/* ═══════════════════════════════════════
   VLADFX VIDEO CAROUSEL — Work section
   2-row grid (3×2 = 6 cards per page).
   Homepage only.
   ═══════════════════════════════════════ */

#work{max-width:100%;padding-left:48px;padding-right:48px}
#work .section-header{max-width:1140px;margin-left:auto;margin-right:auto}

.carousel-viewport{overflow:hidden;max-width:1400px;margin:0 auto;border-radius:var(--radius)}

.video-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,auto);
  gap:24px;
  position:relative;
}

/* Cards hidden by default — carousel JS shows the current page */
.video-card{
  display:none;
  border-radius:var(--radius);overflow:hidden;
  border:none;transition:all .35s var(--ease-spring);
  background:var(--bg2);
  box-shadow:0 0 0 1px var(--border);
}
.video-card.show{
  display:block;
}
.video-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(244,64,65,.08);
}

.video-card iframe{width:100%;aspect-ratio:16/9;display:block}

.video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer;background:#000}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .5s,opacity .5s;opacity:.85}
.video-card:hover .video-thumb img{transform:scale(1.03);opacity:1}

.video-thumb .play-btn{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;z-index:2;transition:opacity .3s;opacity:0;
}
.video-thumb .play-btn::before{
  content:'';width:56px;height:56px;border-radius:50%;
  background:rgba(244,64,65,.9);
  box-shadow:0 0 30px rgba(244,64,65,.4);transition:all .3s;
}
.video-card:hover .play-btn{opacity:1}
.video-card:hover .play-btn::before{transform:scale(1.1);box-shadow:0 0 40px rgba(244,64,65,.6)}
.video-thumb .play-btn::after{
  content:'';position:absolute;width:0;height:0;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:18px solid #fff;margin-left:3px;
}

.video-body{padding:16px 20px}
.video-title{font-size:.95rem;font-weight:700;margin-bottom:4px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-desc{font-size:.78rem;color:var(--dim);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-tags{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.video-tags .vtag{
  font-size:.65rem;padding:2px 8px;border-radius:5px;font-weight:600;
  background:var(--brand-soft);color:var(--brand);letter-spacing:.3px;
}

.carousel-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px}
.carousel-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg2);color:var(--text);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s;
}
.carousel-btn:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.08)}
.carousel-btn:disabled{opacity:.2;cursor:default}

.carousel-dots{display:flex;gap:8px}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s;cursor:pointer}
.carousel-dot.active{background:var(--brand);transform:scale(1.3)}
.carousel-counter{font-size:.78rem;color:var(--dim);font-family:'JetBrains Mono',monospace}

/* ── Responsive ── */
@media(max-width:1024px){
  .video-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,auto)}
}
@media(max-width:768px){
  #work{padding-left:16px;padding-right:16px}
  .video-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .carousel-counter{display:none}
}