/* ==========================================================================
   artigos.css — peças PÚBLICAS das publicações da Duae.

   Escopos:
   1. Bloco "Artigos & insights" na landing (fundo preto) — cards, "Ver mais",
      paginação.
   2. Topo das páginas de artigo (preto, continuidade da marca).
   3. Índice `/artigos/` (fundo preto) — filtros por categoria, estado vazio.
   4. Moldura da página de leitura (fundo CLARO) — hero, capa, fecho,
      relacionados. A tipografia do CORPO mora em `leitura.css` (fonte única
      compartilhada com o canvas do editor).

   Depende dos tokens `--duae-*` e do vocabulário público (`.lp-eyebrow`,
   `.lp-cta`, `.lp-divisor`, `.lp-secao__titulo`) declarados no `landing.css`,
   que é carregado ANTES desta folha em toda página pública.
   ========================================================================== */

/* ==========================================================================
   1 · Bloco de artigos na landing
   ========================================================================== */
.lp-artigos {
    padding: clamp(3.5rem, 7vw, 5.5rem) var(--lp-respiro-x) clamp(4rem, 8vw, 6rem);
    background-color: var(--duae-preto);
}

.lp-artigos__grade {
    max-width: var(--lp-largura-max);
    margin: 0 auto;
}

.lp-artigos__cabeca {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.75rem;
}

.lp-artigos__sub {
    max-width: 26rem;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--duae-branco) 60%, transparent);
}

/* Grade de 3 colunas — a 2ª linha (cards 4–6) entra com o "Ver mais artigos". */
.lp-artigos__cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0;
    margin: 0;
}

/* ── Card ── */
.lp-card {
    display: flex;
    border: 1px solid color-mix(in srgb, var(--duae-ouro) 40%, transparent);
    background-color: color-mix(in srgb, var(--duae-branco) 3%, transparent);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.lp-card:hover {
    border-color: var(--duae-ouro);
    transform: translateY(-5px);
}

/* O card inteiro é o link (alvo de clique generoso); o "Ler artigo" é o
   sinal visual, não um segundo alvo concorrente. */
.lp-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.lp-card__capa {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--duae-ouro) 40%, transparent);
}

.lp-card__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.lp-card:hover .lp-card__capa img {
    transform: scale(1.04);
}

/* Sem capa: campo de marrom com o losango da marca (nunca um buraco cinza). */
.lp-card__capa-vazia {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1d1510 0%, #43301f 55%, #2a1e15 100%);
}

.lp-card__capa-vazia::after {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--duae-ouro) 70%, transparent);
    transform: rotate(45deg);
}

.lp-card__corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem 1.6rem 1.6rem;
}

.lp-card__tag {
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--duae-ouro);
    margin-bottom: 0.8rem;
}

.lp-card__titulo {
    font-family: var(--duae-serif);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--duae-branco);
    margin-bottom: 0.7rem;
}

.lp-card__resumo {
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--duae-branco) 62%, transparent);
    margin-bottom: 1.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-card__pe {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--duae-ouro) 22%, transparent);
}

.lp-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--duae-branco) 45%, transparent);
    white-space: nowrap;
}

/* Engajamento no card (olho/coração) — mesmo tom rebaixado do meta; o card
   não ganha cor nova, só informação. Zeros nem renderizam (template). */
.lp-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.lp-card__stat svg {
    display: block;
}

.lp-card__ler {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--duae-ouro);
    white-space: nowrap;
    transition: gap 0.25s ease;
}

.lp-card__ler::after {
    content: '\2192'; /* seta para a direita */
    font-weight: 300;
}

.lp-card__link:hover .lp-card__ler {
    gap: 0.85rem;
}

/* ── "Ver mais artigos": revela a 2ª linha de cards ──
   O estado escondido depende do JS ter assumido a seção (.js-artigos). Sem
   JS, os 6 cards aparecem de uma vez — degradação honesta, nada some. */
.js-artigos .lp-artigos__cards .lp-card.is-extra {
    display: none;
}

.js-artigos.is-expandido .lp-artigos__cards .lp-card.is-extra {
    display: flex;
}

.lp-artigos__acoes {
    display: flex;
    justify-content: center;
    margin-top: 2.75rem;
}

