/* =========================================================================
   Lunettic — componentes de pagina
   =========================================================================
   Carrega depois de site.css. Aqui vive o que e especifico de uma pagina ou
   de um punhado delas; site.css guarda o casco (reset, header, rodape).
   ========================================================================= */


/* =========================================================================
   TOPO DE PAGINA INTERNA
   Mesmo par headline + paragrafo do hero da home, em escala menor.
   ========================================================================= */

.pagina-topo {
    padding-block: var(--e-secao) var(--e-6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-4);
}

.pagina-topo__titulo {
    font-size: var(--t-2xl);
    color: var(--rosa);
    max-width: 18ch;
}

.pagina-topo__texto {
    font-size: var(--t-md);
    color: var(--texto-suave);
    max-width: 52ch;
}

@media (min-width: 900px) {
    .pagina-topo {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--e-8);
        align-items: end;
    }
}


/* =========================================================================
   BLOCO ALTERNADO (Sobre)
   Arte de um lado, texto do outro; inverte a cada bloco.
   ========================================================================= */

.bloco {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-5);
    padding-block: var(--e-7);
    border-top: 1px solid var(--borda);
    align-items: center;
}

.bloco__arte { margin: 0; }

.bloco__arte img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bloco__titulo {
    font-size: var(--t-xl);
    margin-bottom: var(--e-3);
}

.bloco__texto p {
    font-size: var(--t-base);
    color: var(--texto-suave);
    max-width: 46ch;
}

@media (min-width: 900px) {
    .bloco { grid-template-columns: 1fr 1fr; gap: var(--e-8); }

    /* Inverte a ordem nos blocos pares — o zigue-zague evita a pagina virar
       uma coluna de cards iguais. */
    .bloco:nth-of-type(even) .bloco__arte  { order: 2; }
    .bloco:nth-of-type(even) .bloco__texto { order: 1; }
}


/* =========================================================================
   LOOKBOOK
   Grid de key visuals. Sem borda, sem raio, sem sombra: o mockup separa por
   espaco em branco. As artes tem proporcao ligeiramente diferente entre si,
   entao aspect-ratio + object-fit alinha o grid sem deformar nada.
   ========================================================================= */

.lookbook {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-4);
    padding-bottom: var(--e-6);
}

.lookbook__item { margin: 0; }

.lookbook__item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.lookbook__item a {
    display: block;
    transition: opacity var(--transicao);
}

.lookbook__item a:hover,
.lookbook__item a:focus-visible { opacity: 0.82; }

