/* -----  IMAGE CAROUSEL ----- */
/* ----- CAROUSEL WRAPPER ----- */
.km-img-carousel{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* schovat scrollbar (není povinné, ale hezké) */
.km-img-carousel::-webkit-scrollbar{
  height: 0;
}
.km-img-carousel{
  scrollbar-width: none;
}

/* ----- CARD ----- */
.km-img-card{
  position: relative;
  flex: 0 0 72%;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: #fff;
  background: #000;
}

/* desktop – 4 karty vedle sebe */
@media (min-width: 768px){
  .km-img-card{
    flex-basis: 24%;
  }
}

/* ----- IMAGE WRAP ----- */
.km-img-wrap{
  position: relative;
  width: 100%;
  height: 100%;
}

/* ----- IMAGES ----- */
.km-img{
  width: 100%;
  height: auto;
  display: block;
  transition:
    opacity .25s ease,
    transform .35s ease;
}

/* druhá fotka přes hlavní */
.km-img-alt{
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* ----- HOVER EFFECTS (DESKTOP) ----- */
.km-img-card:hover .km-img-main{
  opacity: 0;
}

.km-img-card:hover .km-img-alt{
  opacity: 1;
}

.km-img-card:hover .km-img{
  transform: scale(1.04);
}

/* ----- TITLE OVERLAY ----- */
.km-img-title{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.7),
    rgba(0,0,0,.35),
    transparent
  );

  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .2s ease,
    transform .2s ease;
}

/* zobrazit title při hoveru */
.km-img-card:hover .km-img-title{
  opacity: 1;
  transform: translateY(0);
}

/* ----- MOBILE BEHAVIOUR ----- */
/* na mobilech není hover – název je vždy vidět, bez swapu */
@media (hover: none){
  .km-img-title{
    opacity: 1;
    transform: none;
  }

  .km-img-alt{
    display: none;
  }

  .km-img{
    transform: none !important;
  }
}

/* ----- FOCUS (keyboard accessibility) ----- */
.km-img-card:focus-visible{
  outline: 2px solid rgba(0,0,0,.5);
  outline-offset: 2px;
}
/* ----- END OF IMAGE CAROUSEL ----- */