/* ==========================================================================
   IEL Sergipe: CSS do artigo do blog (single-blog.php, com partes/galeria-noticia.php e partes/card-autor.php; as
   funcoes article_tags(), share_buttons(), author_card(), mini_post_card() e related_widget() de includes/components.php;
   carregado pela propria pagina, pela chave `'css' => 'post.css'` do page_head()).

   Onda 8 da migracao do Tailwind (docs/tailwind/migracao-tailwind.md). Copiado de single-blog.php e dessas pecas, sem
   apagar nada do `style.css` antigo. Os tokens (cor, fonte, espaco, raio, sombra), o miolo `.secao__interno`, o hero de
   pagina, o botao, o acordeao (o FAQ), o card de noticia (`.card-noticia`) e a margem lateral `--margem-x` sao globais
   (onda 0) e vem do `styles.css`, que carrega antes. A listagem do blog (blog.php) e da onda 7 e nao entra aqui.

   O CORPO DO ARTIGO (`.post-corpo`). O texto vem do editor do CMS (`texto_rico`, ja sanitizado) SEM classe nenhuma, entao o
   bloco estiliza por tag, a partir do wrapper (`.post-corpo h2`, `.post-corpo ul`...), como os 36 `[&_tag]:` de Tailwind
   faziam: o mesmo seletor de descendente, a mesma especificidade (0,1,1) e o mesmo alcance (qualquer profundidade). Classe
   injetada pelo PHP (como a das politicas) deixaria de fora o que o editor produz fora do que a funcao reconhece e daria
   um calculado diferente. Tag que nao aparece aqui (hr, code, pre, i, u, mark, small, sub, sup, kbd, dl, figure...) so tem o
   reset (reset-preflight.css), como hoje.

   A entrelinha do corpo, do h2 e do h3 e em REM, nao a razao dos tokens (`--entrelinha-16-24`...), de proposito: o Tailwind escrevia
   `leading-6` (1.5rem) e um filho com outro tamanho de fonte herda o COMPRIMENTO, nao a razao. O editor produz `<small>` (80%
   do tamanho), e com razao ele ganharia 19,2px de entrelinha em vez dos 24px de hoje. Nos outros blocos (sem HTML de CMS dentro)
   a razao dos tokens segue valendo.

   Figma: Screen/Desktop/Blog-Article (11861:2397, arte de 1600px), Tablet (12015:11659, 768px), Mobile (11981:7157, 390px).
   Breakpoints (min-width, mobile-first, em `em`): md = 48em, xl = 80em. A margem lateral da secao e o token `--margem-x`
   (1rem; 2.5rem em 48em; 11.875rem em 80em).
   ========================================================================== */

/* ==========================================================================
   ARTIGO - a secao com o texto e a barra lateral
   Coluna unica ate o tablet; texto e barra lateral lado a lado no desktop.
   ========================================================================== */

.post {
  width: 100%;
  padding: var(--espaco-xl) var(--margem-x);
}

.post__interno {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xl);
}

.post__artigo {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: var(--espaco-xl);
}

/* Capa do artigo (a midia de destaque) com a legenda embaixo */
.post__capa {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

.post__capa-imagem {
  width: 100%;
  height: 25rem;
  border-radius: var(--raio-lg);
  object-fit: cover;
}

.post__legenda {
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

.post__lateral {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--espaco-xl);
}

/* ==========================================================================
   CORPO DO ARTIGO (o HTML do editor do CMS, sem classe)
   Estilo por tag a partir do wrapper. As listas e a citacao sao `flex` e a tabela `block` de proposito (era assim).
   ========================================================================== */

.post-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
  overflow-wrap: break-word;
  font-size: var(--fonte-16);
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--tinta-dark);
}

.post-corpo h2 {
  scroll-margin-top: 7rem;
  font-size: var(--fonte-32);
  font-weight: 700;
  line-height: 2.5rem;
  color: var(--corporativo-pure);
}

.post-corpo h3 {
  scroll-margin-top: 7rem;
  font-size: var(--fonte-20);
  font-weight: 700;
  line-height: 1.75rem;
  color: var(--corporativo-pure);
}

.post-corpo a {
  color: var(--iel-dark);
  text-decoration-line: underline;
}

.post-corpo strong,
.post-corpo b { font-weight: 700; }

.post-corpo em { font-style: italic; }

.post-corpo ul,
.post-corpo ol {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding-left: var(--espaco-lg);
}
.post-corpo ul { list-style-type: disc; }
.post-corpo ol { list-style-type: decimal; }

/* So a esquerda tem largura; a cor vale para os quatro lados, como o `border-iel-dark` fazia */
.post-corpo blockquote {
  border-left-width: 3px;
  border-color: var(--iel-dark);
  padding-left: var(--espaco-lg);
}