/* Link sublinhado discreto — não compete com os CTAs de ouro da página. */
.lp-vermais {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    font-family: var(--duae-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--duae-ouro);
    background: none;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--duae-ouro) 45%, transparent);
    cursor: pointer;
    transition: border-color 0.25s ease;
}

.lp-vermais:hover,
.lp-vermais:focus-visible {
    border-bottom-color: var(--duae-ouro);
}

/* Sem JS o botão não expande nada — então ele nem aparece (os 6 cards já
   estão visíveis e a paginação leva ao índice). O link "Ver todos os
   artigos" (`.lp-vermais--link`) é uma âncora comum e continua valendo. */
button.lp-vermais {
    display: none;
}

.js-artigos button.lp-vermais {
    display: inline-flex;
}

.lp-vermais__seta {
    font-weight: 300;
    transition: transform 0.3s ease;
}

.is-expandido .lp-vermais__seta {
    transform: rotate(180deg);
}

/* ── Paginação (só aparece com a seção expandida) ── */
.lp-paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

.js-artigos .lp-paginacao {
    display: none;
}

.js-artigos.is-expandido .lp-paginacao {
    display: flex;
}

.lp-paginacao a,
.lp-paginacao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--duae-branco-suave);
    border: 1px solid color-mix(in srgb, var(--duae-ouro) 35%, transparent);
    transition: border-color 0.25s ease, color 0.25s ease;
}

.lp-paginacao a:hover,
.lp-paginacao a:focus-visible {
    border-color: var(--duae-ouro);
    color: var(--duae-ouro);
}

.lp-paginacao .is-atual {
    background-color: var(--duae-ouro);
    border-color: var(--duae-ouro);
    color: var(--duae-preto);
    font-weight: 500;
}

.lp-paginacao .lp-paginacao__st {
    border-color: transparent;
    color: color-mix(in srgb, var(--duae-branco) 45%, transparent);
}

/* Estado de carregamento da troca de página (JS) — o leitor vê que algo anda. */
.lp-artigos__grade.is-carregando {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   2 · Topo das páginas de artigo (preto, em qualquer tema da página)
   ========================================================================== */
.art-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem var(--lp-respiro-x);
    background-color: var(--duae-preto);
    border-bottom: 1px solid color-mix(in srgb, var(--duae-ouro) 30%, transparent);
}

.art-topo__logo {
    height: clamp(3rem, 6vw, 4.25rem);
    width: auto;
}

.art-topo__nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.25rem);
    flex-wrap: wrap;
}

/* ==========================================================================
   3 · Índice `/artigos/` (fundo preto)
   ========================================================================== */
.art-indice {
    padding: clamp(3rem, 6vw, 4.5rem) var(--lp-respiro-x) clamp(4rem, 8vw, 6rem);
    max-width: calc(var(--lp-largura-max) + 2 * var(--lp-respiro-x));
    margin: 0 auto;
}

.art-indice__cabeca {
    margin-bottom: 2.25rem;
}

.art-indice__sub {
    max-width: 34rem;
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--duae-branco) 66%, transparent);
}

.art-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--duae-ouro) 22%, transparent);
}

.art-filtro {
    padding: 0.5rem 1.1rem;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--duae-branco-suave);
    border: 1px solid color-mix(in srgb, var(--duae-ouro) 35%, transparent);
    transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.art-filtro:hover,
.art-filtro:focus-visible {
    border-color: var(--duae-ouro);
    color: var(--duae-ouro);
}

.art-filtro.is-ativo {
    background-color: var(--duae-ouro);
    border-color: var(--duae-ouro);
    color: var(--duae-preto);
    font-weight: 500;
}

/* Estado vazio: convite à ação, não um aviso de erro. */
.art-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: clamp(3rem, 8vw, 6rem) var(--lp-respiro-x);
    border: 1px solid color-mix(in srgb, var(--duae-ouro) 25%, transparent);
}

.art-vazio__losango {
    width: 0.7rem;
    height: 0.7rem;
    border: 1px solid var(--duae-ouro);
    transform: rotate(45deg);
    margin-bottom: 0.6rem;
}

.art-vazio__titulo {
    font-family: var(--duae-serif);
    font-size: 1.5rem;
    color: var(--duae-branco);
}

