/* CSS styling for video implementations
 *
 * Current implementation uses the native <video poster="..."> attribute
 * which is more semantically correct and follows HTML5 specifications.
 *
 * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/poster
 *
 * These styles are kept for compatibility with legacy code or future enhancements.
 */

/* Video container styles */
.lazy-video-wrapper {
  position: relative;
}

/* Play overlay - CSS triangle, no icon-font dependency */
.lazy-video-wrapper .lazy-video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
  z-index: 10;
}

/* Solid play triangle via borders - works even without bootstrap-icons */
.lazy-video-wrapper .lazy-video-play-overlay::after {
  content: "";
  display: block;
  border-left: 34px solid rgba(255, 255, 255, 0.92);
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

/* Poster image - kept for legacy implementations */
.lazy-video-wrapper .lazy-video-poster {
  width: 100%;
  object-fit: contain;
  cursor: pointer;
}

/* Hover/focus states */
.lazy-video-wrapper .lazy-video-play-overlay:hover,
.lazy-video-wrapper .lazy-video-play-overlay:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Playing state - video active: hand playback to native controls */
.lazy-video-wrapper.playing .lazy-video-poster,
.lazy-video-wrapper.playing .lazy-video-play-overlay {
  display: none;
}

/* Video responsive wrapper with aspect ratio */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-responsive video,
.video-responsive img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}