/* slider_soft_fix.css
   Načítá se po theme.css.
   Cíl: minimální override jen pro oba slidery (#myCarousel, #rezCarousel).
   - odstraní „dvoj-rámeček“ (caption bez pozadí/borderu)
   - ponechá jen .caption-box jako jediný rámeček
   - nadpisy ve slideru zelené (#8EBF44) a jednotná velikost
   - menší text ve slideru hnědý (#c8b07a) a na mobilu se neztratí
   - šipky na Rezidenci vždy viditelné (BS3)
   - zelený proužek pod sliderem (stejný jako pod horní lištou)
*/

/* ==================================================
   1) ZRUŠIT případný druhý rámeček (jen slider)
   ================================================== */
#myCarousel .carousel-caption,
#rezCarousel .carousel-caption{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Jediný rámeček */
#myCarousel .carousel-caption .caption-box,
#rezCarousel .carousel-caption .caption-box{
  display: inline-block;
  max-width: 92%;
  background: rgba(0,0,0,0.46);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  padding: 20px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* ==================================================
   2) BARVY + sjednocení nadpisů ve slidech
   ================================================== */

/* menší text ve slideru (nezasahuje do webu) */
#myCarousel .carousel-caption .caption-box,
#myCarousel .carousel-caption .caption-box p,
#myCarousel .carousel-caption .caption-box .lead,
#rezCarousel .carousel-caption .caption-box,
#rezCarousel .carousel-caption .caption-box p,
#rezCarousel .carousel-caption .caption-box .lead{
  color: #c8b07a;
}

/* nadpisy ve slideru zelené + sjednocení velikosti */
#myCarousel .carousel-caption .caption-box h1,
#myCarousel .carousel-caption .caption-box h2,
#rezCarousel .carousel-caption .caption-box h1,
#rezCarousel .carousel-caption .caption-box h2{
  color: #8EBF44 !important;
  font-size: clamp(22px, 3.5vw, 36px);
  line-height: 1.1;
  margin: 0 0 6px 0;
}

/* ==================================================
   3) Rezidence – šipky (Bootstrap 3)
   ================================================== */
#rezCarousel .carousel-control.left,
#rezCarousel .carousel-control.right{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 30 !important;
}

/* Aby caption neblokoval klikání na šipky */
#rezCarousel .carousel-caption{ pointer-events: none; }
#rezCarousel .carousel-caption .caption-box{ pointer-events: auto; }


/* ==================================================
   3b) Úvodní slider (#myCarousel) – šipky vždy viditelné + nezabité glyphicons
   (řeší situaci, kdy je někde CSS, které schová .carousel .glyphicon)
   ================================================== */
#myCarousel .carousel-control.left,
#myCarousel .carousel-control.right{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 30 !important;
}

/* Pokud nějaké CSS schovalo glyphicons, tak je vrátíme zpět */
#myCarousel .carousel-control .glyphicon{
  display: inline-block !important;
}

/* Ať nic neleze přes šipky */
#myCarousel .carousel-caption{ pointer-events: none; }
#myCarousel .carousel-caption a,
#myCarousel .carousel-caption button,
#myCarousel .carousel-caption .caption-box{ pointer-events: auto; }

/* ==================================================
   4) Zelený proužek POD sliderem (na všech slidech)
   ================================================== */
#myCarousel,
#rezCarousel{
  position: relative;
}
#myCarousel::after,
#rezCarousel::after{
  content: "";
  display: block;
  height: 3px;
  background: #8EBF44;
}

/* ==================================================
   5) MOBIL – čitelný caption + vynutit zobrazení hnědého textu
   (bez zásahů, které by shazovaly slider)
   ================================================== */
@media (max-width: 767px){
  #myCarousel .carousel-caption,
  #rezCarousel .carousel-caption{
    bottom: 10px;
  }

  #myCarousel .carousel-caption .caption-box,
  #rezCarousel .carousel-caption .caption-box{
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,0.38);
  }

  #myCarousel .carousel-caption .caption-box p,
  #myCarousel .carousel-caption .caption-box .lead,
  #rezCarousel .carousel-caption .caption-box p,
  #rezCarousel .carousel-caption .caption-box .lead{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #c8b07a !important;
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.25;
    margin: 0;
  }
}


/* ==================================================
   3) CROSSFADE – bez bílého bliknutí mezi fotkami
   (Bootstrap 3 carousel)
   ================================================== */
#myCarousel,
#rezCarousel{
  background:#111; /* když se něco nestihne vykreslit, není tam bílo */
}

#myCarousel .carousel-inner,
#rezCarousel .carousel-inner{
  background:#111;
}

/* překryv itemů přes sebe */
#myCarousel .carousel-inner > .item,
#rezCarousel .carousel-inner > .item{
  opacity:0;
  transition: opacity .9s ease-in-out;
  left:0 !important;
  transform: translate3d(0,0,0) !important;
  position:absolute;
  top:0;
  width:100%;
  display:block;

  pointer-events: none; /* neaktivni slidery neblokují klik na odkaz */
  z-index: 1;
}

#myCarousel .carousel-inner > .active,
#rezCarousel .carousel-inner > .active{
  opacity:1;
  position:relative;
  pointer-events: auto;
  z-index: 2;
}

/* zruší BS3 slide posuny (jinak probleskává pozadí) */
#myCarousel .carousel-inner > .next,
#myCarousel .carousel-inner > .prev,
#myCarousel .carousel-inner > .active.left,
#myCarousel .carousel-inner > .active.right,
#rezCarousel .carousel-inner > .next,
#rezCarousel .carousel-inner > .prev,
#rezCarousel .carousel-inner > .active.left,
#rezCarousel .carousel-inner > .active.right{
  left:0 !important;
  transform: translate3d(0,0,0) !important;
}