/* Video Display Fixes for RJ Gallery */

.my-gallery-video-container,
.rj-gallery-item video,
.rj-slide video,
.rj-polaroid-photo video {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.my-gallery-video {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
}

.rj-image-item {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.rj-image-item video {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.rj-image-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #dc3232;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

/* Gallery responsive layout */
.rj-gallery-responsive {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--thumb-width, 250px), 1fr)
  );
  gap: var(--spacing, 10px);
}

/* Column layout classes */
.rj-cols-1 {
  grid-template-columns: 1fr !important;
}

.rj-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.rj-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.rj-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.rj-cols-auto {
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--thumb-width, 250px), 1fr)
  ) !important;
}

/* Apply thumbnail dimensions */
.rj-gallery-responsive .rj-gallery-item img,
.rj-gallery-responsive .rj-gallery-item video {
  width: 100%;
  height: var(--thumb-height, 200px);
  object-fit: cover;
}

/* Polaroid Responsive Settings */
.rj-gallery-polaroid {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--thumb-width, 200px), 1fr)
  ) !important;
  gap: var(--spacing, 20px) !important;
  padding: var(--spacing, 20px) !important;
}

.rj-gallery-polaroid .rj-polaroid-photo {
  width: var(--thumb-width, 200px) !important;
}

.rj-gallery-polaroid .rj-polaroid-photo img {
  height: var(--thumb-height, 150px);
  object-fit: cover !important;
}

/* Polaroid Column Classes */
.rj-gallery-polaroid.rj-cols-1 {
  grid-template-columns: 1fr !important;
}

.rj-gallery-polaroid.rj-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.rj-gallery-polaroid.rj-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.rj-gallery-polaroid.rj-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Masonry Template */
.rj-gallery-masonry {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--thumb-width, 250px), 1fr)
  );
  gap: var(--spacing, 10px);
  padding: var(--spacing, 10px);
}

.rj-gallery-masonry.rj-cols-1 {
  grid-template-columns: 1fr !important;
}

.rj-gallery-masonry.rj-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.rj-gallery-masonry.rj-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.rj-gallery-masonry.rj-cols-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

.rj-masonry-item img {
  width: 100%;
  height: var(--thumb-height, 200px);
  object-fit: cover;
}

/* Tablet Responsive */
@media (max-width: 768px) {
  .rj-gallery-responsive {
    grid-template-columns: repeat(var(--tablet-columns, 2), 1fr) !important;
    gap: calc(var(--spacing, 8px) / 2);
  }

  .rj-gallery-responsive .rj-gallery-item img {
    height: var(--tablet-height-value, 150px) !important;
  }

  .rj-gallery-polaroid {
    grid-template-columns: repeat(var(--tablet-columns, 2), 1fr) !important;
    gap: calc(var(--spacing, 15px) / 2) !important;
    padding: calc(var(--spacing, 15px) / 2) !important;
  }

  .rj-gallery-polaroid .rj-polaroid-photo {
    width: var(--tablet-width-value, 200px) !important;
  }

  .rj-gallery-polaroid .rj-polaroid-photo img {
    height: var(--tablet-height-value, 120px);
  }

  .rj-gallery-masonry {
    grid-template-columns: repeat(var(--tablet-columns, 2), 1fr) !important;
    gap: calc(var(--spacing, 8px) / 2);
  }

  .rj-gallery-masonry .rj-masonry-item img {
    height: var(--tablet-height-value, 150px);
  }
  .rj-gallery-polaroid .rj-polaroid-photo .rj-polaroid-video-container img,
  .rj-gallery-masonry .rj-masonry-item .video-masonary img,  .rj-gallery-responsive .rj-gallery-item .video-masonary img  {
    width: 20px !important;
    height: auto !important;
  }
  .rj-gallery-polaroid .rj-polaroid-photo .rj-polaroid-video-container video {
    width: auto !important;
    height: auto !important;
  }
}

/* Mobile Responsive - Always Single Column */
@media (max-width: 480px) {
  .rj-gallery-responsive {
    grid-template-columns: 1fr !important;
    gap: var(--spacing, 5px);
  }

  .rj-gallery-responsive .rj-gallery-item img {
    height: var(--mobile-height, 150px) !important;
  }

  .rj-gallery-polaroid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing, 10px) !important;
    padding: var(--spacing, 10px) !important;
  }

  .rj-gallery-polaroid .rj-polaroid-photo {
    width: 100% !important;
    max-width: 300px;
    margin: 0 auto;
  }

  .rj-gallery-polaroid .rj-polaroid-photo img {
    height: var(--mobile-height, 150px);
  }

  .rj-gallery-masonry {
    grid-template-columns: 1fr !important;
    gap: var(--spacing, 5px);
  }

  .rj-gallery-masonry .rj-masonry-item img {
    height: var(--mobile-height, 150px);
  }
  .rj-gallery-polaroid .rj-polaroid-photo .rj-polaroid-video-container img,
  .rj-gallery-masonry .rj-masonry-item .video-masonary img,  .rj-gallery-responsive .rj-gallery-item .video-masonary img  {
    height: 20px !important;
  }
  .rj-gallery-polaroid .rj-polaroid-photo .rj-polaroid-video-container video {
    height: auto !important;
  }
}

.rj-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.rj-gallery-item:hover {
  transform: scale(1.05);
}

.rj-gallery-item img,
.rj-gallery-item video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.rj-gallery-link {
  display: block;
  text-decoration: none;
}