/* Úpravy pro obalující kontejner, který obsahuje obě loga */
.obal {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Styly pro obrázek města (mesto3.png - "bílé logo") */
.foto-mesta {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 5; /* Bude pod logem '.logo-nad-fotkou' */
}

.foto-mesta img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Základní styly pro logo-nad-fotkou (pro rozlišení 2000px a VÍCE) --- */
.logo-nad-fotkou {
  position: absolute;
  top: 28%; /* Počáteční pozice pro největší rozlišení */
  left: 21%; /* Počáteční pozice pro největší rozlišení */
  transform: translate(-50%, -50%); /* Centrování vzhledem k top/left bodu */
  max-width: 300px; /* Maximální šířka pro největší rozlišení - upřesněte dle potřeby */
  width: 40%; /* Responzivní šířka - upřesněte dle potřeby, ale nepřesáhne max-width */
  height: auto;
  z-index: 10;
  padding: 10px;
  box-sizing: border-box;
}

.logo-nad-fotkou img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Media Queries pro VELKÁ ROZLIŠENÍ (sestupně) --- */

@media (max-width: 2000px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 24%; /* Mírná úprava pro 2000px */
    max-width: 280px; /* Mírné zmenšení */
    width: 45%;
  }
}

@media (max-width: 1900px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 23%; /* Dále posun doleva */
    max-width: 270px;
    width: 48%;
  }
}

@media (max-width: 1800px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 20%; /* Dále posun doleva */
    max-width: 260px;
    width: 50%;
  }
}

@media (max-width: 1700px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 17%; /* Dále posun doleva */
    max-width: 250px;
    width: 50%;
  }
}

@media (max-width: 1600px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 16%; /* Dále posun doleva */
    max-width: 240px;
    width: 55%;
  }
}

@media (max-width: 1500px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 14%; /* Dále posun doleva */
    max-width: 230px;
    width: 60%;
  }
}


/* --- Media Queries pro STANDARDNÍ A MENŠÍ ROZLIŠENÍ (z předchozí konverzace) --- */

@media (max-width: 1400px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 10%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 1399px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 16%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 1300px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 14%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 1200px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 11%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 1199px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 18%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 1100px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 15%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 1024px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 13%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 992px) {
  .logo-nad-fotkou {
    top: 28%;
    left: 14%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 991px) {
  .logo-nad-fotkou {
    top: 5%;
    left: 12%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 900px) {
  .logo-nad-fotkou {
    top: 5%;
    left: 9%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 800px) {
  .logo-nad-fotkou {
    top: 5%;
    left: 3%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 768px) {
  .logo-nad-fotkou {
    top: 5%;
    left: -1%;
    max-width: 150px;
    width: 70%;
  }
}

@media (max-width: 767px) {
  .logo-nad-fotkou {
    top: 1%;
    left: 10%;
    max-width: 150px;
    width: 70%;
  }
}

@media (max-width: 700px) {
  .logo-nad-fotkou {
    top: -20%;
    left: 5%;
    max-width: 150px;
    width: 70%;
  }
}

@media (max-width: 640px) {
  .logo-nad-fotkou {
    top: -15%; /* Pozor na záporné hodnoty - logo může být mimo viditelnou oblast */
    left: 5%;
    max-width: 200px;
    width: 60%;
  }
}

@media (max-width: 576px) {
  .logo-nad-fotkou {
    top: -25%; /* Pozor na záporné hodnoty - logo může být mimo viditelnou oblast */
    left: -5%;
    max-width: 120px;
    width: 80%;
  }
}

@media (max-width: 400px) {
  .logo-nad-fotkou {
    display: none; /* Skrýt logo na velmi malých rozlišeních */
  }
}

@media (max-width: 422px) { /* Erb se skryje pro šířky menší než 420px */
    .header-erb {
        display: none !important; /* Použijte !important, abyste přepsali inline styly z JavaScriptu */
    }
}

/* carusel */

  .carousel-wrapper {
    position: relative;
    /* Upravíme šířku a výšku, aby se vešly oba obrázky s překryvem a stíny */
    width: 550px; /* Zvýšil jsem šířku */
    height: 400px; /* Zvýšil jsem výšku */
    perspective: 1000px;
    /* overflow: hidden;  Dočasně zakomentuji, abychom viděli přesahy při ladění, pak vrátíme */
    border-radius: 15px;
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.2);  Stín přidáme na aktivní slide, ne na wrapper */
    background-color: transparent; /* Aby byl vidět posunutý slide, pokud bude mít wrapper background */
	}


@media (max-width: 1100px) {
  .carousel-wrapper {
    position: relative;
    /* Upravíme šířku a výšku, aby se vešly oba obrázky s překryvem a stíny */
    width: 440px; /* Zvýšil jsem šířku */
    height: 400px; /* Zvýšil jsem výšku */
    perspective: 1000px;
    /* overflow: hidden;  Dočasně zakomentuji, abychom viděli přesahy při ladění, pak vrátíme */
    border-radius: 15px;
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.2);  Stín přidáme na aktivní slide, ne na wrapper */
    background-color: transparent; /* Aby byl vidět posunutý slide, pokud bude mít wrapper background */
	}
}

@media (max-width: 991px) {
  .carousel-wrapper {
    position: relative;
    /* Upravíme šířku a výšku, aby se vešly oba obrázky s překryvem a stíny */
    width: 550px; /* Zvýšil jsem šířku */
    height: 400px; /* Zvýšil jsem výšku */
    perspective: 1000px;
    /* overflow: hidden;  Dočasně zakomentuji, abychom viděli přesahy při ladění, pak vrátíme */
    border-radius: 15px;
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.2);  Stín přidáme na aktivní slide, ne na wrapper */
    background-color: transparent; /* Aby byl vidět posunutý slide, pokud bude mít wrapper background */
    padding-top: 80px;
	}
}

@media (max-width: 550px) {
  .carousel-wrapper {
    position: relative;
    /* Upravíme šířku a výšku, aby se vešly oba obrázky s překryvem a stíny */
    width: 545px; /* Zvýšil jsem šířku */
    height: 400px; /* Zvýšil jsem výšku */
    perspective: 1000px;
    /* overflow: hidden;  Dočasně zakomentuji, abychom viděli přesahy při ladění, pak vrátíme */
    border-radius: 15px;
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.2);  Stín přidáme na aktivní slide, ne na wrapper */
    background-color: transparent; /* Aby byl vidět posunutý slide, pokud bude mít wrapper background */
    padding-top: 80px;
	}
}

