*{
    --section-width: clamp(650px, 70%, 1100px);

}

html{
    scroll-behavior: smooth;
 
}
main#main * {
    box-sizing: border-box;
}
main#main {
    font-size: clamp(15px, 1.5vw, 18px);
}

section.detail.extradetail{
    position: relative;
    padding-top: 0;
    overflow: hidden;

}

section.detail.extradetail .boxtext {
    position: absolute;
    background: transparent;
    padding: 0;
    min-width: 300px;
    width: var(--section-width);
    left: calc(50% - (var(--section-width) / 2));
    align-items: center;
    margin-top: 130px;
    z-index: 2;
}
section.detail.extradetail .boxtext::before,section.detail.extradetail .boxtext::after {
    display: none;
}

section.detail.extradetail .boxtext h1{
    font-size: 3.3em;
    margin-bottom: 0.5em;
    line-height: 1.25em;
    max-width: 800px;
}

section.detail.extradetail .boxtext h1::after {
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.5em;
}
section.detail.extradetail .boxtext h3{
    font-size: 1.5em;
    font-family: unset;
    font-weight: normal;
    margin-bottom: 1em;
}

section.detail.extradetail .boxtext p.cena{
    font-size: 1.5em;
    font-family: unset;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 2.2em;
}

section.detail.extradetail .boxtext p.cena b, 
section.detail.extradetail .boxtext p.cena a {
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    color: white;
    pointer-events: none;
}



section.detail.extradetail .boxtext .cta {
    display: block;
    color: var(--vice_c);
    width: 270px;
    font-size: 1em;
    justify-content: space-between;
    background-color: var(--hlavnibarva);
    padding:0 clamp(.7em,1.5vw,1.5em) ;
    text-align: start;
    border: 1px solid #ffffff00;
    position: relative;
    left:0px;
    bottom: 0px;
    transition: all .3s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    border-radius: .4em;

    
}

section.detail.extradetail .boxtext .cta p {
    display: flex;
    padding-right: 0;
    color:var(--zakladnitext);
    width: 97%;
    margin-block: 1em;
    justify-content: space-between;
    align-items: center;
}

section.detail.extradetail .boxtext .cta p::after  {
    content: '';
    height: 1em;
    width: 1.3em;
    background: var(--zakladnitext);
    mask-image: url('../img/ikony/ikona_sipka_20x16.svg');
    -webkit-mask-image: url('../img/ikony/ikona_sipka_20x16.svg');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: cover;
    
}

section.detail.extradetail .boxtext h1, section.detail.extradetail .boxtext h3, section.detail.extradetail .boxtext p.cena {
    color:var(--inverznitext);
    text-align: center;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.95);
}

section.detail.extradetail .boxobrazek {
    width: 100%;
    height: 100%;
    display: block;
    position: static;
}

section.detail.extradetail .boxobrazek::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent radial-gradient(closest-side at 50% 50%, #000000 0%, #54545400 100%) 0% 0% no-repeat padding-box;
    opacity: 0.55;

}

section.detail.extradetail .boxobrazek picture, section.detail.extradetail .boxobrazek picture img {
    position: static;
    max-height: 743px;
    min-height: 743px;
    display: block;
}

section.detail.extradetail .boxobrazek picture img{
    object-position: center;
}

section.detail.extradetail .boxobrazek picture.mobil {
    display: none;
}

@media screen and (max-width:720px) {
    section.detail.extradetail .boxobrazek picture.desktop {
        display: none;
    }
    section.detail.extradetail .boxobrazek picture.mobil {
        display: block;
    }
}

@media screen and (max-width:676px) {
    section.detail.extradetail .boxtext h1{
        font-size: 2.3em;
        margin-bottom: 1.2em;
    }
    
    section.detail.extradetail .boxtext h3{
        font-size: 1.6em;
        font-family: unset;
        font-weight: normal;
        margin-bottom: 1em;
    }
    
    section.detail.extradetail .boxtext p.cena{
        font-size: 1.6em;
        font-family: unset;
        font-weight: normal;
        margin-top: 0;
        margin-bottom: 2.2em;
    
    }
    
    section.detail.extradetail .boxtext p.cena b, section.detail.extradetail .boxtext p.cena a{
      
        font-weight: bold;
    }

    section.detail.extradetail .boxtext .cta {
        width: 220px;
    }

    section.detail.extradetail .boxtext {
        width: 100%;
        left:0;
        padding-inline: var(--padding);
    
        
    }
}



