/* Wrapper omogoča absolutno pozicioniranje slike čez slider */
.hero-wrap{
  position: relative;
}

/* Slider pod overlayi (caption + over-slider) */
#myCarousel{ position: relative; z-index: 1; }

/* --- Osnovno: velikost sliderja in slika --- */
#myCarousel .carousel-item{ 
  height: 650px; 
  position: relative;          /* za ::after in caption-layer */
  overflow: hidden;
}
#myCarousel .carousel-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Indikatorji (rumene črtice) --- */
#myCarousel .carousel-indicators [data-bs-target]{
  background-color: var(--bs-yellow);
  width: 40px; height: 3px; border: 0;
}
#myCarousel .carousel-indicators .active{ opacity: 1; }

/* --- Puščice malo večje --- */
#myCarousel .carousel-control-prev-icon,
#myCarousel .carousel-control-next-icon{ transform: scale(1.3); }

/* --- Enostaven caption overlay (brez leve/desne kolone) --- */
#myCarousel .caption-layer{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;          /* vertikalno centriraj vsebino */
  justify-content: flex-start;  /* levo poravnano */
  padding: clamp(16px, 3vw, 48px);
  padding-left: 15%;
  padding-right: 15%;
  text-align: left;
  z-index: 10;
  pointer-events: none;         /* da kontrole delajo */
}
#myCarousel .caption-layer .caption-content{
  max-width: min(850px, 60vw);
  pointer-events: auto;         /* omogoči klik na gumb */
}
#myCarousel .caption-layer h5{
    text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    font-weight: 700;
}

#myCarousel .carousel-excerpt{
  font-size: clamp(1.125rem, 2.6vw, 1.8rem);
  line-height: 1.5;
  color: #fff!important;
    font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}



/* --- Absolutna slika čez slider (neodvisna) --- */
.over-slider{
  position: absolute;
  right: clamp(12px, 3vw, 48px);
  bottom: -10%;
  transform: none;       /* vertikalno na sredino sliderja */
  width: clamp(260px, 36vw, 640px);   /* dovolj velika, da “seže čez” */
  max-height: 90%;
  object-fit: contain;
  z-index: 40;                        /* nad gradientom in kontrolami */
  pointer-events: none;               /* da puščice delajo normalno */
}


#myCarousel .caption-small { display: block; }

/* --- Mobilno prilagodi --- */
@media (max-width: 991.98px){
  #myCarousel .caption-layer{
    padding-left: 10%;
    padding-right: 10%;
  }
}
@media (max-width: 575.98px){
    
    
  #myCarousel .caption-small { display: none!important; }
  #myCarousel .carousel-item { height: 520px; }
  .over-slider { width: 60vw; }
  #myCarousel .carousel-item::after {
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 100%);
  }
}