/*********************MAPA*********************/
.map-wrapper {
    overflow: visible;
    margin: 0 auto;
    position: relative;
}
/*.full-width-mapa-wrapper {
    overflow: hidden !important;
}*/
.map__stage {
    bottom: 80px;
}
.map__layout{
    align-items: start;
}
.map__stage{
    position: relative;
}
.map__panzoom{
    width: 100%;
    height: 100%;
    touch-action: none;          /* Panzoom to běžně nastavuje taky, ale dej to sem pro jistotu */
    display: grid;
    mapa-bod-items: center;
}

.map__panzoom img,
.map__panzoom svg{
    max-width: none;             /* aby šlo zoomovat bez “gumového” omezení */
    width: 1400px;               /* můžeš nahradit reálnou velikostí podkladu */
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    margin: 0 auto;
}

.map__controls{
    position:absolute;
    top: 12px;
    left: 12px;
    display:flex;
    flex-wrap: wrap;
    z-index: 5;
}
.map__controls .zoom {
    padding: 9px 12px;
    border: 0;
}
.map__controls .zoom-in {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: #4536A2;
}
.map__controls .zoom-out {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #382985;
}

.mapa-bod.is-active { opacity: 1; }
button.is-active { font-weight: 700; }

.mapa-bod {
    cursor: pointer;
}
/*PATRO SWUTCH*/

.map-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-color: transparent;

  border-radius: 8px;
  padding: 20px 52px 20px 32px;
  background: transparent;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  border: solid 4px #4536A2;
  color: #4536A2;

  cursor: pointer;

  /* SVG šipka jako background-image */
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2210%22%20viewBox%3D%220%200%2018%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M9.70236%209.72849L17.7124%202.15369C17.8979%201.97849%2018%201.74462%2018%201.49525C18%201.24588%2017.8979%201.01201%2017.7124%200.836816L17.1227%200.278985C16.7384%20-0.0839998%2016.1138%20-0.0839998%2015.7301%200.278985L9.00373%206.63973L2.26988%200.271926C2.08447%200.0967306%201.8373%20-7.06494e-07%201.57374%20-7.18015e-07C1.30989%20-7.29548e-07%201.06272%200.0967306%200.877163%200.271926L0.287558%200.829758C0.102144%201.00509%20-5.41508e-08%201.23882%20-6.50511e-08%201.48819C-7.59514e-08%201.73757%200.102144%201.97144%200.287558%202.14663L8.30496%209.72849C8.49095%209.9041%208.73929%2010.0006%209.00329%2010C9.26831%2010.0006%209.51651%209.9041%209.70236%209.72849Z%22%20fill%3D%22%23382985%22/%3E%3C/svg%3E");
}

.map-select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 41, 133, 0.18);
}

/* Volitelné: skryj default šipku v IE/Edge legacy */
.map-select::-ms-expand { display: none; }

/*********************ASIDE*********************/
.aside-content-inner { display: none; }
.aside-content-wrapper.active .aside-content-inner { display: flex; }

.singlePlace-wrapper { display: none; }
.singlePlace-wrapper.active { display: flex; } 

