/**
 * Javo Gallery Styles
 *
 * Dedicated CSS for Gallery rendering
 * All aspect ratios, image fits, and positions are controlled here
 */

/* ===================================
   Gallery Container
   =================================== */
.javo-gallery-featured {
  display: block;
  position: relative;
  overflow: hidden;
}

.javo-gallery-featured-figure {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* ===================================
   Gallery Image Base
   =================================== */
.javo-gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* ===================================
   Aspect Ratios
   =================================== */
.javo-aspect-original {
  /* No aspect ratio - use image's natural dimensions */
}

.javo-aspect-square {
  aspect-ratio: 1 / 1;
}

.javo-aspect-story {
  aspect-ratio: 7 / 5;
}

.javo-aspect-photo {
  aspect-ratio: 3 / 2;
}

.javo-aspect-poster {
  aspect-ratio: 4 / 5;
}

.javo-aspect-landscape {
  aspect-ratio: 16 / 9;
}

.javo-aspect-portrait {
  aspect-ratio: 3 / 4;
}

.javo-aspect-wide {
  aspect-ratio: 21 / 9;
}

/* ===================================
   Image Fit (object-fit)
   =================================== */
.javo-fit-cover {
  object-fit: cover;
}

.javo-fit-contain {
  object-fit: contain;
}

.javo-fit-fill {
  object-fit: fill;
}

/* ===================================
   Image Position (object-position)
   =================================== */
.javo-pos-center {
  object-position: center center;
}

.javo-pos-center-left {
  object-position: left center;
}

.javo-pos-center-right {
  object-position: right center;
}

.javo-pos-top-center {
  object-position: center top;
}

.javo-pos-top-left {
  object-position: left top;
}

.javo-pos-top-right {
  object-position: right top;
}

.javo-pos-bottom-center {
  object-position: center bottom;
}

.javo-pos-bottom-left {
  object-position: left bottom;
}

.javo-pos-bottom-right {
  object-position: right bottom;
}

/* ===================================
   Hover Effects
   =================================== */
.javo-hover-zoom:hover .javo-gallery-image {
  transform: scale(1.05);
}

.javo-hover-zoom_out .javo-gallery-image {
  transform: scale(1.05);
}

.javo-hover-zoom_out:hover .javo-gallery-image {
  transform: scale(1);
}

.javo-hover-fade:hover .javo-gallery-image {
  opacity: 0.8;
}

.javo-hover-slide_up:hover .javo-gallery-image {
  transform: translateY(-5px);
}

.javo-hover-rotate:hover .javo-gallery-image {
  transform: rotate(2deg) scale(1.02);
}

/* ===================================
   Image Overlay
   =================================== */
.javo-gallery-overlay {
  position: absolute;
  inset: 0;
  background: var(--javo-overlay-color, rgba(0, 0, 0, 0.5));
  opacity: var(--javo-overlay-opacity, 0.5);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.javo-gallery-featured-figure:hover .javo-gallery-overlay {
  opacity: var(--javo-overlay-hover-opacity, 0.7);
}

/* ===================================
   Grid Gallery
   =================================== */
.javo-gallery-grid {
  display: grid;
  gap: var(--javo-gallery-gap, 15px);
}

.javo-gallery-grid-item {
  position: relative;
  overflow: hidden;
}

.javo-gallery-grid-item .javo-gallery-image {
  width: 100%;
  height: 100%;
}

/* Grid Columns */
.javo-gallery-cols-1 { grid-template-columns: repeat(1, 1fr); }
.javo-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.javo-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.javo-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.javo-gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }
.javo-gallery-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ===================================
   Carousel Gallery
   =================================== */
.javo-gallery-carousel .swiper-slide {
  overflow: hidden;
}

.javo-gallery-carousel .javo-gallery-image {
  width: 100%;
  height: 100%;
}

/* ===================================
   List Gallery
   =================================== */
.javo-gallery-list {
  display: flex;
  flex-direction: column;
  gap: var(--javo-gallery-gap, 15px);
}

.javo-gallery-list-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.javo-gallery-list-item .javo-gallery-image {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
}

/* ===================================
   Masonry Gallery
   =================================== */
.javo-gallery-masonry {
  column-gap: var(--javo-gallery-gap, 15px);
}

.javo-gallery-masonry-item {
  break-inside: avoid;
  margin-bottom: var(--javo-gallery-gap, 15px);
  overflow: hidden;
}

/* ===================================
   Caption Styles
   =================================== */
.javo-gallery-caption-single {
  padding: 10px 0;
  font-size: 14px;
  color: #666;
  text-align: center;
}

/* ===================================
   Lazy Loading with Blur Effect
   =================================== */
.javo-lazy-blur {
  filter: blur(10px);
  transition: filter 0.4s ease-out, opacity 0.4s ease-out;
}

.javo-lazy-blur.is-visible {
  filter: blur(0);
}

/* ===================================
   Visibility States
   =================================== */
.javo-gallery-image.is-visible {
  opacity: 1;
}

.javo-gallery-image:not(.is-visible) {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.javo-gallery-featured-figure.is-loaded .javo-gallery-image {
  opacity: 1;
}

/* ===================================
   Remaining Count Overlay
   =================================== */
.remaining-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
}

.remaining-count i {
  font-size: 14px;
  line-height: 1;
}

.remaining-count__label {
  display: inline-flex;
}

/* Keep listing detail thumbnail rails visually filled when media slots are empty. */
.javo-inline-media-gallery__rail .javo-inline-media-gallery__thumb--placeholder {
  display: flex !important;
  cursor: default;
  pointer-events: none;
  border-color: rgba(226, 232, 240, 0.92);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9)),
    #f8fafc;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  opacity: 0.92;
}