/* SEKCE obecné */

section.sekce{
    width: var(--section-width);
    margin:auto;
    margin-bottom: 40px;
    position: relative;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

section.sekce:nth-child(odd)::before {
    content: '';
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background: rgb(231,231,231);
    background: linear-gradient(90deg, rgba(231,231,231,1) 0%, rgba(255,255,255,0) 72%);
    z-index: -1;
}




section.sekce h1 {
    text-align: left;
    font-size: 1.7em;
    position: relative;
    width: 100%;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
    margin-top: 0;
    padding-left: 0;
}
section.sekce h1:after {
    left: 0;
    transform: unset;
}


section.sekce p {
    font-size: 1.1em;

}
/*
section.sekce h1:first-of-type:before {
    content: '';
    position: absolute;
    height: 100%;
    width: max(40px, 10%);
    border-bottom: 4px solid var(--hlavnibarva);
}
*/

/* SEKCE - Infografika - až 5 bodů: */

section.info{
    position: relative;
    width: 100%;
    background: var(--hlavnibarva);
    display: flex;
    row-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 30px;
    padding-block: 3em;

}

section.info div{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 14em;
    padding-inline: 10px;
    border-inline: 1px solid var(--inverznitext);  
}




section.info div h1{
    margin:0;
    padding:0;
    font-size: 2.2em;
    color: #4c4c4c;
    word-break: break-all;
    text-align: center;
}



@media screen and (max-width:500px) {
    section.info div {
        border-inline: none;
        flex-basis: 100%;
    }

    section.info div h1{
        border-bottom: 1px solid var(--inverznitext);
    }

}

section.info div h1 sup{
    font-weight: normal;

}

section.info div p{
    margin:0;
    padding:0;
    font-size: 1em;   
     color: #4c4c4c;
    word-break: break-all;
    text-align: center;

}


@media screen and (max-width:1350px) {
    section.info div{
        width: 10em;
        padding-block: 10px;
    }

    section.info div h1{
        font-size: 1.7em;
    
    }
    
    
    section.info div p{
        font-size: .9em;
    
    }
}

/* SEKCE - Nadpis, text + foto: */

section.sekce.ntf section.galerie img {
    width: 100%;
    height: 100%;
}
/*
section.sekce.ntf section.galerie a.foto {
    padding-top: 0;
}

section.sekce.ntf section.galerie a.foto picture, section.sekce.ntf section.galerie a.foto picture img {
    position: static;

}
*/


section.sekce.ntf section.galerie{
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
    padding-top: 3rem;
}

/*1 foto*/

section.sekce.ntf section.galerie.f1{
    grid-template-columns: repeat(1, 1fr);
}

/*3 foto*/
section.sekce.ntf section.galerie.f3{
    grid-template-columns: repeat(2, 1fr);
}

section.sekce.ntf section.galerie.f3 a:first-child{
    grid-row: 1/-1;
    grid-column: span 2;
    
}
section.sekce.ntf section.galerie.g4 {
    grid-template-columns: repeat(4, 1fr);
    padding-left: 0;
    padding-right: 0;
}


/*4 nebo 2 foto*/

section.sekce.ntf section.galerie.f2_4{
    grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width:830px) {
    section.sekce.ntf section.galerie, section.sekce.ntf section.galerie.g4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width:530px) {
    section.sekce.ntf section.galerie.f2_4, section.sekce.ntf section.galerie.f3, section.sekce.ntf section.galerie.f1, section.sekce.ntf section.galerie, section.sekce.ntf section.galerie.g4 {
        grid-template-columns: 1fr;
        column-gap: 0;
        pointer-events: none;

    }
    section.sekce.ntf section.galerie.f3 a:first-child {
        grid-row: unset; 
        grid-column:unset;
    }
}


/* SEKCE - Nadpis, text + video */

section.sekce.ntv .extradetail_video{
    width: 100%;
    height: fit-content;
}

section.sekce.ntv .extradetail_video iframe{
    width: 100%;
    aspect-ratio: 3/2;
}


/* SEKCE - Nadpis, text + matterport: */

section.sekce.ntm .extradetail_matterport{
    width: 100%;
    height: fit-content;
}

section.sekce.ntm .extradetail_matterport iframe{
    width: 100%;
    aspect-ratio: 3/2;
}


/* SEKCE - Nadpis, text + mapa: */

section.sekce.ntmap .extradetail_mapa{
    width: 100%;
    height: fit-content;
    margin-top: 10px;
    margin-bottom: 50px;
}

section.sekce.ntmap .extradetail_mapa iframe{
    width: 100%;
    aspect-ratio: 2/1;
}

section.sekce.ntmap > span{
    display: flex;
    font-size: 1.4em;
    align-items: center;
    padding-bottom: 1em;
}

section.sekce.ntmap > span::before{
    content: '';
    width: 1.1em;
    height: 1.1em;

    mask-image: url('../img/ikona_mapa.svg');
    -webkit-mask-image: url('../img/ikona_mapa.svg');
    mask-size: cover;
    -webkit-mask-size: cover;
    margin-right: 1em;
    background: black;

}

/* SEKCE - Dokumenty ke stažení: */

section.sekce.doc section {
    display: flex;
    flex-wrap: wrap;
    gap:20px;
 }

section.sekce.doc section a{
    display: flex;
    flex-direction: column;
    color:black;
    width: 30%;
    max-width: 330px;
    justify-content: space-between;
    text-align: center;
    gap: 0.7em;
  /*  aspect-ratio: 1/.9;*/
    padding: 20px;
    align-items: center;
    background-color: #F9F9F9;

}

section.sekce.doc section a::before{
    content: '';
    width: 30px;
    height: 30px;

    background-image: url('../img/ikona_pdf.svg');
    background-size: cover;
    
}


@media screen and (max-width:650px) {
    section.sekce.doc section a {
        width: 46%;
    }
}

@media screen and (max-width:420px) {
    section.sekce.doc section {
        justify-content: flex-start;
    }


    .kontaktni.vextradetailu {
        padding-left: 0;
        padding-right: 0;
    }
    

}

/* SEKCE - Seznam bodů */
section.sekce.bod {
    margin: auto;
    position: relative;
    margin-bottom: 40px;
}

section.sekce.bod h1::before {
    width: max(40px, 5%);
}


section.sekce.bod ul {
    list-style-type:square;
    width: 60%;
}

section.sekce.bod ul li{
    margin-bottom: .9em;
}

section.sekce.bod .obaltech {
    width: 30%;
    height: 0;
    padding-top: 30%;
    background: url('../img/ikony_podklad.png') center/cover no-repeat;
    position: absolute;
    top: 6rem;
    right: 0;

}


section.sekce.bod .obaltech img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    object-fit: cover;
    border-radius: 1.5rem;
    box-shadow: 0px 0px 40px #00000059;
}


