/* =========================================================
   SEÇÃO 6 — PROJETOS
   ========================================================= */

.secao-projetos {
    background: #081725;
    padding: 120px 0;
}

.projetos-topo {
    max-width: 1040px;
    margin: 0 auto 80px;
    text-align: center;
}

.projetos-titulo span {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 40px;
    background: linear-gradient(92.93deg,#FFD859,#C9932E,#915A1B,#E9BC48);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.projetos-subtitulo {
    margin-top: 16px;
    font-size: 22px;
    color: #fff;
}

.projetos-galeria {
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 413px 412px 413px;
    gap: 24px;
}

.coluna {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.coluna.grande {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.projeto-card {
    position: relative;
    overflow: hidden;
}

.projeto-img {
    width: 100%;
    min-height: 346px;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}


/* =========================================================
   CONTROLE DE TAMANHO POR POSIÇÃO (FIGMA-BASED)
   ========================================================= */

/* Card alto da esquerda */
.projeto-card.pos-1 .projeto-img {
    min-height: 711px;
}

/* Cards médios */
.projeto-card.pos-2 .projeto-img,
.projeto-card.pos-3 .projeto-img,
.projeto-card.pos-4 .projeto-img,
.projeto-card.pos-5 .projeto-img,
.projeto-card.pos-7 .projeto-img,
.projeto-card.pos-8 .projeto-img {
    min-height: 346px;
}

/* CARD GRANDE — OCUPA DUAS COLUNAS */
.projeto-card.pos-6 {
    margin-top: -87%;
    grid-column: 2 / span 2;
    grid-row: 2 / span 2; /* ajuste fino se quiser */
}

.projeto-card.pos-6 .projeto-img {
    align-self: start;
    min-height: 711px; /* ou 718px se quiser 100% Figma */
}




.projeto-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(8,23,37,0) 0%,
        #081725 100%
    );
}

.projeto-legenda {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 2;

    font-size: 22px;
    color: #fff;
    padding-left: 12px;
    border-left: 2px solid #D9D9D9;
}

.projeto-card:hover .projeto-img {
    transform: scale(1.03);
}


.img-1 { background-image: url("/static/siteapp/img/projetos/sala-pe-direito.jpeg"); }
.img-2 { background-image: url("/static/siteapp/img/projetos/sala-integrada.jpeg"); }
.img-3 { background-image: url("/static/siteapp/img/projetos/area-funcional.jpeg");  }
.img-4 { background-image: url("/static/siteapp/img/projetos/banheiro-marmore-claro.jpeg"); }
.img-5 { background-image: url("/static/siteapp/img/projetos/banheiro-revestimento-escuro.jpeg"); }
.img-6 { background-image: url("/static/siteapp/img/projetos/fachada-principal.png");}
.img-7 { background-image: url("/static/siteapp/img/projetos/cozinha-integrada.jpeg"); }
.img-8 { background-image: url("/static/siteapp/img/projetos/quarto-principal.jpeg"); }
.img-9 { background-image: url("/static/siteapp/img/projetos/circulacao-iluminacao.jpeg"); }

@media (max-width: 1024px) {

    .projetos-galeria {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 0 32px;
    }

    .projeto-card {
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
    }

    .projeto-img {
        min-height: 320px;
    }

    .coluna,
    .coluna.grande {
        display: contents;
    }
}


@media (max-width: 768px) {

    .secao-projetos{
        padding: 0;
    }

    .projetos-topo{
        padding: 0 5%;
        text-align: left;
    }

    .projetos-galeria {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-width: 100%;
        padding: 0 16px;
    }

    /* ignora qualquer grid ou posicionamento */
    .projeto-card {
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
    }

    /* todos viram cards normais */
    .projeto-img {
        min-height: 220px !important;
        width: 100%;
    }

    /* remove efeitos de “card grande” */
    .projeto-card.pos-6 .projeto-img {
        min-height: 220px !important;
    }

    /* remove colunas do fluxo */
    .coluna,
    .coluna.grande {
        display: contents;
    }

    /* legenda ajustada */
    .projeto-legenda {
        font-size: 18px;
        bottom: 16px;
        left: 16px;
    }

    .hero-faixa-final {
        margin:0;
    }

    .hero-faixa-texto {
        text-align: center;
    }
}