@media (min-width: 720px) {
    .lookbook { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
    /* A ponte da loja usa tres destaques: three-up ja em tela media. */
    .lookbook--tres { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
    .lookbook { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================================
   BLOG — indice
   ========================================================================= */

.posts {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--borda);
}

.posts__item {
    padding-block: var(--e-5);
    border-bottom: 1px solid var(--borda);
}

.posts__data {
    display: block;
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin-bottom: var(--e-2);
    font-variant-numeric: tabular-nums;
}

.posts__titulo {
    font-size: var(--t-xl);
    margin-bottom: var(--e-2);
    max-width: 26ch;
}

.posts__titulo a { transition: color var(--transicao); }

.posts__titulo a:hover,
.posts__titulo a:focus-visible { color: var(--rosa); }

.posts__resumo {
    font-size: var(--t-base);
    color: var(--texto-suave);
    max-width: var(--largura-texto);
}

.vazio {
    padding-block: var(--e-7);
    font-size: var(--t-md);
    color: var(--texto-fraco);
}


/* =========================================================================
   BLOG — post
   Coluna de leitura estreita: texto corrido quer ~68 caracteres por linha,
   nao a largura de 1600px do resto do site.
   ========================================================================= */

.post { padding-block: var(--e-secao); }

.post__topo {
    max-width: var(--largura-texto);
    margin-bottom: var(--e-6);
}

.post__data {
    display: block;
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin-bottom: var(--e-3);
    font-variant-numeric: tabular-nums;
}

.post__titulo {
    font-size: var(--t-2xl);
    margin-bottom: var(--e-4);
}

.post__resumo {
    font-size: var(--t-md);
    color: var(--texto-suave);
}

.post__capa { margin: 0 0 var(--e-6); }

.post__capa img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.post__corpo {
    max-width: var(--largura-texto);
    font-size: var(--t-base);
    color: var(--texto-suave);
}

.post__corpo p { margin-bottom: var(--e-4); }

.post__corpo h2 {
    font-size: var(--t-lg);
    color: var(--texto);
    margin-block: var(--e-6) var(--e-3);
}

.post__corpo a {
    color: var(--texto);
    text-decoration: underline;
    text-decoration-color: var(--rosa);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.post__voltar {
    margin-top: var(--e-7);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
    font-size: var(--t-sm);
}

.post__voltar a { transition: color var(--transicao); }
.post__voltar a:hover,
.post__voltar a:focus-visible { color: var(--rosa); }


/* =========================================================================
   DESVIO PARA A LOJA (Contato)
   Intercepta duvida de pedido antes do formulario — status e troca se
   resolvem na vitrine, nao aqui.
   ========================================================================= */

.desvio {
    padding: var(--e-5);
    border: 1px solid var(--preto);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-3);
    margin-bottom: var(--e-7);
}

.desvio__titulo { font-size: var(--t-lg); }

.desvio__texto {
    font-size: var(--t-sm);
    color: var(--texto-suave);
    max-width: 56ch;
}


/* =========================================================================
   FORMULARIO GENERICO (Contato)
   Os campos base vivem em site.css; aqui so o textarea e o grid largo.
   ========================================================================= */

.formulario {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-4);
    max-width: 720px;
}

.campo textarea {
    font: inherit;
    font-size: var(--t-base);
    color: var(--texto);
    background: var(--branco);
    border: 1px solid var(--preto);
    border-radius: var(--raio);
    padding: var(--e-3);
    resize: vertical;
    transition: border-color var(--transicao);
}

.campo textarea:hover { border-color: var(--rosa); }

.campo textarea:focus-visible {
    border-color: var(--rosa);
    outline: 2px solid var(--rosa);
    outline-offset: 1px;
}

@media (min-width: 720px) {
    .formulario { grid-template-columns: repeat(2, 1fr); }
    .campo--largo,
    .formulario > .botao { grid-column: 1 / -1; }
}


/* =========================================================================
   FECHO DE PAGINA
   Frase curta + uma acao. Fecha Sobre, Colecoes e a ponte da Loja.
   ========================================================================= */

.fecho {
    padding-block: var(--e-7) var(--e-secao);
    border-top: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-4);
}

.fecho__frase {
    font-size: var(--t-lg);
    color: var(--texto-suave);
    max-width: 40ch;
}


/* =========================================================================
   BOTAO VAZADO
   Acao secundaria — o desvio de pedido nao deve competir visualmente com o
   envio do formulario.
   ========================================================================= */

.botao--vazado {
    background: transparent;
    color: var(--preto);
}

.botao--vazado:hover,
.botao--vazado:focus-visible {
    background: var(--preto);
    border-color: var(--preto);
    color: var(--branco);
}


/* =========================================================================
   DOCUMENTO
   As cinco paginas institucionais do rodape. Coluna de leitura estreita e
   secoes separadas por filete — sao textos que a pessoa le procurando uma
   resposta especifica, nao do inicio ao fim.
   ========================================================================= */

.documento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-3);
    padding-block: var(--e-6);
    border-top: 1px solid var(--borda);
}

.documento__titulo {
    font-size: var(--t-lg);
    max-width: 20ch;
}

.documento__texto {
    font-size: var(--t-base);
    color: var(--texto-suave);
    max-width: var(--largura-texto);
}

.documento__data {
    padding-block: var(--e-5) var(--e-secao);
    font-size: var(--t-xs);
    color: var(--texto-fraco);
}

@media (min-width: 900px) {
    .documento {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
        gap: var(--e-8);
    }
}