/* Barsan: estilos só da Home, carregados depois do site.css (que tem os
 * tokens e a placa). A abertura com a placa de obra e a grade das obras
 * executadas. */

/* Abertura e placa -------------------------------------------------------- */

/* A placa (site.css) plantada na frente da foto. Ela sobe por cima da borda
 * de baixo da foto (margem negativa), sem posição absoluta, para crescer com
 * o texto sem vazar. */
.abertura__foto {
    aspect-ratio: 3 / 2;
}

.placa--abertura {
    position: relative;
    max-width: 38rem;
    margin-top: -2.5rem;
}

@media (min-width: 40em) {
    .abertura__foto {
        aspect-ratio: 16 / 9;
    }

    .placa--abertura {
        margin-top: -6rem;
    }
}

@media (min-width: 60em) {
    .abertura__foto {
        height: clamp(28rem, 72vh, 46rem);
        aspect-ratio: auto;
    }

    .placa--abertura {
        margin-top: -15rem;
    }
}

/* Os serviços da placa, um por linha, com o nome na letra larga como os
 * nomes dos serviços logo abaixo. Traço laranja no lugar da bolinha, como
 * marcação de desenho técnico. */
.placa__servicos {
    display: grid;
    gap: 0.375rem;
    margin-top: 1rem;
}

.placa__servico {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--texto-m);
    font-stretch: var(--larga);
    font-weight: 500;
    line-height: 1.25;
}

.placa__servico::before {
    content: "";
    position: absolute;
    top: 0.625em;
    left: 0;
    width: 0.75rem;
    height: 2px;
    background: var(--laranja);
}

/* O único movimento que acontece sozinho: a placa entra uma vez. */
@media (prefers-reduced-motion: no-preference) {
    .placa--abertura {
        animation: placa-entra 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
    }
}

@keyframes placa-entra {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
}

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

/* Obras executadas, até três: no tablet a primeira ocupa a linha inteira; no
 * computador ela fica à esquerda, da altura das outras duas empilhadas. Com
 * só uma ou duas obras no site (obras--1, obras--2), a grade se ajusta para
 * não sobrar buraco. */
.obras {
    display: grid;
    gap: 2.5rem 1.5rem;
}

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

.obra__capa {
    position: relative;
}

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

/* Serviço numa plaquinha grafite no canto da foto, como as setas da galeria
 * na página de obras. Fica laranja quando o mouse passa pela obra. */
.obra__servico {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.25rem 0.625rem;
    background: var(--grafite);
    color: var(--branco);
    font-size: var(--texto-p);
    font-weight: 600;
}

.obra:hover .obra__servico {
    background: var(--laranja);
    color: var(--grafite);
}

/* Nome na letra larga, como os nomes dos serviços logo acima. */
.obra__titulo {
    margin-top: 1rem;
    font-size: var(--texto-m);
    font-stretch: var(--larga);
    font-weight: 500;
    line-height: 1.3;
}

/* A obra inteira (foto, nome e dados) leva para ela na página de obras: o
 * link do nome se estende sobre tudo, e o foco do teclado contorna tudo. */
.obra__link {
    text-decoration: none;
}

.obra__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.obra__link:focus-visible {
    outline: none;
}

.obra__link:focus-visible::after {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
}

.obra:hover .obra__link {
    color: var(--cobre);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.obra__info {
    color: var(--cinza);
    font-size: var(--texto-p);
}

.obra__titulo + .obra__info {
    margin-top: 0.25rem;
}

@media (min-width: 40em) {
    .obras {
        grid-template-columns: 1fr 1fr;
    }

    .obras--1 {
        grid-template-columns: 1fr;
    }

    .obra--destaque {
        grid-column: 1 / -1;
    }

    .obras--2 .obra--destaque {
        grid-column: auto;
    }

    .obras--1 .obra__foto {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 60em) {
    .obras--3 {
        grid-template-columns: 7fr 5fr;
    }

    .obras--3 .obra--destaque {
        grid-column: 1;
        grid-row: span 2;
    }

    /* A foto da primeira estica até a altura das outras duas. */
    .obras--3 .obra--destaque .obra__capa {
        display: flex;
        flex: 1 1 0;
        min-height: 16rem;
    }

    .obras--3 .obra__foto--destaque {
        aspect-ratio: auto;
    }

    .obras--1 .obra__foto {
        aspect-ratio: 2 / 1;
    }
}