/* === CARD WRAPPER === */
.blog-post .blog-image.img-box.sh-has-thumb{
  position:relative; display:block; overflow:hidden; border-radius:12px;
}

/* === VIDEO LAYER (custom skin, no button) === */
.sh-prev-wrap{
  position:absolute; inset:0; z-index:2;
  border-radius:12px; overflow:hidden; background:#000;
  pointer-events:none;                /* <a> რჩება დაკლიკებად */
}
.sh-prev-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  pointer-events:none;
}

/* Badge ქრება, როცა ვიდეო ჩნდება */
.blog-image .yt-badge{ opacity:1; transition:opacity .15s ease, transform .18s ease; }
.blog-image .sh-prev-wrap ~ .yt-badge{ opacity:0; }

/* === DARK GREEN TIMELINE (მუქი, როგორც category badge) === */
:root{
  --zf-green:#166534;
  --zf-green-track:#0b2f1b;
}
.sh-timeline{
  position:absolute; left:16px; right:16px; bottom:10px; height:10px;
  z-index:3; border-radius:999px; background:var(--zf-green-track);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  overflow:hidden; pointer-events:none;
}
.sh-timeline .bar{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:var(--zf-green);
  transition:width .08s linear;
}

/* Reduce motion – accessibility */
@media (prefers-reduced-motion: reduce){
  .blog-image .yt-badge{ transition:none; }
  .sh-timeline .bar{ transition:none; }
}

/* === YouTube badge for cards === */
.blog-post .blog-image.img-box.sh-has-thumb{
  position:relative; display:block; overflow:hidden; border-radius:12px;
}
.yt-badge{
  position:absolute; right:10px; bottom:10px;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:transparent; /* ზომას აკონტროლებს SVG rect */
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.yt-badge:hover{ transform:scale(1.06); box-shadow:0 10px 20px rgba(0,0,0,.3); }
.blog-post .blog-image:hover .yt-badge{ transform:translateZ(0) scale(1.04); }

@media (max-width:560px){
  .yt-badge{ width:28px; height:28px; right:8px; bottom:8px; }
}
@media (prefers-reduced-motion: reduce){
  .yt-badge{ transition:none; }
}