/* ============================================================
   Thumbnail Slider — replica of Framer Marketplace "Thumbnail Slider".
   Measured from thumbnail-slider.framer.website
   ============================================================ */

.tslide {
  /* ---- geometry (measured) ---- */
  --ts-main-w: 740px;
  --ts-main-h: 476px;
  --ts-main-gap: 20px;        /* pitch 760 */
  --ts-main-radius: 20px;

  --ts-thumb-w: 166px;
  --ts-thumb-h: 120px;
  --ts-thumb-gap: 24px;       /* pitch 190 */
  --ts-thumb-radius: 10px;
  --ts-thumb-idle: 0.4;       /* measured inactive opacity */
  --ts-thumb-rail-gap: 30px;

  /* ---- motion ---- */
  --ts-dur: 620ms;
  --ts-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  width: var(--ts-main-w);
  max-width: 100%;
  margin-inline: auto;
}

/* ---- main stage ---- */
.tslide__stage {
  position: relative;
  width: 100%;
  height: var(--ts-main-h);
  border-radius: var(--ts-main-radius);
  overflow: hidden;
}

.tslide__track {
  display: flex;
  gap: var(--ts-main-gap);
  height: 100%;
  will-change: transform;
  transition: transform var(--ts-dur) var(--ts-ease);
}

/* Under the hand the stage sits exactly where the pointer puts it — with the
   transition on, every frame of the drag would ease toward the last position
   and the stage would trail the cursor. Only the stage track is affected; the
   thumbnail rail keeps its transition because it follows `index`, which does
   not change until the drag is released. */
.tslide.is-dragging .tslide__track { transition: none; }

.tslide.is-dragging .tslide__stage { cursor: grabbing; }
.tslide__stage { cursor: grab; }

.tslide__slide {
  flex: 0 0 var(--ts-main-w);
  width: var(--ts-main-w);
  height: 100%;
  overflow: hidden;
  border-radius: var(--ts-main-radius);
  background: #ddd;
}

.tslide__slide > img,
.tslide__slide > .tslide__art { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- counter pill, top right of the stage ---- */
.tslide__count {
  position: absolute;
  top: 18px; right: 18px;
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 600;
  color: #111;
  z-index: 3;
}

/* ---- control pill, bottom centre of the stage ---- */
.tslide__controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}

.tslide__nav {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #111; cursor: pointer;
}
.tslide__nav svg { width: 15px; height: 15px; }

.tslide__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tslide__dot {
  width: 5px; height: 5px;
  border: 0; padding: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: width 320ms var(--ts-ease), background 320ms var(--ts-ease);
}
.tslide__dot.is-on { width: 17px; background: #111; }

/* ---- thumbnail rail ---- */
.tslide__thumbs {
  display: flex;
  gap: var(--ts-thumb-gap);
  margin-top: var(--ts-thumb-rail-gap);
  overflow: hidden;
}

.tslide__thumb {
  flex: 0 0 var(--ts-thumb-w);
  width: var(--ts-thumb-w);
  height: var(--ts-thumb-h);
  border: 0; padding: 0;
  border-radius: var(--ts-thumb-radius);
  overflow: hidden;
  background: #ddd;
  cursor: pointer;
  opacity: var(--ts-thumb-idle);
  transition: opacity var(--ts-dur) var(--ts-ease);
}
.tslide__thumb.is-on { opacity: 1; }

.tslide__thumb > img,
.tslide__thumb > .tslide__art { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .tslide__track, .tslide__thumb, .tslide__dot { transition-duration: 1ms; }
}