/* ----------------- Projekty ----------------- */

/*Na čem pracujeme*/
#na-cem-pracujeme {margin-top: -78px;}
#na-cem-pracujeme .section-shadow {margin-top: 70px;}




#wip {font-size:22px;display: block;font-weight: bold;fotrips-mapnt-size: 24px;width: 500px;text-align: center;margin-left:calc(35% - 250px);margin-top: -68px;line-height: 65px;height: 61px;background-color: white;box-shadow: 1px 1px 7px 0px rgb(0 0 0 / 35%);}
#wip img {width: 15px;margin-left: 10px;margin-top: 4px;}
#na-cem-pracujeme .na-cem-pracujeme-bila{width: 100%;}

.projects h3{font-size: 1.1em;}
.project-text{padding:5%;padding-bottom:0}
.project-text p, .project-text a,.text-field a{font-size:0.9em;margin-bottom: 1em;}
.project-text a,.text-field a{text-decoration: underline;}
.project-icons img{height: auto;width: 30px;float: left;padding-right: 5px;}
.project-icons{padding-top: 20px;min-height: 30px;}
.project-icon-one{width:100%;margin-top:2px;margin-bottom:2px;min-height: 30px;}
.project-icon-two, .project-icon-three{width:50%;margin-top:2px;margin-bottom:2px;min-height: 30px;float: left;}
.project-icons p{padding-top: 5px;}
.projects .lower-part{padding:5%;}
.projects .lower-part strong, .state strong{color:#c20116;}
.projects ul{list-style: none;}
.projects ul li::marker{color:white}
.projects ul li::before {color: #c2011600;font-weight: bold;margin-left: -0.92em;padding-right: 0.58em;font-size: 40px;background-size: 20px;}
.projects ul li::marker {font-weight: bold;display: inline-block;width: 0.6em;margin-left: -0.83em;padding-right: 0.23em;font-size: 40px;}

.projects li span {position: relative;top: -8px;font-size:0.8em}
.projects li span strong{font-size:1.1em}
.border-div{border-left:solid 3px #c20116}

.projects-div{padding-right: 10px;}
.project-shadow{box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.25);}
.projects .col-md-js{padding-bottom: 20px;}
.star-icon{width:30px;height: auto;border-radius: 100px;float:left;display:none;}
.state p{background: white;border-radius:100px;color:black;float:left;padding: 6px 15px;margin-left: 10px;}
.state{margin-left:5px;margin-top: 10px;position:absolute}

.projects .lower-part a{text-decoration: none;}
#wip-wrap .wrap-main{width:100%; background-color:white}
.projects-layout{display:none;}
.projects-layout-1{display:block;}


.wrap-main {
    position: relative;
}

.projects-arrow-link-left,
.projects-arrow-link-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: block;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    line-height: 0;
}

.projects-arrow-link-left {
    left: 20px;
}

.projects-arrow-link-right {
    right: 20px;
}

.projects-arrow {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}

.projects-arrow.arrow-left {
    transform: rotate(180deg);
}


/* Text zůstane ve zbývající části upper-part */
.text-field {
    flex: 1; /* Zbývající prostor */
    overflow: hidden; /* Zamezí přetékání */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.text-field-down{
    padding:5%;
    padding-top:0;
}

.pad-main-left.projects{padding-left:70px}

.projects-layout {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch; /* Zajistí stejnou výšku */
}

.col-md-js {
    flex: 1 1 calc(25% - 10px); /* 4 projekty na řádek */
    max-width: calc(25% - 10px);
    margin: 5px;
    display: flex;
}



/* Nastavení pevné výšky pro hlavní obálku projektu */
.projects-div {
    height: 800px; /* Celková výška projektu */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Fixní výška pro obrázek v upper-part */
.project-img {
    flex: 0 0 150px; /* Fixní výška */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f1f1f1;
    margin-top: 5px;
}

/* Obrázek uvnitř bude 100% výšky kontejneru a přizpůsobí se šířce */
.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Upravíme strukturu upper-part, aby měl pevně daný obrázek a zbytek prostoru zůstal pro text */
.upper-part {
    height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Zarovná obsah odshora dolů */
}

/* Pevná výška pro dolní část */
.lower-part {
    height: 200px; /* Stejná výška pro všechny */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.upper-part, .lower-part {
    overflow: hidden;
}


/* Oprava zarovnání ikon a textů */
.project-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 20px;
    min-height: 30px;
}

.project-icon-one {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    min-height: 30px;
}

/* Navigační šipky */
.projects-arrow.arrow-left {
    position: sticky;
    top: calc(50% - (46px / 2));
    transform: rotate(180deg);
}

.projects-arrow.arrow-right {
    position: sticky;
    top: calc(50% - (46px / 2));
}

.projects-arrow-link-left {
    position: absolute;
    left: 40px;
    top: calc(50% - (46px / 2));
}

.projects-arrow-link-right {
    position: absolute;
    right: 50px;
    top: calc(50% - (46px / 2));
}

/* Oprava paddingu a odsazení */
.projects .lower-part {
    padding: 5%;
}

.text-field {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.text-field-down {
    padding: 5%;
    padding-top: 0;
}

/* Mobilní úpravy */
@media screen and (max-width: 950px) {
    .col-md-js {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

    #na-cem-pracujeme .na-cem-pracujeme-bila{width: 100%;}
    #na-cem-pracujeme .na-cem-pracujeme-bila a#wip{
        font-weight: bold;
        padding-top: 15px;
        padding-bottom: 15px;
        display: block;
        width: 100%;
        clear: both;
        text-align: center;
        box-shadow: rgb(0 0 0 / 60%) 0px 0px 10px;
        -webkit-box-shadow: rgb(0 0 0 / 60%) 0px 0px 10px;
        -moz-box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 10px;
        background: transparent;
    }
    #wip{font-size: 1.1em;line-height:1.2em;height: auto;margin-top:0;margin:0 auto}
    #na-cem-pracujeme .section-shadow{margin:0;display: none;}

    #wip-wrap .pad-main-left .projects-layout{
        width: calc(100% - 60px);
    }

    .projects-arrow-link-left{
        left:15px;
    }

    .projects-arrow-link-right{
        right:20px;
    }



}

@media screen and (max-width: 750px) {
    .col-md-js {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .projects-arrow-link-left {
        left: 15px;
    }

    .projects-arrow-link-right {
        right: 20px;
    }
}