.sw { width: 100%; max-width: 1100px; margin: auto; padding: 20px 0 28px; overflow: hidden; }
.track-wrap { position: relative; }
.tracks { display: flex; align-items: center; will-change: transform; user-select: none; }

.slide {
  flex: 0 0 var(--sw);
  height: 300px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  margin: 0 var(--gap);
  background: #ddd;
  border: 1px solid #ccc;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s ease;
  opacity: 0.55;
  transform: scale(0.88);
}
.slide.active { opacity: 1; transform: scale(1); z-index: 2; }
.slide.adj1   { opacity: 0.8; transform: scale(0.94); }
.slide.adj2   { opacity: 0.62; transform: scale(0.89); }

.slide img, .slide video {
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}
.slide video { pointer-events: auto; }

.play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.play-circle {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.88);
  display: flex; align-items: center; justify-content: center;
}
.play-circle svg { width: 20px; height: 20px; fill: #222; margin-left: 4px; }
.slide.playing .play-overlay { opacity: 0; }

/* dots only */
.bottom-bar { display: flex; align-items: center; justify-content: center; margin-top: 16px; }
.dots { display: flex; gap: 7px; align-items: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #bbb; cursor: pointer; transition: background 0.3s, transform 0.3s; }
.dot.active { background: #333; transform: scale(1.3); }

/* ── Lightbox ── */
.lb {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.92); z-index: 1000;
  align-items: center; justify-content: center;
}
.lb.open { display: flex; }

.lb-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 900px;
  padding: 0 56px;          /* prostor pro šipky */
}

.lb-inner {
  border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: 82vh;
}
.lb-inner img {
  display: block;
  max-width: min(82vw, 780px);
  max-height: 80vh;
  object-fit: contain; border-radius: 12px;
}
.lb-inner video {
  display: block;
  max-width: min(82vw, 780px);
  max-height: 80vh;
  border-radius: 12px; background: #000;
}

/* close button */
.lb-close {
  position: fixed; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 10;
}
.lb-close:hover { background: rgba(255,255,255,0.28); }
.lb-close svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

/* prev / next inside stage */
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; flex-shrink: 0;
}
.lb-nav:hover { background: rgba(255,255,255,0.30); }
.lb-nav svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev { left: 0; }
.lb-next { right: 0; }

/* === MOBILE === */
@media (max-width: 640px) {
  .sw { padding: 16px 0 0; }
  .slide {
    flex: 0 0 var(--sw-mobile) !important;
    height: var(--sh-mobile) !important;
    border-radius: 20px !important;
    margin: 0 var(--gap-mobile) !important;
    border: none !important;
    opacity: 0.38 !important;
    transform: scale(0.92) !important;
  }
  .slide.active  { opacity: 1 !important; transform: scale(1) !important; }
  .slide.adj1    { opacity: 0.6 !important; transform: scale(0.94) !important; }
  .slide.adj2    { opacity: 0.28 !important; transform: scale(0.90) !important; }
  .bottom-bar { padding-bottom: 20px; }
  .lb-stage { padding: 0 48px; }
  .lb-inner img, .lb-inner video { max-width: 78vw; }


  :root {
    --sh-mobile: 400px!important;
  }


}