/* ==========================================================================
   ABMES Clipping — a página de um boletim (/clipping-abmes/{slug})
   --------------------------------------------------------------------------
   Nasceu em 05/10/2026, com a tela. Até então o detalhe de um boletim tinha
   1.049 bytes de miolo -- título, data e um cadeado -- e nenhuma folha
   própria, porque não havia conteúdo a estilizar.

   🔑 SÓ O QUE É EXCLUSIVO DAQUI. O envelope da página (`.asc-artigo`,
   `.asc-artigo__interno`, `.asc-artigo__titulo`, `.leg-cartao__data`, a
   trilha, a caixa `.asc-bloqueado`) vem de `associe-se.css`/`internas.css` e
   é o mesmo de Institucional, FAQ, Imprensa e Cartas. Prefixo próprio
   (`cl-`) para a leitura do código não confundir boletim com legislação.

   ⚠️ Esta folha é carregada por `cssPagina` em `clipping/detalhe.phtml`, e o
   layout só inclui o arquivo se ele existir em disco -- um nome errado aqui
   não dá erro, só deixa a página sem estilo. (Foi assim que uma página do
   portal já passou sem folha nenhuma, calada.)
   ========================================================================== */

/* -------------------------------------------------- a linha de contagem -- */

.cl-boletim__resumo {
    margin: 4px 0 28px;
    color: var(--cinza-texto, #5b6460);
    font-size: 15px;
}

.cl-boletim__vazio {
    margin: 24px 0;
    padding: 20px 22px;
    background: #f4f6f5;
    border-radius: 10px;
    color: var(--cinza-texto, #5b6460);
}

/* ------------------------------------------------------- a lista em si -- */

/**
 * 🔴 É UMA `<ol>`, e o número é escondido de propósito.
 *
 * A ordem do boletim é informação (ela vem de `nu_codigo`, o número de
 * controle impresso), então a marcação certa é uma lista ordenada -- quem usa
 * leitor de tela ouve "item 3 de 12". Mas o número da lista NÃO aparece: o
 * boletim já traz a própria numeração visual no conteúdo, e dois números
 * seguidos confundiriam. `list-style: none` tira o marcador sem tirar a
 * semântica.
 */
.cl-boletim {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cl-boletim__item {
    padding: 0 0 28px;
    margin: 0 0 28px;
    border-bottom: 1px solid #e4e8e6;
}

.cl-boletim__item:last-child {
    border-bottom: 0;
    margin-bottom: 8px;
}

/* ------------------------------------------------- retranca e categoria -- */

.cl-boletim__retranca {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
}

.cl-boletim__selo {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eaf3ec;
    color: #1f5132;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.cl-boletim__tipo {
    font-size: 12px;
    color: var(--cinza-texto, #5b6460);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ------------------------------------------------------ título e fonte -- */

/**
 * ⚠️ `h2` porque o `h1` da página é o título do BOLETIM. Cada notícia é uma
 * seção dentro dele -- pular de h1 para h3, ou repetir h1, quebraria a
 * navegação por cabeçalho de quem usa leitor de tela.
 */
.cl-boletim__titulo {
    margin: 0 0 6px;
    font-size: 21px;
    line-height: 1.35;
    color: var(--verde-escuro, #214138);
}

.cl-boletim__fonte {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--cinza-texto, #5b6460);
}

/* ------------------------------------------------- o texto da matéria -- */

/**
 * 🔴 Este bloco recebe HTML vindo do EDITOR do painel (já higienizado por
 * `HtmlSeguro`, ver `BoletimDoClipping`). Ou seja: a marcação de dentro não
 * é nossa, e pode trazer `<table>`, `<img>` e `style` inline de textos
 * colados de fora.
 *
 * As três regras abaixo existem por causa disso -- elas impedem que conteúdo
 * colado rompa a largura da página (o defeito aparece só no celular, e só em
 * algumas matérias, que é o pior jeito de descobrir).
 */
.cl-boletim__texto {
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: break-word;
}

.cl-boletim__texto img,
.cl-boletim__texto iframe,
.cl-boletim__texto table {
    max-width: 100%;
    height: auto;
}

.cl-boletim__texto table {
    display: block;
    overflow-x: auto;
}

.cl-boletim__texto p {
    margin: 0 0 12px;
}

.cl-boletim__texto--leia {
    margin-top: 10px;
    padding-left: 14px;
    border-left: 3px solid #cfe0d4;
    color: var(--cinza-texto, #5b6460);
}

/* --------------------------------------------------- link para a fonte -- */

.cl-boletim__link {
    margin: 12px 0 0;
    font-size: 15px;
}

.cl-boletim__link a {
    color: #1f5132;
    font-weight: 600;
    text-decoration: underline;
}

.cl-boletim__link i {
    font-size: 13px;
    margin-left: 2px;
}

/* ---------------------------------------------------------- assinatura -- */

.cl-boletim__assinatura {
    margin: 28px 0 0;
    padding-top: 18px;
    border-top: 1px solid #e4e8e6;
    font-size: 14px;
    color: var(--cinza-texto, #5b6460);
}

/* ------------------------------------------------------------ celular -- */

@media (max-width: 575px) {
    .cl-boletim__titulo { font-size: 19px; }
    .cl-boletim__item   { padding-bottom: 22px; margin-bottom: 22px; }
}