/* -------------------------------------------------------------
   Video cards — reuse .post-card, just add a play badge over
   the thumbnail so it reads as a video, not a blog post.
   ------------------------------------------------------------- */
.post-thumb-wrap{position:relative}
.play-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.play-badge svg{
  width:48px;height:48px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  opacity:0.92;
  transition:transform .15s ease;
}
.post-card:hover .play-badge svg{transform:scale(1.08)}

/* Light mode (default): dark translucent circle, white triangle */
.play-badge svg circle{fill:rgba(0,0,0,0.55)}
.play-badge svg path{fill:#fff}

/* Dark mode: swap to the neon accent */
body.dark .play-badge svg circle{fill:rgba(0,0,0,0.45)}
body.dark .play-badge svg path{fill:var(--neon-green,#39ff88)}

/* -------------------------------------------------------------
   Theater view — replaces the grid entirely, shows only the
   selected video, a title, and a back control.
   ------------------------------------------------------------- */
.theater-view{max-width:900px;margin:18px auto 40px}
.theater-view.hidden{display:none}

.video-embed{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
  background:#000;
  margin-top:14px;
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.theater-title{margin:18px 0 4px;font-size:22px;font-weight:700}
.theater-desc{color:var(--muted);margin:0}

body.dark .theater-title{color:var(--dark-text)}

/* Tag pills inside cards, now links */
.tag-list a.tag{text-decoration:none;color:inherit;display:inline-block}

/* post-card is now a click/keyboard target itself (blog.js no longer
   wraps it in an <a>, so tag links inside it are valid, unnested) */
.post-card{cursor:pointer}
.post-card:focus-visible{outline:2px solid var(--neon-green,#39ff88);outline-offset:2px}

@media(max-width:767px){
  .theater-view{margin:14px 12px 32px}
  .theater-title{font-size:19px}
}

/* Active chip in the archive page's tag filter bar */
.tag-filter .tag.tag-active{
  background:#0b0b0b;
  color:#fff;
  font-weight:600;
}
body.dark .tag-filter .tag.tag-active{
  background:var(--neon-green,#39ff88);
  color:#0b0b0b;
}