/* =======================================================
   סמל וידאו על תמונות פוסטי וידאו בעמודי קטגוריות
   ======================================================= */

/* Regular posts view */
.category-post-image-link .video-play-overlay {
  position: absolute;
  top: var(--ttfc-video-play-icon-top, 50%);
  right: var(--ttfc-video-play-icon-right, auto);
  bottom: var(--ttfc-video-play-icon-bottom, auto);
  left: var(--ttfc-video-play-icon-left, 50%);
  transform: translate(var(--ttfc-video-play-icon-translate-x, -50%), var(--ttfc-video-play-icon-translate-y, -50%)) scale(var(--ttfc-video-play-icon-scale, 1));
  width: calc(56px * var(--ttfc-video-play-icon-scale, 1));
  height: calc(56px * var(--ttfc-video-play-icon-scale, 1));
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.9;
}

.category-post-image-link .video-play-overlay svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.category-post-image-link .video-play-overlay.ttfc-video-icon-pos-center,
.subcategory-image-wrap .video-play-overlay.ttfc-video-icon-pos-center {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(var(--ttfc-video-play-icon-scale, 1)) !important;
}

.category-post-image-link .video-play-overlay.ttfc-video-icon-pos-top-left,
.subcategory-image-wrap .video-play-overlay.ttfc-video-icon-pos-top-left {
  top: 12px !important;
  right: auto !important;
  bottom: auto !important;
  left: 12px !important;
  transform: translate(0, 0) scale(var(--ttfc-video-play-icon-scale, 1)) !important;
}

.category-post-image-link .video-play-overlay.ttfc-video-icon-pos-top-right,
.subcategory-image-wrap .video-play-overlay.ttfc-video-icon-pos-top-right {
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  transform: translate(0, 0) scale(var(--ttfc-video-play-icon-scale, 1)) !important;
}

/* Album view */
.subcategory-image-wrap .video-play-overlay {
  position: absolute;
  top: var(--ttfc-video-play-icon-top, 50%);
  right: var(--ttfc-video-play-icon-right, auto);
  bottom: var(--ttfc-video-play-icon-bottom, auto);
  left: var(--ttfc-video-play-icon-left, 50%);
  transform: translate(var(--ttfc-video-play-icon-translate-x, -50%), var(--ttfc-video-play-icon-translate-y, -50%)) scale(var(--ttfc-video-play-icon-scale, 1));
  width: calc(50px * var(--ttfc-video-play-icon-scale, 1));
  height: calc(50px * var(--ttfc-video-play-icon-scale, 1));
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.9;
}

.subcategory-image-wrap .video-play-overlay svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.category-post-card:hover .video-play-overlay.ttfc-video-icon-pos-center,
.subcategory-card:hover .video-play-overlay.ttfc-video-icon-pos-center {
  transform: translate(-50%, -50%) scale(calc(var(--ttfc-video-play-icon-scale, 1) * 1.12)) !important;
  opacity: 1;
}

.category-post-card:hover .video-play-overlay.ttfc-video-icon-pos-top-left,
.category-post-card:hover .video-play-overlay.ttfc-video-icon-pos-top-right,
.subcategory-card:hover .video-play-overlay.ttfc-video-icon-pos-top-left,
.subcategory-card:hover .video-play-overlay.ttfc-video-icon-pos-top-right {
  transform: translate(0, 0) scale(calc(var(--ttfc-video-play-icon-scale, 1) * 1.12)) !important;
  opacity: 1;
}

/* =======================================================
   וידיאו hover - נגינה אוטומטית בריחוף
   ======================================================= */
.archive-hover-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.archive-hover-video[src] {
  opacity: 1;
}

/* hide play icon while video is playing */
.video-hover-active .video-play-overlay {
  opacity: 0 !important;
}

/* =======================================================
   Responsive
   ======================================================= */
@media (max-width: 768px) {
  .category-post-image-link .video-play-overlay {
    width: calc(44px * var(--ttfc-video-play-icon-scale, 1));
    height: calc(44px * var(--ttfc-video-play-icon-scale, 1));
  }
  .subcategory-image-wrap .video-play-overlay {
    width: calc(40px * var(--ttfc-video-play-icon-scale, 1));
    height: calc(40px * var(--ttfc-video-play-icon-scale, 1));
  }
}