/* NOVATORIA v11.1 — horizontal slider: Realizacje w ruchu */

.video-realisations--slider .vr-head{
  margin-bottom:22px;
}

.video-realisations--slider .vr-slider-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin:0 0 16px;
}

.video-realisations--slider .vr-slider-counter{
  display:flex;
  align-items:center;
  gap:9px;
  color:#b8afa3;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
}

.video-realisations--slider .vr-slider-counter i{
  width:30px;
  height:1px;
  background:rgba(201,155,75,.35);
}

.video-realisations--slider .vr-slider-current{
  color:#d0a653;
}

.video-realisations--slider .vr-slider-arrows{
  display:flex;
  gap:8px;
}

.video-realisations--slider .vr-slider-arrow{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,155,75,.38);
  background:#0d0d0d;
  color:#f4eee5;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease,opacity .22s ease,transform .22s ease;
}

.video-realisations--slider .vr-slider-arrow:hover:not(:disabled),
.video-realisations--slider .vr-slider-arrow:focus-visible:not(:disabled){
  background:#c99b4b;
  border-color:#c99b4b;
  color:#111;
  transform:translateY(-1px);
}

.video-realisations--slider .vr-slider-arrow:disabled{
  opacity:.30;
  cursor:default;
}

.video-realisations--slider .vr-grid{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:stretch !important;
  gap:14px !important;
  width:100% !important;
  height:510px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:0 1px 7px !important;
  margin:0 !important;
  scroll-snap-type:x mandatory !important;
  scroll-behavior:smooth !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y pinch-zoom !important;
  cursor:grab !important;
  user-select:none !important;
}

.video-realisations--slider .vr-grid::-webkit-scrollbar{
  display:none !important;
}

.video-realisations--slider .vr-grid.is-dragging{
  cursor:grabbing !important;
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
}

.video-realisations--slider .vr-card{
  grid-column:auto !important;
  width:auto !important;
  height:100% !important;
  min-width:0 !important;
  max-width:none !important;
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
}

.video-realisations--slider .vr-feature{
  flex:0 0 54% !important;
}

.video-realisations--slider .vr-vertical{
  flex:0 0 29% !important;
}

.video-realisations--slider .vr-slider-progress{
  position:relative;
  width:100%;
  height:1px;
  margin-top:16px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
}

.video-realisations--slider .vr-slider-progress span{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:34%;
  background:#c99b4b;
  transform:translateX(0);
  transform-origin:left center;
  transition:transform .25s ease,width .25s ease;
}

/* Allows every additional non-feature card to behave like the current vertical tiles. */
.video-realisations--slider .vr-card:not(.vr-feature){
  flex:0 0 29% !important;
}

/* Tablet */
@media(max-width:1000px){
  .video-realisations--slider .vr-grid{
    height:440px !important;
    gap:12px !important;
  }

  .video-realisations--slider .vr-feature{
    flex:0 0 68% !important;
    height:100% !important;
  }

  .video-realisations--slider .vr-vertical,
  .video-realisations--slider .vr-card:not(.vr-feature){
    flex:0 0 42% !important;
    height:100% !important;
  }
}

/* Mobile */
@media(max-width:700px){
  .video-realisations--slider .vr-head{
    margin-bottom:18px;
  }

  .video-realisations--slider .vr-slider-toolbar{
    justify-content:space-between;
    margin-bottom:13px;
  }

  .video-realisations--slider .vr-slider-arrow{
    width:42px;
    height:42px;
  }

  .video-realisations--slider .vr-grid{
    height:470px !important;
    gap:10px !important;
    padding-bottom:5px !important;
  }

  .video-realisations--slider .vr-feature{
    flex:0 0 86vw !important;
    height:100% !important;
  }

  .video-realisations--slider .vr-vertical,
  .video-realisations--slider .vr-card:not(.vr-feature){
    flex:0 0 74vw !important;
    height:100% !important;
  }

  .video-realisations--slider .vr-slider-progress{
    margin-top:13px;
  }
}

@media(prefers-reduced-motion:reduce){
  .video-realisations--slider .vr-grid{
    scroll-behavior:auto !important;
  }

  .video-realisations--slider .vr-slider-arrow,
  .video-realisations--slider .vr-slider-progress span{
    transition:none !important;
  }
}