/* SEKCE obeckě - media */

@media screen and (max-width:760px) {
    section.sekce{
        width: 100%;
        padding-inline: var(--padding);
    }

    section.sekce.bod{
        width: 100%;
        margin-inline: 0;
    }

    section.sekce.bod ul {
        width: 100%;
    }

  
    section.sekce.bod .obaltech {
            display: none;
    }

}



/* SEKCE Homestaging */

/* DESIGN HOMESTAGING WEB */


.homestaging {

    padding-bottom: 80px;

    margin-inline: auto;
    max-width: 1300px;
    /*box-sizing: content-box !important;*/
}

.homestaging-slider {
    aspect-ratio: 33/13;
    
    border-radius: 15px;
    overflow: hidden;
}

@media screen and (max-width: 500px) {
    .homestaging-slider {
        height: fit-content;
        aspect-ratio: unset;
    }
}

.homestaging .popisky {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.homestaging h2 {
    text-align: center;
    margin-top: 30px;
}


.homestaging .homestaging-dalsi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;

}

.homestaging .homestaging-dalsi div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;

}
.homestaging .homestaging-dalsi div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: all .3s ease-in-out;
    border-radius: 15px;

}

.homestaging .homestaging-dalsi div.active {
    position: absolute;
    display: none;
    visibility: hidden;
}

