/* Matérias — tela pública (materias/ver.php). CSS isolado do admin.css:
   "Conteúdos relacionados" agrupados por módulo + cards de "Mais lidas".
   Tokens (--surface-raised, --border, --text-500, --teal-*) vêm do DS. */

/* Corpo da matéria: prosa legível (largura de leitura confortável) */
.materia-corpo-ds { font-size: 1.05rem; line-height: 1.75; max-width: 72ch; }
/* Corpo montado no Editor Visual: layout livre, sem a largura de leitura da prosa */
.materia-corpo-ds--visual { max-width: none; }

/* Navegação entre matéria anterior/próxima: mesmo .row-actions, só espaçado nas pontas */
.materia-nav-adjacente { justify-content: space-between; }

/* Comentários da matéria (moderados) — item da lista e rodapé do formulário */
.materia-comentario-item { padding: 16px; border-bottom: 1px solid var(--border, #e2e8f0); }
.materia-comentario-vazio { padding: 16px; }
.materia-comentario-msg { margin: 12px 16px; }
.materia-comentario-form { padding: 16px; border-top: 1px solid var(--border, #e2e8f0); }

/* Conteúdos relacionados: um grupo (título com ícone) por módulo, itens em cards */
.mat-rel-grupo { margin-top: 16px; }
.mat-rel-grupo-titulo { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin: 0 0 8px; color: var(--text-700, #334155); }
.mat-rel-grupo-titulo .bi { color: var(--teal-700, #0f766e); }
.mat-rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mat-rel-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 8px); background: var(--surface-raised, #fff); color: inherit; text-decoration: none; }
.mat-rel-card:hover, .mat-rel-card:focus-visible { border-color: var(--teal-500, #14b8a6); background: var(--teal-50, #f0fdfa); }
.mat-rel-card .bi { flex: 0 0 auto; font-size: 1.15rem; color: var(--teal-700, #0f766e); }
.mat-rel-card-rotulo { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }

/* Mais lidas: card com miniatura da capa (ou placeholder), título, data e leituras */
.mais-lidas-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.mais-lidas-card { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 10px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 8px); background: var(--surface-raised, #fff); color: inherit; text-decoration: none; }
.mais-lidas-card:hover, .mais-lidas-card:focus-visible { border-color: var(--teal-500, #14b8a6); }
.mais-lidas-thumb { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 6px; object-fit: cover; background: var(--slate-100, #f1f5f9); }
.mais-lidas-thumb--vazia { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--text-500, #64748b); }
.mais-lidas-corpo { min-width: 0; }
.mais-lidas-titulo { display: block; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mais-lidas-meta { display: block; margin-top: 4px; font-size: .8rem; color: var(--text-500, #64748b); }