/* Gurni prvi blok ispod fiksnog headera */
#thumbnail-section { margin-top: var(--navbar-height) !important; }

/* Lepši auto-offset prilikom scroll-a ka anchor sekcijama */
html { scroll-padding-top: calc(var(--navbar-height) + 8px); }

/* tvoj postojeći ambientBg - ostavljen NETAKNUT */

/*#ambientBg {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  z-index: 0;*/
/*  background-size: cover;*/
/*  background-position: center center;*/
/*  filter: blur(60px) brightness(0.7);*/
/*  pointer-events: none;*/
/*  opacity: 0.85;*/
/*  transition: opacity 0.6s ease;*/
/*}*/
/* canvas treba da bude iznad ambientBg, ali ispod videa (da video kontrole ostanu dostupne) */
#video-wrapper {
  position: relative;
  overflow: visible;
}

/* stari image ambient praktično ubijen */
#ambientBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  pointer-events: none;
}

 /*PRAVI ambient – iz videa, sa bleedom preko ivica */
#ambientCanvas {
  position: absolute;
  transform: translateX(-50%) scale(1.1);
  top: -12%;
  left: 50%;
  width: 100%;
  height: 105%;
  z-index: 1;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity .35s
  ease;
  border-radius: var(--player-radius, 16px);
  filter: blur(60px) brightness(0.9);
}
@font-face {
  font-family: 'Phosphor';
  font-display: swap;  /* Ovaj CSS pravilo omogućava brže prikazivanje */
}
/* Grid kontejner */ /* FIX */
.video-page__grid {
  row-gap: 0px;
  display: grid;
  grid-template-columns: 1fr; /* mobilno: jedna kolona */
  gap: 20px;
}

/* Redosled na mobilu: video → detail → aside */
.video-page__video { order: 1; }
.video-page__detail { order: 2; }
.video-page__aside { order: 3; height: 500px!important; z-index:2; }

/* >= 992px: dve kolone + sticky aside */
@media (min-width: 992px) {
  .video-page__grid {
    --aside-width: 360px; /* podesivo */
    row-gap: 0px;
    gap: 28px;
    grid-template-columns: 1fr var(--aside-width);
    align-items: start;
  }

  .video-page__aside {
    position: relative;
    padding: 12px 0;
    height: max-content;
    order: 2; /* desno od videa */
    /* opcionalno osiguranje: */
    grid-column: 2;
  }

  .video-page__detail {
    grid-column: 1 / 2; /* leva kolona */
    order: 3;
  }
}

@media (min-width: 1200px) {
  .video-page__grid {
    gap: 30px;
    row-gap: 0px;
    --aside-width: 380px; }
}

@media (max-width: 991.98px) {
  .movie-join-form { position: static !important; top: auto !important; }
}