/* Thumbnail strip for the article image lightbox (GLightbox) */
.gl-thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  -webkit-overflow-scrolling: touch;
}

.gl-thumbs-item {
  flex: 0 0 auto;
  width: 64px;
  height: 46px;
  border-radius: 6px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
}

.gl-thumbs-item:hover {
  opacity: 0.9;
}

.gl-thumbs-item.active {
  opacity: 1;
  border-color: #0090cd;
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .gl-thumbs-item {
    width: 48px;
    height: 36px;
  }
}

/* Zoom / rotate toolbar for the article image lightbox (GLightbox) */
.gl-zoom-toolbar {
  position: absolute;
  top: 12px;
  right: 56px;
  z-index: 9999;
  display: flex;
  gap: 6px;
}

.gl-zoom-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.gl-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.gl-zoom-btn svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 640px) {
  .gl-zoom-toolbar {
    top: auto;
    bottom: 64px;
    right: 10px;
  }

  .gl-zoom-btn {
    width: 32px;
    height: 32px;
  }
}

/* Click-to-play facade that replaces inline <video>/YouTube/Vimeo embeds
   in the article body so they can open inside the same GLightbox gallery. */
.gl-video-facade {
  position: relative;
  display: block;
  cursor: pointer;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.gl-video-facade img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
}

/* YouTube/Vimeo players are 16:9: the embed (before lightbox-init.js swaps it, or when it plays
   inline without the lightbox) and its facade take the same box, so the swap shifts nothing; the
   4:3 hqdefault poster is cropped to it (dropping its letterbox bars). */
#single_detail iframe[data-src],
.gl-video-facade--embed {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.gl-video-facade--embed img {
  height: 100%;
  object-fit: cover;
}

.gl-video-facade--noposter {
  min-height: 200px;
  background: #1a1a1a;
}

.gl-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.gl-video-play svg {
  width: 28px;
  height: 28px;
}

.gl-video-facade:hover .gl-video-play {
  background: var(--color-primary, #0090cd);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Play-icon badge on the video entry in the thumbnail strip */
.gl-thumbs-item--video {
  position: relative;
}

.gl-thumbs-item--video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}