/* =====================================================
   RESET
===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================================================
   BODY
===================================================== */

body {
    font-family: Helvetica, Arial, sans-serif;
    color: #000000;
    background-color: #ffffff;
}

/* =====================================================
   HEADER CONTAINER
===================================================== */

.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1900px;

    margin: 0 auto;

    padding: 0 63px;

}

/* =====================================================
   CONTAINER
===================================================== */

.container {
    width: calc(100% - 120px);

    max-width: 1900px;

    margin: 0 auto;

    padding-bottom: 50px;
}

/* =====================================================
   NAVIGATION
===================================================== */

nav {
     padding: 40px 0 60px;
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
    margin:0;
    padding:0;

}

/* =====================================================
   LANGUAGE SWITCH
===================================================== */

.language-switch{

    display:flex;

    align-items:center;

    gap:4px;

    font-size:14px;

    letter-spacing:.05em;

}

.language-switch a{

    text-decoration:none;

    color:#000000;

    transition:color .25s ease;

}

.language-switch a:hover{

    color:#000;

}

.language-switch a.active{

    color:#000;

}

.language-switch span{

    color:#000000;

}

/* =====================================================
   LINKS
===================================================== */

nav a {
    text-decoration: none;
    color: inherit;
    transition:opacity 0.3s ease;

}

nav a:hover {

    opacity:0.5;

}

/* =====================================================
   HEADER
===================================================== */

header {

    width: 100%;

}

/* =====================================================
   HOME HEADER
===================================================== */

.home header {
    color: #ffffff;
}

.home .language-switch a{

    color:#ffffff;

}

.home .language-switch span{

    color:#ffffff;

}


/* =====================================================
   HERO
===================================================== */

.hero {

    height: 100vh;

    background-image: url("../images/hero/hero2.jpg");

    background-size: 180%;

    background-position: 100% -223%;


}


/* =====================================================
   HEADER OVER HERO
===================================================== */

header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 10;

}


.home header {

    color: rgb(255, 255, 255);

}

/* =====================================================
   HEADER TYPOGRAPHY
===================================================== */

header > nav > .container > a {

    font-size: 28px;

    font-weight: 500;

    letter-spacing: .05em;

    text-decoration: none;

    color: inherit;


}

header > nav > .header-container > a {

    font-size: 28px;

    font-weight: 500;

    letter-spacing: .05em;

    text-decoration: none;

    color: inherit;


}

.nav-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:35px;

}

nav ul a {

    font-size: 15px;

    letter-spacing: 0.05em;


}

/* =====================================================
   OBRAS HEADER
===================================================== */

.obras header {

    position: static;

    background: white;

    color: black;

}

/* =====================================================
   GALLERY
===================================================== */

.gallery {

   display: grid;

    grid-template-columns: repeat(3, minmax(350px, 420px));

    justify-content: center;

    gap: 70px;

}


/* =====================================================
   OBRA
===================================================== */

.obra {
    display: flex;
    flex-direction: column;
}

.obra-imagem {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.obra-imagem img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .50s ease;
}

.obra:hover .obra-imagem img {
    transform: scale(1.15);
}

/* =====================================================
   LEGENDA
===================================================== */

.legenda {

    margin-top: 22px;

    text-align: left;

}

/* ----------------------------- */

.titulo-obra {

    font-size: 14px;

    font-weight: 300;

    line-height: 1.2;

    color: #4d4d4d;

    margin-bottom: 10px;

}

/* ----------------------------- */

.tecnica,
.dimensao,
.ano {

    font-size: 13px;

    font-weight: 200;

    color: #7a7a7a;

    line-height: 1.2;

    margin: 0;

}

/* =====================================================
   LIGHTBOX
===================================================== */

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.92);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:9999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox-image{

    max-width:90vw;

    max-height:90vh;

    object-fit:contain;

   transform: scale(1);

    transform-origin: center center;

    transition: transform .20s ease;

    cursor: zoom-in;

    -webkit-user-drag: none;

    user-select: none;

}

.lightbox.active .lightbox-image{

    transform:scale(1);
    display: flex;
    justify-content: center;
    align-items: center;


}

.close{

    position:absolute;

    top:25px;

    right:40px;

    color:rgb(185, 184, 184);

    font-size:48px;

    cursor:pointer;

    user-select:none;

    transition:opacity .25s ease;

}

.close:hover{

    opacity:.6;

}

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:rgb(185, 184, 184);

    font-size:60px;

    cursor: grab;

    .lightbox-image:active{

    cursor: grabbing;

    }

    padding:20px;

    transition:opacity .25s ease;

}

.lightbox-prev:hover,
.lightbox-next:hover{

    opacity:.6;

}

.lightbox-prev{

    left:30px;

}

.lightbox-next{

    right:30px;

}


/* =====================================================
   SOBRE
===================================================== */