.post-corpo img {
  max-width: 100%;
  height: auto;
  border-radius: var(--raio-lg);
}

.post-corpo table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   ETIQUETAS DO ARTIGO (article_tags) - as categorias, em links para a listagem
   Os filetes de cima e de baixo; a cor vale para os quatro lados, so esses dois tem largura.
   ========================================================================== */

.etiquetas-artigo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  padding-block: var(--espaco-md);
  border-color: var(--tinta-lighter);
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.etiquetas-artigo__rotulo {
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-darkest);
}

.etiquetas-artigo__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-xs);
}

.etiquetas-artigo__item {
  display: inline-flex;
  min-width: 3rem;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2xs);
  padding: var(--espaco-2xs) var(--espaco-xs);
  border-radius: var(--raio-pill);
  background-color: var(--iel-lightest);
  font-size: var(--fonte-12);
  font-weight: 500;
  line-height: var(--entrelinha-12-16);
  color: var(--iel-darkest);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.etiquetas-artigo__item:hover { background-color: var(--iel-lighter); }

.etiquetas-artigo__icone {
  width: .75rem;
  height: .75rem;
}

/* ==========================================================================
   COMPARTILHAR (share_buttons) - os quatro links e o botao de copiar
   O botao de copiar ganha `data-copiado` por 2 s depois do clique (main.js; era a classe `bg-iel-light`).
   ========================================================================== */

.compartilhar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-md);
}

.compartilhar__rotulo {
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

.compartilhar__botoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.compartilhar__botao {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pill);
  background-color: var(--iel-lighter);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.compartilhar__botao:hover { background-color: var(--iel-light); }
.compartilhar__botao[data-copiado] { background-color: var(--iel-light); }

.compartilhar__icone {
  width: 1.125rem;
  height: 1.125rem;
}

/* Alerta "Link copiado!" no pe da tela por 2 s; o main.js cria o elemento e liga `data-visivel` */
.aviso-copiar {
  position: fixed;
  left: 50%;
  bottom: var(--espaco-lg);
  z-index: 100;
  padding: var(--espaco-sm) var(--espaco-md);
  border-radius: var(--raio-sm);
  background-color: var(--corporativo-pure);
  box-shadow: var(--sombra-lg);
  color: var(--tinta-white);
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, .5rem);
}
.aviso-copiar[data-visivel] {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: no-preference) {
  .aviso-copiar {
    transition-property: opacity, transform;
    transition-duration: .2s;
    transition-timing-function: var(--suavizacao-padrao);
  }
}

/* ==========================================================================
   CARD DO AUTOR (partes/card-autor.php e author_card()) - foto opcional, nome e cargo (e a bio, no author_card)
   ========================================================================== */

.card-autor {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  padding: var(--espaco-lg);
  border-radius: var(--raio-lg);
  background-color: var(--iel-lightest);
  box-shadow: var(--sombra-card);
}

.card-autor__foto {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  align-self: center;
  border-radius: var(--raio-pill);
  object-fit: cover;
}

.card-autor__texto {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: var(--espaco-xs);
}

.card-autor__nome {
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-darkest);
}

.card-autor__cargo {
  font-size: var(--fonte-12);
  font-weight: 500;
  line-height: var(--entrelinha-12-16);
  color: var(--tinta-dark);
}

.card-autor__bio {
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-darker);
}

/* ==========================================================================
   INDICE DO ARTIGO (article_index) - Figma 11861:2504
   Cartao branco na lateral, so na noticia com `mostrar_indice = sim`. O item ativo (aria-current no link, data-ativo na
   barra, que o main.js troca na rolagem) fica em negrito e verde.
   ========================================================================== */

.indice-artigo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  padding: var(--espaco-lg);
  border: 1px solid var(--tinta-lightest);
  border-radius: var(--raio-lg);
  background-color: var(--tinta-white);
  box-shadow: var(--sombra-card);
}

.indice-artigo__titulo {
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-darkest);
}

.indice-artigo__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

.indice-artigo__link {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}
.indice-artigo__link:hover { text-decoration-line: underline; }
.indice-artigo__link[aria-current="true"] {
  font-weight: 700;
  color: var(--iel-dark);
}

.indice-artigo__barra {
  width: 3px;
  height: 1rem;
  flex-shrink: 0;
  border-radius: var(--raio-xs);
  background-color: var(--tinta-lighter);
}
.indice-artigo__barra[data-ativo="true"] { background-color: var(--iel-dark); }

/* ==========================================================================
   ARTIGOS RELACIONADOS (related_widget) e o item da lista (mini_post_card)
   Com o ponteiro sobre o item o titulo ganha sublinhado (era `group-hover:underline`; o Tailwind so gerava :hover, sem foco).
   ========================================================================== */

.relacionados {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}

.relacionados__titulo {
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-darkest);
}