.art-vazio__texto {
    max-width: 30rem;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--duae-branco) 60%, transparent);
    margin-bottom: 0.8rem;
}

/* ==========================================================================
   4 · Página de LEITURA (fundo claro) — moldura do artigo
   O corpo do texto vem do `leitura.css` (compartilhado com o editor).
   ========================================================================== */
/* Os tokens de papel (--duae-papel/--duae-tinta) são declarados no
   `leitura.css`. Aqui eles vão SEMPRE com fallback: esta folha também roda em
   páginas que não carregam o leitura.css (landing, índice), e um token que
   não resolve apagaria o fundo da página inteira. */
body.art {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--duae-sans);
    font-weight: 300;
    line-height: 1.7;
    color: var(--duae-tinta, #2B211B);
    background-color: var(--duae-papel, #FAF7F2);
    -webkit-font-smoothing: antialiased;
}

body.art main {
    flex: 1;
}

/* Aviso de prévia (só a equipe vê) — rosé, o apoio pontual da identidade. */
.art-previa-aviso {
    padding: 0.75rem var(--lp-respiro-x);
    background-color: var(--duae-marrom);
    color: var(--duae-rose);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-align: center;
}

.art-previa-aviso a {
    color: var(--duae-branco);
    margin-left: 0.5rem;
}

.art-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--lp-respiro-x) 0;
}

.art-hero__grade {
    max-width: 46rem;
    margin: 0 auto;
}

/* O eyebrow herda ouro do landing.css; no papel claro o texto precisa do
   marrom para ter contraste (a linha continua dourada). */
.art-hero .lp-eyebrow {
    color: var(--duae-marrom);
}

.art-hero__titulo {
    font-family: var(--duae-serif);
    font-weight: 300;
    font-size: clamp(2.1rem, 4.5vw, 3.2rem);
    line-height: 1.12;
    color: var(--duae-tinta, #2B211B);
    text-wrap: balance;
    margin-bottom: 1.5rem;
}

/* ── Alinhamento do cabeçalho (Artigo.titulo_alinhamento) ──
   As classes `.art-al--*` vêm do `leitura.css` e já resolvem o `text-align` do
   título e do resumo. Estas duas linhas são as companheiras obrigatórias: o
   eyebrow e a faixa de autoria são FLEX, e `text-align` não move filho de flex
   — sem elas o título centralizaria sozinho, com a categoria encostada na
   esquerda. (Justificar não entra aqui: esticar uma linha de metadados não
   significa nada; ela segue o começo da coluna.) */
.art-hero__grade.art-al--centro .lp-eyebrow,
.art-hero__grade.art-al--centro .art-hero__meta {
    justify-content: center;
}

.art-hero__grade.art-al--direita .lp-eyebrow,
.art-hero__grade.art-al--direita .art-hero__meta {
    justify-content: flex-end;
}

.art-hero__resumo {
    font-family: var(--duae-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 2.6vw, 1.3rem);
    line-height: 1.5;
    color: var(--duae-tinta-suave, #5C4F45);
    margin-bottom: 2rem;
}

.art-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--duae-ouro) 50%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--duae-ouro) 50%, transparent);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--duae-tinta-suave, #5C4F45);
}

.art-hero__autora {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--duae-marrom);
}

.art-hero__sep {
    width: 4px;
    height: 4px;
    border: 1px solid var(--duae-ouro);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Capa com a moldura de ouro DESLOCADA — o signature do bloco "Quem somos"
   atravessa para a leitura. `isolation` mantém o ::after atrás da foto sem
   cair para trás do fundo da página (lição do bloco 3 da landing). */
.art-capa {
    max-width: calc(52rem + 2 * var(--lp-respiro-x));
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    padding: 0 var(--lp-respiro-x);
}

.art-capa__moldura {
    position: relative;
    isolation: isolate;
    margin: 0;
}

.art-capa__moldura img {
    width: 100%;
    height: auto;
    display: block;
}

.art-capa__moldura::after {
    content: '';
    position: absolute;
    inset: 1.1rem -1.1rem -1.1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--duae-ouro) 50%, transparent);
    z-index: -1;
}

.art-capa__legenda {
    margin-top: 1.9rem;
    font-family: var(--duae-serif);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--duae-tinta-suave, #5C4F45);
    text-align: center;
}

