/* Barsan: estilos só da página de obras (o portfólio), carregados depois do
 * site.css (que tem os tokens). Filtro por categoria na cabeça grafite e uma
 * obra embaixo da outra, com a galeria das fotos de um lado e o texto do
 * outro. A foto ampliada abre no zoom, por cima da página. */

/* Filtro ------------------------------------------------------------------ */

/* Mesmo desenho dos atalhos da página de serviços, mas sem ficar preso no
 * topo: são poucas categorias, e elas quebram linha em vez de rolar. */
.filtro {
    margin-top: 1.75rem;
}

.filtro__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filtro__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--linha-sobre-escuro);
    color: var(--branco);
    font-size: var(--texto-p);
    font-weight: 500;
    text-decoration: none;
}

.filtro__link:hover {
    border-color: var(--laranja);
}

/* Categoria escolhida: chapa branca com texto grafite. */
.filtro__link[aria-current="page"] {
    border-color: var(--branco);
    background: var(--branco);
    color: var(--grafite);
}

/* Obras ------------------------------------------------------------------- */

.portfolio__obra + .portfolio__obra {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--linha);
}

/* Colunas com mínimo zero: sem isso, a faixa de miniaturas alargaria a
 * coluna em vez de rolar de lado. */
.trabalho {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    scroll-margin-top: 2.5rem;
}

/* Obra aberta por um link da Home (/obras#obra-<id>): para com folga no topo
 * (o scroll-margin acima) e aparece sobre o laranja da marca, que passa da
 * borda da obra e some depois de alguns segundos. Mostra qual foi a clicada
 * sem mexer no texto. */
.trabalho:target::before {
    content: "";
    position: absolute;
    inset: -1.5rem calc(var(--margem) * -1);
    z-index: -1;
    background: var(--laranja);
    animation: chegada 0.3s ease-out 1.5s forwards;
}

@keyframes chegada {
    to {
        opacity: 0;
    }
}

/* No laranja só o grafite tem contraste (5,3:1; o cinza ficaria com 2,3:1 e
 * o cobre com 2,0:1), como na faixa laranja da chamada: rótulos, link e
 * linhas da ficha ficam grafite enquanto o fundo está lá e voltam às cores
 * deles junto com o fundo sumindo (a animação sem "to" volta para a cor
 * normal de cada um). A moldura da miniatura continua cobre: ela fica por
 * cima da foto, e numa foto escura o grafite sumiria. */
.trabalho:target .ficha__rotulo,
.trabalho:target .link {
    animation: chegada-texto 0.3s ease-out 1.5s both;
}

.trabalho:target .ficha,
.trabalho:target .ficha__linha {
    animation: chegada-linha 0.3s ease-out 1.5s both;
}

@keyframes chegada-texto {
    from {
        color: var(--grafite);
    }
}

@keyframes chegada-linha {
    from {
        border-color: var(--grafite);
    }
}

/* Título na letra larga e fina do logotipo, como os títulos de seção. */
.trabalho__titulo {
    font-size: var(--texto-g);
    font-stretch: var(--larga);
    font-weight: 300;
    line-height: 1.1;
}

/* Os dados da obra vêm na .ficha (site.css), como os da placa. */
.trabalho__descricao {
    margin-top: 1.5rem;
}

.trabalho__acao {
    margin-top: 1.5rem;
}

@media (min-width: 60em) {
    .portfolio__obra + .portfolio__obra {
        margin-top: 4.5rem;
        padding-top: 4.5rem;
    }

    .trabalho {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
        gap: 3rem;
    }

    /* Texto longo: as fotos ficam na tela enquanto se lê. */
    .trabalho__fotos {
        position: sticky;
        top: 1.5rem;
    }
}

/* Galeria ----------------------------------------------------------------- */

/* As fotos da obra numa fila, uma por vez: arrastar com o dedo (ou com o
 * trackpad) passa para a próxima, e o scroll-snap para cada uma no lugar.
 * Isso funciona sem JavaScript; o galeria.js põe as setas, o contador e o
 * zoom. */
.galeria__palco {
    position: relative;
}

.galeria__trilho {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.galeria__trilho::-webkit-scrollbar {
    display: none;
}

.galeria__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.galeria__ampliar {
    display: block;
    cursor: zoom-in;
}

.galeria__foto {
    aspect-ratio: 3 / 2;
}

/* Setas e contador no canto de baixo da foto, numa chapa grafite como a
 * placa. */
.galeria__controles {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: var(--grafite);
    color: var(--branco);
    --foco: var(--laranja);
}

.galeria__contador {
    min-width: 4.5em;
    font-size: var(--texto-p);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Seta: da galeria e do zoom. */
.seta {
    display: inline-grid;
    place-content: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.seta:hover {
    background: var(--grafite-claro);
}

.icone {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
}

/* Miniaturas numa faixa só, que rola de lado quando não cabem: com muitas
 * fotos, uma grade viraria um bloco enorme no celular. Levam até cada foto.
 * A da foto que está na tela ganha a moldura cobre (o laranja não teria 3:1
 * contra o fundo), desenhada por cima da foto para a faixa não cortar. */
.galeria__miniaturas {
    position: relative;
    display: grid;
    grid-auto-columns: 4.5rem;
    grid-auto-flow: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.galeria__miniatura {
    position: relative;
    display: block;
}

.galeria__miniatura-foto {
    aspect-ratio: 1;
}

.galeria__miniatura[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--cobre);
}

/* O foco do teclado fica por dentro, para a faixa não cortar o contorno. */
.galeria__miniatura:focus-visible {
    outline-offset: -3px;
}

/* Zoom -------------------------------------------------------------------- */

/* A foto grande por cima da página, na chapa grafite, em vez de sair do site
 * para o arquivo da imagem. Fecha pelo botão, pelo Esc e clicando fora da
 * foto. */
.zoom {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0 0 var(--margem);
    border: 0;
    background: var(--grafite);
    color: var(--branco);
    --foco: var(--laranja);
}

.zoom[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

/* A página atrás não rola enquanto o zoom está aberto. */
.zoom-aberto {
    overflow: hidden;
}

.zoom__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem var(--margem);
}

.zoom__legenda {
    color: var(--texto-sobre-escuro);
    font-size: var(--texto-p);
}

.zoom__palco {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-inline: var(--margem);
}

.zoom__foto {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.zoom__seta {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    background: var(--grafite);
    transform: translateY(-50%);
}

.zoom__seta--anterior {
    left: var(--margem);
}

.zoom__seta--proxima {
    right: var(--margem);
}