/* ===================================================
   PROJETOS
=================================================== */

.projects{

    background: var(--black);
    
    scroll-margin-top: 110px;
    
    padding: 65px 0 45px;

}


/* ===================================================
   TAG DA SEÇÃO
=================================================== */

.projects .section-tag{

    display:inline-block;

    color:var(--gold);

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:22px;

}

.projects .section-tag::after{

    content:'';

    display:block;

    width:60px;

    height:2px;

    margin-top:14px;

    background:var(--gold);

}


/* ===================================================
   TÍTULO
=================================================== */

.projects h2{

    font-size:clamp(56px,5vw,70px);

    line-height:1.08;

    color:#fff;

    max-width:650px;

    margin:18px 0 28px;

}

.projects h2 span{

    color:var(--gold);

}


/* ===================================================
   DESCRIÇÃO
=================================================== */

.projects .section-description{

    max-width:720px;

    color:rgba(255,255,255,.75);

    font-size:18px;

    line-height:1.8;

    margin-bottom:55px;

}

.projects .section-description strong,
.projects .section-description span{

    color:var(--gold);

    font-weight:600;

}


/* ===================================================
   GRID
=================================================== */

.projects-grid{

    display:grid;

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

    gap:30px;

    margin-top:0;

}


/* ===================================================
   CARD
=================================================== */

.project-card{

    overflow:hidden;

    border-radius:18px;

    border:1px solid rgba(212,168,71,.18);

    background:#0d0d0d;

    transition:
        transform .35s,
        border-color .35s,
        box-shadow .35s;

}

.project-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

    box-shadow:0 18px 40px rgba(212,168,71,.18);

}


/* ===================================================
   FIGURE / IMAGEM
=================================================== */

.project-card figure{

    position:relative;

    overflow:hidden;

    margin:0;

}

.project-card img{

    display:block;

    width:100%;

    height:340px;

    object-fit:cover;

    transition:transform .6s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}


/* ===================================================
   OVERLAY ESCURO
=================================================== */

.project-card figure::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.05) 100%
    );

    z-index:1;

}


/* ===================================================
   CONTEÚDO DO CARD
=================================================== */

.project-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:28px;

    z-index:2;

}

.project-overlay h3{

    color:#fff;

    font-size:23px;

    line-height:1.25;

    margin-bottom:10px;

}

.project-overlay p{

    color:rgba(255,255,255,.82);

    font-size:15px;

    line-height:1.6;

    margin-bottom:10px;

}

.project-overlay span{

    color:var(--gold);

    font-size:14px;

    font-weight:600;

}


/* ===================================================
   RESPONSIVO - TABLET GRANDE
=================================================== */

@media(max-width:1200px){

    .projects-grid{

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

    }

}


/* ===================================================
   RESPONSIVO - TABLET
=================================================== */

@media(max-width:992px){

    .projects{

        padding:65px 0 70px;

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

}


/* ===================================================
   RESPONSIVO - MOBILE
=================================================== */

@media(max-width:768px){

    .projects{

        padding:55px 0 60px;

    }

    .projects h2{

        font-size:42px;

    }

    .projects .section-description{

        font-size:17px;

        line-height:1.7;

        margin-bottom:40px;

    }

    .projects-grid{

        gap:22px;

    }

    .project-card img{

        height:260px;

    }

    .project-overlay{

        padding:22px;

    }

    .project-overlay h3{

        font-size:21px;

    }

}


/* ===================================================
   RESPONSIVO - MOBILE PEQUENO
=================================================== */

@media(max-width:480px){

    .projects h2{

        font-size:38px;

    }

    .projects .section-tag{

        font-size:12px;

        letter-spacing:3px;

    }

    .project-card{

        border-radius:14px;

    }

    .project-card img{

        height:240px;

    }

    .project-overlay{

        padding:20px;

    }

    .project-overlay h3{

        font-size:20px;

    }

    .project-overlay p{

        font-size:14px;

    }

    .project-overlay span{

        font-size:13px;

    }

}