.art-artigo > .art-corpo {
    padding: clamp(2.5rem, 5vw, 4rem) var(--lp-respiro-x) 0;
    max-width: calc(46rem + 2 * var(--lp-respiro-x));
}

/* Engajamento (SPEC_DUAE_ENGAJAMENTO_V1): coração + contador ao fim do corpo.
   Discreto de propósito — hairline de ouro e o preenchimento só no estado
   curtido; o único fill sólido da página continua sendo o CTA do fecho. */
.art-eng {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(2rem, 4vw, 2.75rem) var(--lp-respiro-x) 0;
}

.art-eng__curtir {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--duae-marrom-leitura, #593B2D);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--duae-ouro, #AB955E) 55%, transparent);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.art-eng__curtir:hover,
.art-eng__curtir:focus-visible {
    border-color: var(--duae-ouro, #AB955E);
}

.art-eng__curtir:disabled {
    opacity: 0.6;
    cursor: default;
}

.art-eng__coracao {
    display: block;
    transition: fill 0.2s ease;
}

/* Curtido: o coração se preenche de ouro — o rótulo continua sóbrio. */
.art-eng__curtir.is-curtido {
    border-color: var(--duae-ouro, #AB955E);
}

.art-eng__curtir.is-curtido .art-eng__coracao {
    fill: var(--duae-ouro, #AB955E);
    stroke: var(--duae-ouro, #AB955E);
}

.art-eng__total {
    font-size: 0.875rem;
    color: var(--duae-tinta-suave, #5C4F45);
}

/* O divisor da landing tem fundo preto: no papel claro ele precisa de um
   modificador, senão abre uma faixa preta no meio da leitura. */
.lp-divisor--claro {
    background-color: transparent;
}

.art-fecho {
    background-color: var(--duae-papel-2, #F3EEE6);
    border-top: 1px solid color-mix(in srgb, var(--duae-ouro) 50%, transparent);
    padding: clamp(2.5rem, 5vw, 3.5rem) var(--lp-respiro-x);
}

.art-fecho__grade {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.art-fecho__nome {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--duae-marrom);
    margin-bottom: 0.6rem;
}

.art-fecho__bio {
    max-width: 32rem;
    margin: 0 auto 1.75rem;
    font-size: 0.875rem;
    color: var(--duae-tinta-suave, #5C4F45);
}

/* No papel claro o CTA outline precisa de fundo próprio para não "flutuar". */
.art-fecho .lp-cta {
    background-color: transparent;
    color: var(--duae-marrom);
    border-color: var(--duae-ouro);
}

.art-fecho .lp-cta:hover,
.art-fecho .lp-cta:focus-visible {
    background-color: var(--duae-marrom);
    border-color: var(--duae-marrom);
    color: var(--duae-branco);
}

/* Relacionados: volta ao preto — fecha a leitura devolvendo o leitor ao site. */
.art-relacionados {
    background-color: var(--duae-preto);
    padding: clamp(3rem, 6vw, 4.5rem) var(--lp-respiro-x);
}

.art-relacionados__grade {
    max-width: var(--lp-largura-max);
    margin: 0 auto;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 900px) {
    .lp-artigos__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-artigos__cabeca {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    .lp-artigos__cards {
        grid-template-columns: 1fr;
    }

    .art-topo {
        justify-content: center;
        gap: 0.9rem;
    }

    .art-topo__nav {
        justify-content: center;
        width: 100%;
    }

    /* Menu COMPLETO (6 itens) neste topo, que foi desenhado para a navegação
       reduzida de 3: sem compactar, ele quebra em TRÊS linhas e o topo vai a
       276px — um terço da primeira dobra do celular, numa página que existe
       para converter clique pago. Só a densidade muda; nenhum item sai. */
    .art-topo__nav--completo {
        gap: 0.5rem 0.85rem;
    }

    .art-topo__nav--completo .lp-topo__link {
        font-size: 0.625rem;
        letter-spacing: 0.12em;
    }

    .art-topo__nav--completo .lp-topo__contato {
        font-size: 0.625rem;
        letter-spacing: 0.12em;
        padding: 0.4rem 0.9rem;
    }

    .lp-card__pe {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}