/* =====================================================================
   COLUNA EDITORIAL — página pública /{slug} (e /coluna/{slug}).
   Carregada por pg/coluna.php.

   Existe porque a coluna é a única página do site sem CSS próprio: ela usava
   as classes .noticias do css/home.css, que NÃO é carregado fora da home — daí
   a página aparecer sem estilo. Copiar o home.css não serve: lá o bloco é uma
   coluna de 700px ao lado da sidebar (e ele reescreve o padding das <section>).
   Aqui o conteúdo é de largura cheia, em grade.

   Usa as variáveis do tema do portal (--cor-primaria, --radius, ...), então
   acompanha a identidade de cada tenant.
   ===================================================================== */

/* ------------------------------------------------------------- CAPA */
.coluna-hero{
  background:var(--cor-secundaria,#241B3E); background-size:cover; background-position:center;
  position:relative; padding:64px 0; margin-bottom:10px;
}
/* Véu da capa em PRETO NEUTRO. Era rgba(15,10,30,...) — um roxo-azulado fixo
   que tingia a cor da marca por baixo (sobre o amarelo do Guia da Corrida
   puxava para um verde-oliva). Preto só escurece, não muda o matiz. */
.coluna-hero::before{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.42)); }
.coluna-hero-in{ position:relative; z-index:2; display:flex; gap:24px; align-items:center; color:#fff; flex-wrap:wrap; }
.coluna-avatar{ width:104px; height:104px; border-radius:50%; object-fit:cover; flex:none;
  border:3px solid rgba(255,255,255,.55); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.coluna-hero-txt{ flex:1; min-width:240px; }
.coluna-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; opacity:.9; font-weight:700;
  font-family:var(--fonte-padrao); }
.coluna-hero h1{ margin:6px 0 10px; font-size:2.1rem; line-height:1.1; color:#fff; font-family:var(--fonte-padrao); }
.coluna-desc{ margin:0 0 8px; opacity:.92; max-width:660px; line-height:1.5; font-family:var(--fonte-padrao); }
.coluna-autor{ font-size:.92rem; opacity:.9; font-family:var(--fonte-padrao); }
.coluna-autor span{ opacity:.8; }

/* --------------------------------------------------------- CATEGORIAS */
.coluna-cats{ display:flex; gap:8px; flex-wrap:wrap; margin:26px 0 6px; }
.coluna-cats a{
  font-family:var(--fonte-padrao); font-size:13px; font-weight:600; text-decoration:none;
  color:var(--cor-texto-1,#222); background:#f2f2f4; border:1px solid transparent;
  padding:8px 16px; border-radius:22px; transition:all .2s ease; line-height:1;
}
.coluna-cats a:hover{ border-color:var(--cor-primaria,#6C4CF5); }
/* Ativo: fundo na cor do TEXTO do tema, não na cor primária. A primária pode ser
   igual à cor do texto (o Guia da Corrida usa preto nas duas) e o chip ficava
   preto no preto; a cor de texto, por definição, contrasta com o fundo da página. */
.coluna-cats a.ativa{ background:var(--cor-texto-1,#222); color:#fff; border-color:var(--cor-texto-1,#222); }

/* -------------------------------------------------------- GRADE DE POSTS */
.coluna-lista{ width:100%; position:relative; padding:10px 0 60px; }
.coluna-cards{ list-style:none; padding:0; margin:24px 0 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px 24px; }
.coluna-cards > li{ position:relative; }
.coluna-cards > li > a{ display:block; text-decoration:none; color:inherit; }

.coluna-card-img{ position:relative; overflow:hidden; border-radius:var(--radius,14px); background:#eceaf0; }
.coluna-card-img img{ width:100%; height:210px; display:block; object-fit:cover; object-position:center;
  transition:transform .35s ease; }
.coluna-cards > li:hover .coluna-card-img img{ transform:scale(1.06); }
.coluna-cat{
  position:absolute; left:10px; top:10px; z-index:2;
  font-family:var(--fonte-padrao); font-size:12px; line-height:1; font-weight:600;
  color:var(--cor-texto-1,#111); background:var(--cor-primaria,#f6eb55);
  padding:7px 14px; border-radius:var(--radius-2,8px);
}
.coluna-card-txt{ padding:14px 2px 0; }
.coluna-card-txt h2{
  font-family:var(--fonte-padrao); font-size:19px; line-height:1.25; font-weight:600;
  color:var(--cor-texto-1,#111); margin:0 0 8px; padding:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.coluna-cards > li:hover .coluna-card-txt h2{ opacity:.75; }
.coluna-card-txt h3{
  font-family:var(--fonte-padrao); font-size:14px; line-height:1.45; font-weight:400;
  color:var(--cor-texto-1,#333); margin:0; padding:0; opacity:.85;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.coluna-card-txt .hora_post{
  font-family:var(--fonte-padrao); font-size:12px; font-weight:600;
  color:var(--cor-texto-2,#8a8598); padding-top:10px; display:block;
}

.coluna-vazia{ list-style:none; padding:36px 0 60px; color:var(--cor-texto-2,#888);
  font-family:var(--fonte-padrao); font-size:15px; }

@media(max-width:980px){
  .coluna-cards{ grid-template-columns:repeat(2,1fr); gap:22px 18px; }
  .coluna-card-img img{ height:190px; }
}
@media(max-width:640px){
  .coluna-hero{ padding:40px 0; }
  .coluna-hero h1{ font-size:1.6rem; }
  .coluna-avatar{ width:80px; height:80px; }
  .coluna-cards{ grid-template-columns:1fr; gap:20px; }
  .coluna-card-img img{ height:200px; }
}