/* Banner visina za Slick */
#banner-section {
  --banner-h: 520px;
  padding: 0px 0 1.75rem;
}
#banner-section .slick-banner,
#banner-section .slick-banner .slick-list,
#banner-section .slick-banner .slick-track,
#banner-section .slick-banner .slick-slide,
#banner-section .slick-banner .slick-item,
#banner-section .slick-banner .movie-content {
  height: var(--banner-h) !important;
  min-height: var(--banner-h) !important;
}
.movie-content {
  bottom:40px;
}
/* Pozadina da lepo ispuni */
#banner-section .slick-banner .slick-item {
  background-size: cover;
  background-repeat: no-repeat;
}
/* Manja visina na mobilnom */
@media (max-width: 768px) {
  #banner-section { --banner-h: 380px; }
}
/* Default za sve banere */
.slick-banner .slick-item { background-position: center 30%; }

/* Baner sa ID = 4 */
.slick-banner .slick-item.banner-id-4 { background-position: center 3%; }

.banner-trailer-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.banner-trailer-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Prikaži info samo na aktivnom slajdu — JS ga ionako kontroliše */
.slick-slide .banner-info { display: none; }
.slick-slide.slick-current .banner-info { display: block; }

/* Sakrij navigaciju banera dok traje video faza */
.slick-banner.is-video-phase .slick-dots,
.slick-banner.is-video-phase .slick-arrow,
.slick-banner.is-video-phase .slick-arrow-prev,
.slick-banner.is-video-phase .slick-arrow-next {
  display: none !important;
}
.banner-info, .banner-trailer-wrap { will-change: opacity; backface-visibility: hidden; }
.banner-trailer-wrap video { transform: translateZ(0); }

/* Pre nego što slick krene, prikaži samo prvi slide */
.slick-banner:not(.slick-initialized) { overflow: hidden; position: relative; }
.slick-banner:not(.slick-initialized) .slick-item { display: none; }
.slick-banner:not(.slick-initialized) .slick-item:first-child { display: block; }
.slick-banner:not(.slick-initialized) .slick-dots,
.slick-banner:not(.slick-initialized) .slick-arrow { display: none !important; }

.banner-trailer-wrap { position: relative; z-index: 3; }
.banner-trailer-wrap video { display:block; width:100%; height:auto; }
.banner-info { position: relative; z-index: 2; }
/* Ako imaš overlay iznad svega (npr. gradient preko ::before), on treba da ne hvata klikove: */
.hero-overlay, .banner-overlay { pointer-events: none; }
/* SAMO mobilni */
@media (max-width: 768px) {
  /* Roditelj slajda da bude referenca za apsolutno pozicioniranje videa */
  .slick-item.banner-slide { position: relative; }

  /* Video sloj preko celog bannera */
  .banner-trailer-wrap {
    position: absolute;  /* na mob apsolutno, da ispuni ceo banner */
    inset: 0;            /* top/right/bottom/left: 0 */
    z-index: 3;          /* iznad pozadinske slike */
    /* display NE diramo – JS upravlja prikazom */
  }

  .banner-trailer-wrap video {
    width: 100%;
    height: 100%!important;
    object-fit: cover;   /* popuni bez izobličenja */
    display: block;
    background: #000;    /* izbegni „flash“ na iOS */
    -webkit-transform: translateZ(0); /* iOS rendering hint */
    transform: translateZ(0);
  }

  /* Info ispod videa – po potrebi */
  .banner-info { position: relative; z-index: 2; }

  /* Ako postoji overlay/gradient – da ne blokira tap na video */
  .hero-overlay,
  .banner-overlay {
    pointer-events: none;
  }

  /* Visina bannera na mobilnom (ako želiš malo više prostora, podesi ovde) */
  #banner-section { --banner-h: 380px; }
}
/* Pozicioniranje trake pri dnu bannera */
.slick-banner .banner-slide {
  position: relative;
}

.slick-banner .banner-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;             /* debljina trake */
  background: rgba(255, 255, 255, 0.12); /* pozadinska „prazna“ linija */
  overflow: hidden;
  z-index: 4;              /* da bude iznad pozadine, ispod teksta/CTA po potrebi */
}

.slick-banner .banner-progress__bar {
  display: block;
  width: 0%;
  height: 100%;
  background: #65656587;     /* crvena aktivna traka */
  transition: none;        /* animaciju vodimo JS-om da bismo mogli resete između slajdova */
}

/* Opcionalno: malo zaobljenja */
.slick-banner .banner-progress,
.slick-banner .banner-progress__bar {
  border-radius: 2px;
}