/* ==========================================================================
   PROJETO GALERIA
   ========================================================================== */

/* Estrutura geral */

.projeto-galeria {
    box-sizing: border-box;

    padding:
        clamp(150px, 15.05vw, 289px)
        0
        clamp(90px, 7vw, 135px);

    background-color: var(--cor-branco-fundo);
}

/* ==========================================================================
   HEADER — GALERIA DE PROJETOS
   ========================================================================== */

body.pagina-projetos-galeria .header {
    background-color: var(--cor-branco-fundo);
}

body.pagina-projetos-galeria .header__logo h1,
body.pagina-projetos-galeria .header__item-menu a {
    color: var(--cor-preto-fundo);
}

body.pagina-projetos-galeria .header__logo:hover h1,
body.pagina-projetos-galeria .header__item-menu a:hover {
    color: var(--cor-vermelho-destaque);
}

@media (max-width: 1000px) {
    body.pagina-projetos-galeria
    .header__menu.active
    .header__item-menu a {
        color: var(--cor-branco-fundo);
    }

    body.pagina-projetos-galeria
    .header__menu.active
    .header__item-menu a:hover {
        color: var(--cor-vermelho-destaque);
    }
}

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

.projeto-galeria__cabecalho {
    grid-column: 2 / -2;
    min-width: 0;
}

.projeto-galeria__titulo {
    width: 100%;
    margin:
        0 0
        clamp(60px, 4.2vw, 82px);

    font-family: "Dragon Angled", sans-serif;
    font-weight: 600;
    font-style: normal;

    font-size: clamp(120px, 28.79vw, 552.76px);
    line-height: 1;
    letter-spacing: 0;

    color: var(--cor-preto-fundo);

    white-space: nowrap;

    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   LISTA DE PROJETOS
   ========================================================================== */

.projeto-galeria__lista {
    grid-column: 2 / -2;

    width: 100%;
    min-width: 0;
}

/*
 * Mantemos .projeto__card para que o JavaScript já usado na home
 * consiga localizar e abrir os projetos ocultos.
 */

.projeto-galeria .projeto__card {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 820px);

    grid-template-rows:
        auto
        1fr;

    grid-template-areas:
        "nome thumb"
        "detalhes thumb";

    column-gap: clamp(60px, 6.5vw, 125px);

    width: 100%;
    min-width: 0;

    padding:
        clamp(42px, 3.33vw, 64px)
        0
        clamp(28px, 2vw, 38px);

    border-top: 1px solid #D5D5D5;

    box-sizing: border-box;

    opacity: 1;
    transform: none;
}

/* Projetos que serão revelados pelo JavaScript */

.projeto-galeria .projeto__card.hidden {
    display: none;
}

/* Compensa o header fixo ao navegar até #mais-projetos */

#mais-projetos {
    scroll-margin-top: 150px;
}

/* ==========================================================================
   NOME DO PROJETO
   ========================================================================== */