@media (max-width: 400px) {
  .carousel-wrapper {
	display:none;
	}
}

.carousel-container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-out;
}

.carousel-slide {
    position: absolute;
    width: 450px; /* Nastav šířku jednoho obrázku, menší než wrapper */
    height: 300px; /* Nastav výšku jednoho obrázku */
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%); /* Vycentruje slidy původně */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0; /* Odebereme padding, pokud je potřeba jen obrázek */
    box-sizing: border-box;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.6s ease-in-out; /* Důležité pro animaci posunu a zmenšení */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Základní stín pro všechny slidy */
}

.carousel-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Obrázek bude pod textem (pokud by tam byl) */
    border-radius: 15px;
}

.slide-info {
    /* Pokud infobox nepotřebuješ pro tento design, můžeš ho skrýt nebo odstranit */
    /* display: none; */
    position: relative;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    text-align: left;
    max-width: 80%;
    margin-bottom: 20px;
}

.slide-info .slide-title,
.slide-info .slide-price-old,
.slide-info .slide-price-new {
    /* Zachovej, pokud slide-info používáš */
}


/* Stavy slidů - klíčové pro efekt */
.carousel-slide.active {
    z-index: 2; /* Aktivní slide je v popředí */
    opacity: 1;
    /* Původní pozice a velikost - aktivní slide by měl být na normální pozici */
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); /* Výraznější stín pro aktivní */
}

/* Toto bude neaktivní slide (v pozadí) */
.carousel-slide:not(.active) {
    z-index: 1; /* Neaktivní slide je v pozadí */
    opacity: 1; /* Na obrázku není průhledný */
    filter: brightness(0.9); /* Lehké ztmavení pro odlišení */

    /* Klíčové posunutí a zmenšení pro neaktivní slide */
    /* top a left v kombinaci s translate(-50%, -50%) dříve centrování */
    /* Nyní posuneme od středu na -100px doleva a -100px nahoru, takže bude vlevo nahoře */
    transform: translate(-50%, -50%) translateX(-100px) translateY(-100px) scale(0.9); /* Zmenšení na 90% */
}

/* Navigační šipky */
.carousel-nav {
    /*position: absolute;*/
    top: 50%;
    /*transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);*/
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 3; /* Nad slidy */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.carousel-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.carousel-nav.prev {
    left: 10px;
}

.carousel-nav.next {
    right: 10px;
}

/* Indikátory (tečky) */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.indicator {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.indicator.active {
    background-color: white;
}