/* Estilos dos módulos deste produto.
 *
 * VAZIO NA BASE, de propósito. O montador junta aqui o `estilo.css` de cada
 * módulo declarado em modulo.json.
 *
 * Existe porque estilo de módulo estava morando em components.css — a carcaça
 * carregava regra de `.kanban` sem saber o que é um quadro de conteúdos. Mesmo
 * problema de um helper de módulo largado nas regras do banco: a Base vira
 * gaveta, e o próximo produto nasce carregando peso que não usa.
 *
 * NÃO edite este arquivo à mão: o montador reescreve.
 */

/* Estilos do módulo Editorial / Blogs.
 *
 * Moram aqui, não no components.css da Base: a carcaça não sabe o que é um
 * quadro de conteúdos nem uma estrela de favorito. Estilo de módulo largado
 * na carcaça é o mesmo erro do helper de regra que já tivemos que mudar de
 * casa — a Base vira gaveta e o próximo produto carrega peso que não usa.
 *
 * O montador junta este arquivo em styles/modulos.css do produto.
 */

.editor-texto { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: #fff; padding: 16px 18px; min-height: 320px; max-height: 60vh; overflow-y: auto; line-height: 1.65; color: #1a1c2e; }
.editor-texto:focus { outline: 2px solid var(--cor-principal); outline-offset: -1px; }
.editor-texto h2 { font-size: 20px; margin: 18px 0 8px; }
.editor-texto h3 { font-size: 16px; margin: 14px 0 6px; }
.editor-texto p { margin-bottom: 10px; }
.editor-texto ul, .editor-texto ol { margin: 0 0 10px 22px; }
.editor-texto blockquote { border-left: 3px solid var(--cor-borda); padding-left: 12px; margin: 10px 0; color: var(--cor-texto-fraco); }
.editor-texto table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13.5px; }
.editor-texto th, .editor-texto td { border: 1px solid var(--cor-borda); padding: 6px 9px; text-align: left; }
.estrela { background: none; border: none; padding: 4px; cursor: pointer; color: var(--cor-texto-fraco); opacity: .55; transition: opacity .15s, color .15s; line-height: 0; }
.estrela:hover { opacity: 1; color: #d97706; }
.estrela--marcada { opacity: 1; color: #d97706; }
.estrela--marcada .icone { fill: currentColor; }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.kanban-col { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 12px; }
.kanban-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--cor-texto-fraco); margin-bottom: 10px; }
.kanban-card { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-left: 3px solid var(--cor-principal); border-radius: var(--raio-sm); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--sombra); transition: transform .12s; }
.kanban-card:hover { transform: translateY(-2px); }

/* ---------- Celular e tablet ----------
 *
 * O quadro tinha 4 colunas fixas lado a lado. Num celular de 375px cada uma
 * ficaria com ~85px — ilegível.
 *
 * Os cortes são os de mercado, os mesmos da Base: 1024px separa tablet de
 * desktop e 640px separa celular de tablet (`lg` e `sm` do Tailwind e do
 * Bootstrap). Não são números escolhidos para uma tela específica.
 */
@media (max-width: 1023.98px) {
  .kanban { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 639.98px) {
  /* Uma coluna embaixo da outra. O título de cada uma vira o separador. */
  .kanban { grid-template-columns: 1fr; }
  .kanban-col { padding: 10px; }
  .kanban-col h4 { position: sticky; top: 0; background: var(--cor-superficie); padding: 4px 0; z-index: 1; }
  /* Sem levantar o cartão no toque: em celular não existe passar o mouse, e o
   * efeito só aparece depois do toque, parecendo defeito. */
  .kanban-card:hover { transform: none; }
  .editor-texto { min-height: 220px; padding: 12px 13px; }
}