.aside-content-wrapper {
    width: 750px;
    height: auto;
    position: absolute;
    top: 90px;
    right: 0px;
    pointer-events: none;
    display: flex;
    flex-wrap: nowrap;
    pointer-events: none;
    z-index: 8;
}
.aside-content-inner {
    position: relative;
    padding: 32px;
    margin-right: 20px;
    background-color: #FFFDE4;
    filter: drop-shadow(0px 0px 20px #00000083);
    border-radius: 32px;
    pointer-events: all !important;
}
.singlePlace-wrapper {
    gap: 32px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.singlePlace-wrapper.active {
    pointer-events: all !important;
}
.close-btn {
    padding: 14px;
    cursor: pointer;
    z-index: 1;
    border-radius: 10px;
    background-color: #4536A2;
    border: 0;
    display: flex;
}
.close-btn svg {
    width: 17px;
    height: 17px;
}
.top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 5px;
}
.place--title {
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    text-align: left;
    text-wrap: balance;
    max-width: 400px;
}
.place--title__dash {
    font-size: 26px !important;
}
.place--title .place--title_number {
    font-size: 40px !important;
    display: flex;
    align-items: center;
}
.slider_controls {
    display: flex;
    gap: 0px;
}
.slide-arrow {
    display: flex;
}
.slide-arrow svg {
    width: 24px;
    height: 24px;
}
.slider_controls .slide-arrow {
    padding: 12px;
    border: 0;
}
.slider_controls .slide-arrow-prev {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: #4536A2;
}
.slider_controls .slide-arrow-next {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #382985;
}
.place--img {
    width: 100%;
    /*height: 300px;*/
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 21 / 9;
} 
.place--text {
    font-size: 18px;
    line-height: 1.3;
}
.place--text::-webkit-scrollbar-thumb {
    background-color: transparent;
}
.place--text::-webkit-scrollbar {
    width: 6px;               /* šířka scrollbaru */
}
.place--text::-webkit-scrollbar-track {
    background: transparent; /* pozadí */
}
.place--text::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}
.place--text::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.45);
}
  
.place--text:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.35);
}
.place--audio__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.place--audio__wrapper h2 {
    font-size: 26px;
    line-height: 1;
    text-align: center;
    margin-bottom: 16px;
}
/* audio */
.audio-player{
    --text:#FFFDE6;
    --muted: rgba(255,255,255,.75);
    --track: rgba(255,255,255,.25);
    --fill: rgba(255,255,255,.9);

    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 16px;
    border-radius:12px;
    background: #3B2E94;
    color: var(--text);
    width: min(900px, 100%);
    box-sizing:border-box;
}
.audio-player audio{ display:none; }
.ap-btn{
    border:0;
    background:transparent;
    color:inherit;
    border-radius:10px;
    cursor:pointer;
    display:grid;
    place-items:center;
}
.ap-btn:focus-visible{
    outline:2px solid rgba(255,255,255,.9);
    outline-offset:2px;
}
.ap-ic{
    width:22px;
    height:22px;
    fill: currentColor;
    opacity:.95;
}
.ap-play .ap-ic{ width:24px; height:24px; }
.ap-ic-pause{ display:none; }
.audio-player.is-playing .ap-ic-play{ display:none; }
.audio-player.is-playing .ap-ic-pause{ display:block; }
.ap-time{
    font: 500 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    white-space:nowrap;
    opacity:.95;
}
.ap-sep{ opacity:.7; padding:0 4px; }
.ap-current{ color: var(--text); }
.ap-duration{ color: var(--muted); }
/* seek bar */
.ap-seek{
    flex:1;
    -webkit-appearance:none;
    appearance:none;
    height:6px;
    border-radius:999px;
    background: var(--track);
    cursor:pointer;
    outline:none;
}
/* Chrome/Safari */
.ap-seek::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background: var(--fill);
    box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