.javo-inline-media-gallery__rail .javo-inline-media-gallery__thumb--placeholder .javo-gallery-thumbnail-carousel__thumb-image {
  opacity: 0;
}

.javo-inline-media-gallery__rail .javo-inline-media-gallery__thumb--placeholder .javo-gallery-placeholder {
  color: #64748b;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(241, 245, 249, 0.74));
}

.javo-inline-media-gallery__rail .javo-inline-media-gallery__thumb--placeholder .javo-placeholder-text {
  color: #64748b;
  font-weight: 600;
}

/* ===================================
   Responsive
   =================================== */
@media (max-width: 1024px) {
  .javo-gallery-cols-6,
  .javo-gallery-cols-5,
  .javo-gallery-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .javo-gallery-cols-6,
  .javo-gallery-cols-5,
  .javo-gallery-cols-4,
  .javo-gallery-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .remaining-count {
    max-width: calc(100% - 12px);
    gap: 4px;
    padding: 5px 7px;
    font-size: 11px;
  }

  .remaining-count__label {
    display: none;
  }

  .remaining-count::after {
    content: '+' attr(data-count);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
}

@media (max-width: 480px) {
  .javo-gallery-cols-6,
  .javo-gallery-cols-5,
  .javo-gallery-cols-4,
  .javo-gallery-cols-3,
  .javo-gallery-cols-2 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 767px) {
  .javo-gallery-spotlight,
  .javo-gallery-mosaic,
  .javo-gallery-top-grid,
  .javo-gallery-top-two-grid,
  .javo-gallery-center-hero,
  .javo-gallery-right-hero,
  .javo-gallery-large-left-two {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .javo-gallery-spotlight > .javo-gallery-figure,
  .javo-gallery-mosaic > .javo-gallery-figure,
  .javo-gallery-top-grid > .javo-gallery-figure,
  .javo-gallery-top-two-grid > .javo-gallery-figure,
  .javo-gallery-center-hero > .javo-gallery-figure,
  .javo-gallery-right-hero > .javo-gallery-figure,
  .javo-gallery-large-left-two > .javo-gallery-figure {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 96px !important;
    min-height: 0 !important;
  }

  .javo-gallery-spotlight > .javo-gallery-figure:first-child,
  .javo-gallery-mosaic > .javo-gallery-figure:first-child,
  .javo-gallery-top-grid > .javo-gallery-figure:first-child,
  .javo-gallery-top-two-grid > .javo-gallery-figure:first-child,
  .javo-gallery-center-hero > .javo-gallery-figure:first-child,
  .javo-gallery-right-hero > .javo-gallery-figure:first-child,
  .javo-gallery-large-left-two > .javo-gallery-figure:first-child {
    height: 260px !important;
  }
}