/* ============================================================
   MIRA DA NOTÍCIA — tipografia da página de matéria

   Usado pela pré-visualização do painel e, na Fase 4, pela página
   pública da notícia. Segue o manual: medida de 62 a 70 caracteres,
   texto sempre alinhado à esquerda, vermelho só em urgência.
   ============================================================ */

/* Faixa que só aparece na pré-visualização do painel */
.aviso-previa {
    display: flex;
    align-items: center;
    gap: var(--espaco-4);
    background: var(--preto);
    color: var(--branco);
    padding: var(--espaco-3) var(--espaco-5);
    font-size: .8125rem;
}
.aviso-previa strong {
    text-transform: uppercase;
    letter-spacing: var(--entreletra-etiqueta);
    font-size: .6875rem;
}
.aviso-previa span { color: rgba(255, 255, 255, .7); }
.aviso-previa a { margin-left: auto; color: var(--branco); }

/* ------------------------------------------------------------
   A matéria
   ------------------------------------------------------------ */
.materia {
    max-width: var(--medida-leitura);
    margin-inline: auto;
}

.materia__editoria {
    font-size: .75rem;
    font-weight: var(--peso-chapeu);
    text-transform: uppercase;
    letter-spacing: var(--entreletra-etiqueta);
    color: var(--texto-secundario);
    margin-bottom: var(--espaco-2);
}

.materia__titulo {
    font-size: clamp(1.875rem, 5vw, 3rem);
    font-weight: var(--peso-manchete);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin-bottom: var(--espaco-4);
}

.materia__olho {
    font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
    font-weight: var(--peso-chapeu);
    line-height: 1.4;
    color: var(--texto-secundario);
    margin-bottom: var(--espaco-5);
}

.materia__assinatura {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espaco-3);
    padding-block: var(--espaco-3);
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    font-size: .8125rem;
    color: var(--texto-secundario);
    margin-bottom: var(--espaco-5);
}
.materia__autor {
    font-weight: var(--peso-chapeu);
    color: var(--texto-principal);
    text-transform: uppercase;
    letter-spacing: var(--entreletra-etiqueta);
    font-size: .75rem;
}

.materia__figura { margin: 0 0 var(--espaco-5); }
.materia__figura img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--fundo);
}
.materia__figura figcaption {
    margin-top: var(--espaco-2);
    font-size: .75rem;
    color: var(--texto-secundario);
}

/* ------------------------------------------------------------
   Corpo do texto — o que sai do editor
   ------------------------------------------------------------ */
.materia__corpo {
    font-size: 1.125rem;
    line-height: 1.7;
}

.materia__corpo > * { margin-block: 0 var(--espaco-5); }
.materia__corpo > *:last-child { margin-bottom: 0; }

.materia__corpo h2 {
    font-size: 1.5rem;
    margin-top: var(--espaco-7);
    letter-spacing: -0.015em;
}

.materia__corpo h3 {
    font-size: 1.1875rem;
    margin-top: var(--espaco-6);
}

.materia__corpo a {
    color: var(--acao);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.materia__corpo ul,
.materia__corpo ol { padding-left: 1.5rem; }
.materia__corpo li { margin-bottom: var(--espaco-2); }

/* A citação usa o filete vermelho — é o acento pontual permitido */
.materia__corpo blockquote {
    margin-inline: 0;
    padding-left: var(--espaco-5);
    border-left: 3px solid var(--vermelho);
    font-size: 1.25rem;
    font-weight: var(--peso-chapeu);
    line-height: 1.45;
}

.materia__corpo figure { margin-inline: 0; }
.materia__corpo img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--fundo);
}
.materia__corpo figcaption {
    margin-top: var(--espaco-2);
    font-size: .8125rem;
    color: var(--texto-secundario);
}

/* ------------------------------------------------------------
   Palavras-chave
   ------------------------------------------------------------ */
.materia__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    margin: var(--espaco-7) 0 0;
    padding: var(--espaco-5) 0 0;
    border-top: 1px solid var(--borda);
}
.materia__tags li {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: var(--entreletra-etiqueta);
    padding: .35em .7em;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--texto-secundario);
}