.projects{
    width:min(1500px,90vw);
    margin:140px auto 80px;
}

.project-menu{

    display:flex;

    justify-content:center;

    gap:70px;

    margin-bottom:50px;

}

.project-menu button{

    background:none;

    border:none;

    font:inherit;

    font-size:18px;

    letter-spacing:2px;

    cursor:pointer;

    padding-bottom:8px;

    position:relative;

}

.project-menu button::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:#111;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .25s;

}

.project-menu button:hover::after{

    transform:scaleX(1);

}

.project-menu button.active::after{

    transform:scaleX(1);

}

.project-view{

    position:relative;

    height:60vh;

    overflow:hidden;
    
    border-radius:6px;

}

.project-image{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    display:block;

}

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    background:none;

    color:white;

    font-size:60px;

    cursor:pointer;

    opacity:.5;

    transition:.25s;

}

.gallery-arrow:hover{

    opacity:1;

}

.gallery-arrow.left{

    left:25px;

}

.gallery-arrow.right{

    right:25px;

}

.project-info{

    margin:0 0 40px;

}

.project-info h2{

    font-size:42px;

    font-weight:300;

    margin-bottom:18px;

}

.project-info p{

    max-width:800px;

    line-height:1.8;

    margin-bottom:15px;

}

.architect{

    margin-top:20px;

}

.architect a{

    text-decoration:none;

}

.project-sidebar{

    display:flex;

    flex-direction:column;

    height:60vh;

}

.project-thumbs{

    margin-top:auto;

    display:flex;

    justify-content:flex-start;

    align-items:flex-end;

    gap:8px;

}

.project-thumbs img{

    width:90px;

    height:60px;

    object-fit:cover;

    cursor:pointer;

    filter:grayscale(100%);

    opacity:.35;

    transition:.25s;

}

.thumb-empty{

    width:100px;

    height:65px;

    flex:0 0 auto;

}

.project-thumbs img:hover{

    filter:none;

    opacity:1;

}

.project-thumbs img.active{

    filter:none;

    opacity:1;

}
.gallery-layout{

    display:grid;

    grid-template-columns: 2fr 1fr;

    gap:60px;

    align-items:start;

    margin-top:50px;

}
#project-collaborators a{

    color:inherit;

    text-decoration:none;

}

#project-collaborators a:hover{

    text-decoration:underline;

}

/* ==========================================
   MOBIL - PROJEKTY
========================================== */

@media (max-width:900px){

    .project-menu button{

        max-width:90px;

        justify-self:center;

    }


    .projects{

        width:92%;

        margin:105px auto 35px;

    }


    /* ---------- KATEGORIE ---------- */

  .project-menu{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:12px;

    width:100%;

    margin-bottom:30px;

    overflow:visible;

    white-space:normal;

}

    .project-menu::-webkit-scrollbar{

        display:none;

    }

    .project-menu button{

    width:100%;

    flex:none;

    font-size:13px;

    line-height:1.3;

    letter-spacing:1px;

    color:#111;

    padding:0 2px 7px;

    white-space:normal;

    text-align:center;

    }

    /* ---------- ROZLOŽENÍ ---------- */

    .gallery-layout{

        display:flex;

        flex-direction:column;

        gap:0;

        margin-top:0;

    }


    /* ---------- HLAVNÍ OBRÁZEK ---------- */

    .project-view{

        width:100%;

        height:auto;

        aspect-ratio:16 / 10;

        border-radius:4px;

        overflow:hidden;

    }

    .project-image{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:center;

    }


    /* ---------- ŠIPKY ---------- */

    .gallery-arrow{

        width:42px;

        height:52px;

        font-size:42px;

        opacity:.7;

    }

    .gallery-arrow.left{

        left:8px;

    }

    .gallery-arrow.right{

        right:8px;

    }


    /* ---------- INFORMACE ---------- */

   .project-sidebar{

    display:block;

    height:auto;

}

    .project-info{

        margin:25px 0 20px;

    }

    .project-info h2{

        font-size:30px;

        line-height:1.2;

        margin-bottom:14px;

    }

    .project-info p{

        font-size:16px;

        line-height:1.55;

        margin-bottom:12px;

    }

    .architect{

        margin-top:16px;

    }


    /* ---------- MINIATURY ---------- */

    .project-thumbs{

        order:2;

        width:100%;

        margin-top:5px;

        display:flex;

        justify-content:flex-start;

        align-items:center;

        gap:7px;

        overflow-x:auto;

        padding-bottom:5px;

        scrollbar-width:none;

    }

    .project-thumbs::-webkit-scrollbar{

        display:none;

    }

    .project-thumbs img{

        flex:0 0 auto;

        width:68px;

        height:46px;

        object-fit:cover;

    }
    
    .project-thumbs{

    display:none;
    }


}