/* Firefox */
.ap-seek::-moz-range-thumb{
    width:14px;
    height:14px;
    border-radius:50%;
    background: var(--fill);
    border:0;
}
/* malinko zjemníme pravé ikony */
.ap-vol, .ap-more{ opacity:.95; }
.mapa-bod.active circle {
    fill: #4536A2 !important;
    fill-opacity: 1 !important;
}
.singlemapa-bod-wrapper {
    display: none;
}
.singlemapa-bod-wrapper.active {
    display: flex;
}
.singlemapa-bod-wrapper {
    flex-direction: column;
    gap: 32px;
}
.singlemapa-bod-wrapper img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background: coral;
}
.singlemapa-bod-wrapper h2 {
    text-wrap: balance;
    font-size: 32px;
    line-height: 1;
    margin: 0 !important;
}
.singlemapa-bod-wrapper p {
    margin-block-start: 0px !important;
    margin-bottom: 0px 0px 0px 0px;
}
.singlemapa-bod-wrapper p:not(:last-child) {
    margin-bottom: 0px !important;
}
.place--img.id25 {
    object-fit: cover !important;
    object-position: top !important;
}
@media screen and (min-width: 1441px) {
    .aside-content-wrapper { 
        margin-right: 10vw;
    }
}
@media screen and (max-width: 1440px) {
    .map__panzoom img,
    .map__panzoom svg{
        max-width: none;             /* aby šlo zoomovat bez “gumového” omezení */
        width: 1400px;               /* můžeš nahradit reálnou velikostí podkladu */
        height: auto;
        user-select: none;
        -webkit-user-drag: none;
        margin: 0 auto;
    }
    .aside-content-wrapper {
        width: 60vw;
        padding-top: 90px;
        top: 60px;
    }
    .aside-content-wrapper::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
    .aside-content-wrapper::-webkit-scrollbar {
        width: 6px;               /* šířka scrollbaru */
    }
    
    .aside-content-wrapper::-webkit-scrollbar-track {
        background: transparent; /* pozadí */
    }
    
    .aside-content-wrapper::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.25);
        border-radius: 10px;
    }
    
    .aside-content-wrapper::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.45);
    }
        
    .aside-content-wrapper:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,.35);
    }
    .aside-content-inner {
        position: relative;
        padding: 32px;
        margin: 20px;
        width: 100%;
        filter: drop-shadow(0px 0px 10px #00000083);
    }
}
@media screen and (min-width: 992px) and (max-width: 1366px) { 
    .map__filter {
        padding-left: 5vw;
    }
    .map__stage, .map__filter {
        left: 5vw;
    }
    .map__controls {
        top: 0px;
        left: 0px; 
    }
}
@media screen and (max-width: 991.98px) {
    .map__panzoom img,
    .map__panzoom svg{
        max-width: none;
        width: 950px;
        height: auto;
        user-select: none;
        -webkit-user-drag: none;
        margin: unset;
        margin-left: calc(-30% + 320px);
    }
    .aside-content-inner {
        filter: drop-shadow(0px 0px 5px #00000083) !important; 
    }
    .aside-content-wrapper {
        width: 100%;
        top: 30px;
    }
    .aside-content-inner {
        position: relative;
        padding: 20px 20px 30px 20px;
        max-width: 97%;
        margin: 0 auto;
    }
    .full-width-mapa-wrapper {
        padding-top: 5rem;
    }
    .map__filter {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .map-select {
        width: 100%;
        padding: 10px 42px 10px 22px;
    }
    .map__controls {
        top: 0px;
        left: 0px; 
    }
    .map__filter-wrapper {
        margin-bottom: 20px;
        padding-top: 0 !important;
    }
    .full-width-mapa-wrapper .h2-style {
        padding-bottom: 2rem !important;
    }
    .map__controls {
        position: relative;
        top: unset !important;
        left: unset !important;
    }
    .map__stage {
        overflow: hidden;
        padding-left: 1.5rem !important;
    }
    .map__layout {
        user-select: none;              
        -webkit-user-select: none;      
        -webkit-touch-callout: none; 
        touch-action: manipulation;
    }
}
@media screen and (max-width: 768px) {
    .map__panzoom img,
    .map__panzoom svg{
        width: 850px; 
    }
    .singlePlace-wrapper {
        gap: 12px; 
        width: 100%;
    }
    .place--text {
        font-size: 14px;
        line-height: 1.2; 
        margin: 0;
    }
    .close-btn {
        padding: 10px;
    }
    .slider_controls .slide-arrow {
        padding: 8px;
    }
    .slide-arrow svg {
        width: 20px;
        height: 20px;
    }
    .place--title .place--title_number {
        font-size: 30px !important;
    }
    .place--title, .place--audio__wrapper h2 {
        font-size: 21px;
    }
    .place--img {
        /*height: 160px !important;*/
    }    
    .audio-player {
        padding: 7px 7px;
    }
    .ap-play .ap-ic, .ap-vol svg {
        width: 20px;
        height: 20px;
    }
    .aside-content-wrapper {
        padding-top: 60px;
    }
    .top-row {
        gap: 10px;
    }
    .map__stage {
        padding-left: 1.5rem !important;
        padding: 0;
    }
}