.homestaging .homestaging-dalsi div:hover::after{
    
    background-color: var(--zluta);
    opacity: .5;
    

}
.homestaging .homestaging-dalsi div img {
    width: 100%;
    aspect-ratio: 16/11;
    object-fit: cover;
    border-radius: 15px;
    user-select: none;
    -webkit-user-drag: none;

}







/* homestaging - raw */


/*

    Všechno hlavní by mělo jít upravit v *


    pak už se jen udělá div s classou "homestaging-slider" a do ní je vloří 2 obrázky


*/
.homestaging-slider * {
    --border-width: 2px;
    --thmub-background: #FEE101;
    --thumb-border: 1px solid #000000;
    --thumb-width: 20px;
    --thumb-heigth: max(40px, 10%);
    --thumb-radius: 20px;

    --img-border: 1px solid black;
    box-sizing: border-box;


    
}

@media screen and (max-width:400px) {
    .homestaging-slider * {
        --thumb-width: 15px;

    }
}

.homestaging-slider {
    position: relative;
    height: fit-content;

    width: 100%;

}

.homestaging-slider img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: left;
    -webkit-user-drag: none;
    user-select: none;
    display: block;
    line-height: 0;
}



.homestaging-slider img:last-of-type {
    position: relative;
    top:0;
    left: 0; 
    z-index: 0;
}

.homestaging-slider img:first-of-type {
    position: absolute;
    top:0;
    left: 0;   
    z-index: 1;

    width: 100%;
    border-right: var(--img-border);


}


/* Odtud bych na to nechytal :D */

.homestaging-slider input[type="range"] {
    position: absolute;
    width: calc(var(--thumb-width) + 100%);
    height: 100%;
    top:0;
    left: calc(var(--thumb-width) / -2);;
    z-index: 2;
}

.homestaging-slider input[type=range] {
    margin: 0px 0;
    background-color: transparent;
    -webkit-appearance: none;
    padding: 0px;
    border: none;
}
.homestaging-slider input[type=range]:focus {
    outline: none;
}

.homestaging-slider .homestaging-border {
    width: var(--border-width);
    background-color: #000000;
    height: 100%;
    position: absolute;
    top:0;
    left:calc(50%-(var(--border-width)/2));
    z-index: 1;
}


/* a tady uz vubec ne :DD */

.homestaging-slider input[type=range]::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
    width: 100%;
    height: var(--thumb-heigth); /* výška tracku není stejná jako výška celého inputu */
    cursor: default;
    


}
.homestaging-slider input[type=range]::-webkit-slider-thumb {
    margin-top: 0%;

    
    width: var(--thumb-width);
    height: 100%;   /* výška thumb je teda furt na 100% a měni se jen výška tracku */
    background: var(--thmub-background);
    border: var(--thumb-border);
    border-radius: var(--thumb-radius);
    cursor: ew-resize;
    -webkit-appearance: none;
}
.homestaging-slider input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
}






.homestaging-slider input[type=range]::-moz-range-track {
    background: transparent;
    border: 0;
    width: 100%;
    height: 100%;
    cursor: default;
}
.homestaging-slider input[type=range]::-moz-range-thumb {
    width: var(--thumb-width);
    height: 100%;
    background: var(--thmub-background);
    border: var(--thumb-border);
    border-radius: var(--thumb-radius);
    cursor: ew-resize;
}
.homestaging-slider input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 0px 0;
    color: transparent;
    width: 100%;
    height: 100%;
    cursor: default;
}
.homestaging-slider input[type=range]::-ms-fill-lower {
    background: transparent;
    border: 0;
}
.homestaging-slider input[type=range]::-ms-fill-upper {
    background: transparent;
    border: 0;
}
.homestaging-slider input[type=range]::-ms-thumb {
    width: var(--thumb-width);
    height: 100%;
    background: var(--thmub-background);
    border: var(--thumb-border);
    border-radius: var(--thumb-radius);
    cursor: ew-resize;
    margin-top: 0px;
}
.homestaging-slider input[type=range]:focus::-ms-fill-lower {
    background: transparent;
}
.homestaging-slider input[type=range]:focus::-ms-fill-upper {
    background: transparent;
}