.bio {

    padding-top: 85px;

    padding-bottom: 50px;

}


/* =====================================================
   LAYOUT
===================================================== */

.bio-grid {

    display: grid;

    grid-template-columns: 43% 57%;

    column-gap: 90px;

    align-items: start;

}


/* =====================================================
   TEXTO
===================================================== */

.bio-content {

    color: #6d6d6d;

    font-size: 15px;

    line-height: 1.40;

    font-weight: 300;

    text-align: justify;

    letter-spacing:-0.01em;

}

html[lang="en"] .bio-content{

    letter-spacing: -0.02em;

}

/* primeiro bloco da biografia */

.bio-content > p:first-child {

    margin-top: 85px;

}


/* parágrafos */

.bio-content p {

    margin-bottom: 75px;

}


/* =====================================================
   SEÇÕES
===================================================== */

.bio-section {

    margin-top: 62px;


}


.bio-section h2 {

    font-size: 15px;

    font-weight: 500;

    color: #373737;

    margin-bottom: 6px;

}


.bio-section p {

    margin-bottom: 4px;

}

/* =====================================================
   EDUCAÇÃO + EXPOSIÇÕES
===================================================== */

.bio-curriculo {

    margin-top: 0;

}

.bio-curriculo + .bio-curriculo {

    margin-top: 25px;

}

.bio-curriculo h2 {

    font-size: 14px;

    font-weight: 500;

    color: #373737;

    margin-bottom: 11px;

}

.bio-curriculo p {

    margin-bottom: 4px;

    font-size: 14px;

    line-height: 1.2;

    text-align: left;

}

/* =====================================================
   FOTO
===================================================== */

.bio-image {

    margin-top: 85px;

}


.bio-image img {

    width: 100%;

    display: block;

}

/* =====================================================
   CONTATO
===================================================== */

.contact {

    padding-top: 170px;

    padding-bottom: 180px;

    text-align: left;

}


.contact-item {

    margin-bottom: 45px;

}

.contact-item h2 {

    font-size: 16px;

    font-weight: 500;

    color: #373737;

    margin-bottom: 6px;

    letter-spacing: 0.03em;

}

.contact-item a {

    font-size: 15px;

    font-weight: 300;

    color: #6d6d6d;

    text-decoration: none;

    transition: color .25s ease;

}


/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width: 1100px) {

    .bio-grid {

        grid-template-columns: 1fr;

        row-gap: 60px;

    }

    .bio-image {

        order: -1;

        margin-top: 0;

    }

    .bio-content > p:first-child {

        margin-top: 0;

    }

}

@media (max-width: 700px) {

    .bio {

        padding-top: 120px;

    }

    .bio-content {

        font-size: 17px;

    }

}


/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width:900px){

    .gallery{

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

    }

}

@media (max-width:600px){

    .gallery{

        grid-template-columns:1fr;

    }

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:1200px){

    .container{

        max-width:100%;

        padding-left:10px;

        padding-right:10px;

    }

    .header-container{

    padding-left:70px;

    padding-right:70px;

    }

    .hero{

    height: 100vh;

    background-size: 250%;

    background-position: 80% 98%;


    }   

    .gallery{

    gap:42px;

    }

    .titulo-obra{

    font-size:14px;

    }

    .tecnica,
    .dimensao,
    .ano{

    font-size:13px;

    }

    .bio-image{

    margin-top:70px;

    }

    .contact{

    padding-top:150px;

    }

}

/* =====================================================
   CELULAR
===================================================== */

@media (max-width:768px){

    .header-container{

        padding-left:25px;

        padding-right:25px;

    }

    header > nav > .header-container > a{

        font-size:17px;

    }

    nav ul{

        gap:18px;

    }

    nav ul a{

        font-size:12px;

    }

    .hero{

    height: 100vh;

    background-size: 455%;

    background-position: 57% 100%;

    }

    .gallery{

    grid-template-columns:1fr;

    gap:50px;

    }

    .obra{

    width:100%;

    }

    .titulo-obra{

    font-size:15px;

    }

    .tecnica,
    .dimensao,
    .ano{

    font-size:14px;

    }

    .bio-image{

    order:-1;

    margin-top:0;

    margin-bottom:0;

    }

    .bio-image img{

    width:120%;

    max-width:none;

    display:block;

    position:relative;

    left:50%;

    transform:translateX(-50%);

    }

    .bio-content{

    padding-top:0;

    font-size: 15px;

    }

    .bio-content > p:first-child{

    margin-top:0;

    }   

    .contact{

    padding-top:130px;

    padding-bottom:120px;

    transform: translateX(-30px);


    }

    .contact-item h2{

    font-size:15px;


    }

    .contact-item a{

    font-size:14px;

    
    }   

    .container{

    padding-left:0px;

    padding-right:0px;

    }

}