.relacionados__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.mini-card {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.mini-card__imagem {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  border-radius: var(--raio-sm);
  object-fit: cover;
}

/* Titulo limitado a 2 linhas */
.mini-card__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 0%;
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-darkest);
}
.mini-card:hover .mini-card__titulo { text-decoration-line: underline; }

/* ==========================================================================
   GALERIA E ANEXOS (partes/galeria-noticia.php) - imagens em grade e os demais arquivos como links de download
   ========================================================================== */

.galeria-noticia {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.galeria-noticia__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-md);
}

.galeria-noticia__figura {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}

.galeria-noticia__imagem {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--raio-lg);
  object-fit: cover;
}

/* Cada miniatura e um link para o original; a galeria ampliada do kit (sgw/galeria.php) abre a imagem grande no clique.
   O selo (uma lupa em CSS) avisa que a imagem abre maior; e decorativo: o leitor de tela ja ouve "Ampliar imagem". */
.galeria-noticia__abrir {
  position: relative;
  display: block;
  border-radius: var(--raio-lg);
  cursor: zoom-in;
}
.galeria-noticia__abrir:hover .galeria-noticia__imagem { filter: brightness(.9); }

.galeria-noticia__selo {
  position: absolute;
  right: var(--espaco-xs);
  bottom: var(--espaco-xs);
  width: 2rem;
  height: 2rem;
  border-radius: var(--raio-pill);
  background-color: var(--iel-darkest);
}
.galeria-noticia__selo::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: .5rem;
  box-sizing: border-box;
  width: .8125rem;
  height: .8125rem;
  border: .125rem solid var(--tinta-white);
  border-radius: var(--raio-pill);
}
.galeria-noticia__selo::after {
  content: "";
  position: absolute;
  left: 1.1875rem;
  top: 1.125rem;
  width: .125rem;
  height: .5rem;
  border-radius: var(--raio-xs);
  background-color: var(--tinta-white);
  transform: rotate(-45deg);
  transform-origin: top;
}

.galeria-noticia__legenda {
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

.anexos-noticia {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.anexos-noticia__titulo {
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-darkest);
}

.anexos-noticia__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

.anexos-noticia__link {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-dark);
}
.anexos-noticia__link:hover { text-decoration-line: underline; }

/* ==========================================================================
   POSTAGENS RECENTES - a faixa cinza com os cards de noticia
   Celular: carrossel de 1 card por vez e bolinhas, como na Home; do tablet em diante o trilho vira grade e as bolinhas somem.
   O trilho, as bolinhas e o container delas (`.noticias-trilho`, `.noticias-ponto`, `.noticias-pontos`) sao do `styles.css`, o
   mesmo carrossel da Home (subiu para o global quando a segunda pagina o usou). O main.js os acha pelos atributos data-noticias-*.
   O botao "Todas as noticias" aparece duas vezes: ao lado do titulo (do tablet em diante) e embaixo (so no celular).
   ========================================================================== */

.post-recentes {
  width: 100%;
  background-color: var(--tinta-lightest);
  padding: var(--espaco-xl) var(--margem-x);
}

.post-recentes__interno {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}

.post-recentes__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-md);
}

.post-recentes__titulo {
  font-size: var(--fonte-24);
  font-weight: 700;
  line-height: var(--entrelinha-24-36);
  color: var(--corporativo-pure);
}

/* Depois do `.btn` do styles.css, de proposito (mesma especificidade, vale a ordem de carga) */
.post-recentes__botao-largo { display: none; }

.post-recentes__botao-estreito { width: 100%; }

/* ==========================================================================
   RESPONSIVO
   Sempre no fim do arquivo, em ordem crescente (48em, 80em); dentro de cada @media, na ordem dos blocos acima.
   ========================================================================== */

@media (min-width: 48em) {
  .post { padding-block: var(--espaco-64); }

  .post__capa-imagem { height: 27.5rem; }

  .compartilhar { flex-direction: row; }

  .card-autor {
    flex-direction: row;
    align-items: center;
  }

  .galeria-noticia__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .post-recentes { padding-block: var(--espaco-3xl); }
  .post-recentes__interno { gap: var(--espaco-48); }
  .post-recentes__cabecalho {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .post-recentes__titulo {
    font-size: var(--fonte-32);
    line-height: var(--entrelinha-32-44);
  }
  .post-recentes__botao-largo {
    display: inline-flex;
    width: 13.625rem;
  }
  .post-recentes__botao-estreito { display: none; }
}

@media (min-width: 80em) {
  .post__interno {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--espaco-xl);
  }
  .post__lateral {
    width: 24.125rem;
    flex-shrink: 0;
  }

  .post-corpo h2 {
    font-size: var(--fonte-40);
    line-height: 3.25rem;
  }

  .post-recentes__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-48);
  }
}