/* ── Base ─────────────────────────────────────────────────────────────────── */
/* CSS variables are injected as inline styles on .image-thumbnail-carousel   */
/* by the widget renderer, so no :root block is needed here.                  */

.image-thumbnail-carousel {
  width: 100%;
  max-width: 96vw;
  display: flex;
  flex-flow: column;
  gap: var(--gap, 8px);
}

.image-thumbnail-carousel img {
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

/* position: relative so absolutely-placed buttons stay inside */
.image-thumbnail-carousel .image-display {
  position: relative;
  border-radius: var(--border-xl, 0px);
  min-height: 30vmin;
  aspect-ratio: var(--main-aspect-ratio, 1/1);
}

/* screen fills image-display and clips the image to the rounded border */
.image-thumbnail-carousel .screen {
  position: absolute;
  inset: 0;
  border-radius: var(--border-xl, 0px);
  overflow: hidden;
  background-image: linear-gradient(12deg, #aaa, #eee);
  user-select: none;
  cursor: ew-resize;
}

/* prev/next buttons overlaid on the main image */
.image-thumbnail-carousel .carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-thumbnail-carousel .carousel__btn.prev { left: 0.75rem; }
.image-thumbnail-carousel .carousel__btn.next { right: 0.75rem; }

.image-thumbnail-carousel .carousel__btn:hover {
  background: rgba(255, 255, 255, 0.5);
}

.image-thumbnail-carousel .carousel__btn:disabled {
  opacity: 0.15;
  pointer-events: none;
}

.image-thumbnail-carousel .arrow-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: #fff;
}

/* thumbnail strip */
.image-thumbnail-carousel .thumbnail-carousel {
  display: flex;
}

.image-thumbnail-carousel .carousel__slider {
  user-select: none;
  flex-grow: 999;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--gap, 8px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.image-thumbnail-carousel .carousel__slider::-webkit-scrollbar {
  display: none;
}

.image-thumbnail-carousel .carousel__slide {
  cursor: pointer;
  border-radius: var(--border-m, 0px);
  overflow: hidden;
  scroll-snap-align: center;
  flex: 1 0 calc(100% / var(--items, 6) - 10px);
  aspect-ratio: var(--main-aspect-ratio, 1/1);
}

.image-thumbnail-carousel .active.carousel__slide {
  outline: 2px solid var(--accent-color, #ff5700);
  outline-offset: -8px;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .image-thumbnail-carousel .carousel__slide {
    flex: 0 0 80px;
  }

  /* Force horizontal layout to 3 visible thumbnails on mobile, regardless of
     the --items value set by the widget (inline style). !important is needed
     to beat the inline style; JS reads --items via getComputedStyle so it
     picks up the overridden value automatically on next ResizeObserver tick. */
  .image-thumbnail-carousel.layout-horizontal {
    --items: 3 !important;
    --thumb-col-width: 80px !important;
  }
}

/* ── Horizontal layout ────────────────────────────────────────────────────── */

.image-thumbnail-carousel.layout-horizontal {
  flex-flow: row;
  align-items: flex-start;
}

.layout-horizontal .image-display {
  flex: 1 1 0;
  min-width: 0;
  /* aspect-ratio comes from --main-aspect-ratio, same as vertical */
}

.layout-horizontal .thumbnail-carousel {
  flex: 0 0 auto;
  flex-direction: column;
  width: calc(var(--thumb-col-width, 80px) + var(--gap, 8px));
}
.layout-horizontal .carousel__slider {
  display: grid;
  grid-template-columns: 1fr;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: none;
  align-content: start;
  flex: none;
}

.layout-horizontal .carousel__slide {
  flex: none;
  scroll-snap-align: none;
  border-radius: var(--border-s, 0px);
  aspect-ratio: var(--main-aspect-ratio, 1/1);
  overflow: hidden;
}

/* Force thumbnail and image to fill the grid cell in fill mode.
   !important overrides Elementor's own img { max-width: 100% } rule. */
.layout-horizontal .carousel__slide .thumbnail,
.layout-horizontal .carousel__slide .thumbnail img {
  height: 100%;
  width: 100%;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

.layout-horizontal .more-indicator {
  aspect-ratio: var(--main-aspect-ratio, 1/1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--border-s, 0px);
  user-select: none;

  font-size: 0.9rem;
  font-family: sans-serif;
  color: #979797;
  font-weight: 100;
  border: 2px solid #979797;

}

.layout-horizontal .more-indicator.active {
  outline: 2px solid var(--accent-color, #ff5700);
  outline-offset: -8px;
}