.projeto-galeria__nome {
    grid-area: nome;

    width: 100%;
    max-width: 682px;

    margin: 0;

    font-family: "Dragon Angled", sans-serif;
    font-weight: 500;
    font-style: normal;

    font-size: clamp(48px, 4.6875vw, 90px);
    line-height: 1;
    letter-spacing: 0;

    color: var(--cor-preto-fundo);

    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   THUMB
   ========================================================================== */

.projeto-galeria__thumb {
    grid-area: thumb;

    display: block;

    width: 100%;
    max-width: 820px;
    aspect-ratio: 820 / 503;

    overflow: hidden;

    background-color: #D5D5D5;
}

.projeto-galeria__thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.projeto-galeria__thumb:hover img {
    transform: scale(1.015);
}

/* ==========================================================================
   CTA DE CADA PROJETO
   ========================================================================== */

.projeto-galeria__detalhes {
    grid-area: detalhes;

    align-self: end;
    justify-self: start;

    display: inline-flex;
    align-items: center;
    gap: clamp(14px, 1.5vw, 29px);

    width: fit-content;

    font-family: "Dragon", sans-serif;
    font-weight: 600;
    font-style: normal;

    font-size: clamp(18px, 1.406vw, 27px);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: var(--cor-preto-fundo);
    text-decoration: none;

    transition: color 0.3s ease;

    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.projeto-galeria__detalhes-seta {
    display: block;
    flex: 0 0 auto;

    width: clamp(15px, 1.04vw, 20px);
    height: auto;

    object-fit: contain;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.projeto-galeria__detalhes:hover {
    color: var(--cor-vermelho-destaque);
}

.projeto-galeria__detalhes:hover .projeto-galeria__detalhes-seta {
    transform: translateX(6px);

    filter:
        brightness(0)
        saturate(100%)
        invert(28%)
        sepia(99%)
        saturate(5175%)
        hue-rotate(354deg)
        brightness(106%)
        contrast(102%);
}

/* ==========================================================================
   CTA FINAL: VER MAIS PROJETOS
   ========================================================================== */

.projeto-galeria .projetos__botao {
    grid-column: 2 / -2;

    display: block;
    width: 100%;

    margin: 0;
    padding:
        clamp(42px, 3vw, 58px)
        0
        0;

    border-top: 1px solid #D5D5D5;
}

.projeto-galeria .projetos__button {
    display: inline-flex;
    align-items: center;
    gap: clamp(24px, 2vw, 40px);

    width: fit-content;
    max-width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;

    font-family: "Dragon Angled", sans-serif;
    font-weight: 600;
    font-style: normal;

    font-size: clamp(28px, 2.5vw, 48px);
    line-height: 1;
    letter-spacing: 0.025em;

    color: var(--cor-preto-fundo);
    text-decoration: none;
    white-space: nowrap;

    transition: color 0.3s ease;

    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.projeto-galeria .projetos__seta {
    display: block;
    flex-shrink: 0;

    width: clamp(25px, 1.82vw, 35px);
    height: auto;

    object-fit: contain;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.projeto-galeria .projetos__button:hover {
    color: var(--cor-vermelho-destaque);
}

.projeto-galeria .projetos__button:hover .projetos__seta {
    transform: translateX(8px);

    filter:
        brightness(0)
        saturate(100%)
        invert(28%)
        sepia(99%)
        saturate(5175%)
        hue-rotate(354deg)
        brightness(106%)
        contrast(102%);
}

/* ==========================================================================
   NOTEBOOK
   ========================================================================== */

@media (min-width: 1001px) and (max-width: 1440px) {
    .projeto-galeria {
        padding:
            clamp(175px, 15vw, 215px)
            0
            100px;
    }

    .projeto-galeria__titulo {
        margin-bottom: 55px;

        font-size: clamp(250px, 28.5vw, 410px);
    }

    .projeto-galeria .projeto__card {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 55%);

        column-gap: clamp(45px, 5vw, 72px);

        padding: 45px 0 32px;
    }

    .projeto-galeria__nome {
        font-size: clamp(52px, 5vw, 72px);
    }

    .projeto-galeria__detalhes {
        font-size: clamp(18px, 1.5vw, 22px);
    }
}

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

@media (max-width: 1000px) {
    .projeto-galeria {
        padding:
            150px
            0
            85px;
    }

    .projeto-galeria__titulo {
        margin-bottom: 48px;

        font-size: clamp(130px, 28vw, 250px);
    }

    .projeto-galeria .projeto__card {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "nome"
            "thumb"
            "detalhes";

        row-gap: 28px;
        column-gap: 0;

        padding: 42px 0;
    }

    .projeto-galeria__nome {
        max-width: 100%;

        font-size: clamp(48px, 8vw, 72px);
    }

    .projeto-galeria__thumb {
        max-width: 100%;
    }

    .projeto-galeria__detalhes {
        margin-top: 4px;
    }
}

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

@media (max-width: 700px) {
    .projeto-galeria {
        padding:
            120px
            0
            70px;
    }

    .projeto-galeria__titulo {
        margin-bottom: 36px;

        font-size: clamp(84px, 25vw, 150px);
        white-space: normal;
    }

    .projeto-galeria .projeto__card {
        row-gap: 22px;

        padding: 32px 0;
    }

    .projeto-galeria__nome {
        font-size: clamp(44px, 13vw, 60px);
        line-height: 0.95;
    }

    .projeto-galeria__detalhes {
        gap: 16px;

        font-size: clamp(17px, 5.5vw, 22px);
    }

    .projeto-galeria__detalhes-seta {
        width: 17px;
    }

    .projeto-galeria .projetos__botao {
        padding-top: 38px;
    }

    .projeto-galeria .projetos__button {
        align-items: flex-start;
        gap: 18px;

        font-size: clamp(28px, 8vw, 36px);
        white-space: normal;
    }

    .projeto-galeria .projetos__seta {
        width: 28px;
    }
}

/* ==========================================================================
   HEADER — PÁGINA GALERIA
   ========================================================================== */

body:has(.projeto-galeria) .header {
    background-color: var(--cor-branco-fundo) !important;
}

body:has(.projeto-galeria) .header__logo h1,
body:has(.projeto-galeria) .header__item-menu a {
    color: #202020 !important;
}

body:has(.projeto-galeria) .header__logo:hover h1,
body:has(.projeto-galeria) .header__item-menu a:hover {
    color: var(--cor-vermelho-destaque) !important;
}

@media (max-width: 1000px) {
    body:has(.projeto-galeria)
    .header__menu.active
    .header__item-menu a {
        color: var(--cor-branco-fundo) !important;
    }

    body:has(.projeto-galeria)
    .header__menu.active
    .header__item-menu a:hover {
        color: var(--cor-vermelho-destaque) !important;
    }
}