/* =========================================================
   EMI Odontologia — blog (listagem e artigo)
   Complementa style.css, especialidade.css e institucional.css
   ========================================================= */

/* ---------------------------------------------------------
   LISTAGEM
   --------------------------------------------------------- */
.bl-lista{position:relative;z-index:2;background:var(--c-ink);padding:8rem 2rem 10rem}
.bl-topo{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem}
.bl-topo .h3{color:var(--c-light-base);width:32rem;text-wrap:balance}
.bl-topo i{font-style:italic}
.bl-topo .description{width:19rem;color:var(--c-light-40)}

/* filtros por categoria */
.bl-filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:4rem}
.bl-filtro{
  padding:.75rem 1.25rem;border-radius:4rem;border:1px solid var(--c-light-15);
  color:var(--c-light-40);transition:all .3s var(--ease);
}
.bl-filtro:hover{border-color:var(--c-light-40);color:var(--c-light-base)}
.bl-filtro.ativo{background:var(--c-light-base);border-color:var(--c-light-base);color:var(--c-ink)}

.bl-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-card{
  display:flex;flex-direction:column;padding:.5rem .5rem 1.5rem;border-radius:1.875rem;
  background:rgba(242,239,236,.06);transition:background .4s var(--ease);
}
.bl-card:hover{background:rgba(242,239,236,.11)}
.bl-card.oculto{display:none}
.bl-card-img{width:100%;aspect-ratio:1.5;border-radius:1.5rem;overflow:hidden;background:#1c1a18}
.bl-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-quint)}
.bl-card:hover .bl-card-img img{transform:scale(1.05)}
.bl-meta{display:flex;align-items:center;gap:.75rem;padding:1.5rem 1rem .5rem;color:var(--c-light-40)}
.bl-meta .ponto{width:.25rem;height:.25rem;border-radius:50%;background:currentColor;flex:none}
.bl-card-titulo{padding:0 1rem;color:var(--c-light-base);text-wrap:balance}
.bl-card-resumo{padding:.75rem 1rem 0;color:var(--c-light-40)}
.bl-card .wrap-link{margin:1.5rem 1rem 0;--link-color:var(--c-light-base)}
.bl-vazio{color:var(--c-light-40);padding:3rem 0;text-align:center;display:none}
.bl-vazio.ativo{display:block}

/* ---------------------------------------------------------
   ARTIGO
   --------------------------------------------------------- */
.ar-hero{
  position:relative;width:100%;min-height:44rem;background:var(--c-ink);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:10rem 2rem 4rem;overflow:hidden;isolation:isolate;
}
.ar-hero .bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ar-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.ar-hero .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,15,.75),rgba(18,16,15,.5) 40%,var(--c-ink));
}
.ar-trilha{display:flex;align-items:center;gap:.625rem;margin-bottom:2rem;color:var(--c-light-40)}
.ar-trilha a{transition:color .3s var(--ease)}
.ar-trilha a:hover{color:var(--c-light-base)}
.ar-trilha .sep{opacity:.5}
.ar-titulo{color:var(--c-light-base);width:52rem;text-wrap:balance}
.ar-info{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2rem;color:var(--c-light-40)}
.ar-info .ponto{width:.25rem;height:.25rem;border-radius:50%;background:currentColor;flex:none}

.ar-corpo{
  position:relative;z-index:2;background:var(--c-light-base);color:var(--c-dark-base);
  padding:6rem 2rem 4rem;
}
.ar-wrap{display:grid;grid-template-columns:1fr 44rem 1fr;gap:2rem}
.ar-texto{grid-column:2}
.ar-resumo{
  padding:1.5rem 2rem;margin-bottom:3rem;border-radius:1.5rem;
  background:rgba(18,16,15,.05);color:var(--c-dark-base);
}
.ar-texto h2{margin:3rem 0 1rem}
.ar-texto h3{margin:2rem 0 .75rem}
.ar-texto p{margin-bottom:1rem;color:var(--c-dark-40)}
.ar-texto p strong{color:var(--c-dark-base);font-weight:inherit}
.ar-texto ul,.ar-texto ol{margin:0 0 1.5rem 1.25rem;color:var(--c-dark-40)}
.ar-texto ul{list-style:disc}
.ar-texto ol{list-style:decimal}
.ar-texto li{margin-bottom:.5rem}
.ar-texto a{color:var(--c-red);text-decoration:underline;text-underline-offset:.15em}
.ar-destaque{
  margin:2.5rem 0;padding:1.5rem 2rem;border-left:2px solid var(--c-red);
  color:var(--c-dark-base);
}

/* barra lateral fixa com o índice */
.ar-indice{grid-column:1;position:sticky;top:7rem;align-self:start;padding-right:2rem}
.ar-indice .rotulo{color:var(--c-dark-40);display:block;margin-bottom:1rem}
.ar-indice ol{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.ar-indice a{color:var(--c-dark-40);transition:color .3s var(--ease)}
.ar-indice a:hover{color:var(--c-dark-base)}

/* FAQ */
.ar-faq{margin-top:4rem;border-top:1px solid var(--c-dark-10)}
.ar-faq-item{border-bottom:1px solid var(--c-dark-10);padding:1.5rem 0}
.ar-faq-item dt{margin-bottom:.5rem}
.ar-faq-item dd{color:var(--c-dark-40)}

/* aviso de conteúdo informativo — exigência ética, não enfeite */
.ar-aviso{
  grid-column:2;margin-top:3rem;padding:1.25rem 1.5rem;border-radius:1rem;
  background:rgba(177,7,16,.06);color:var(--c-dark-40);
}
.ar-aviso strong{color:var(--c-dark-base);font-weight:inherit}

/* assinatura do responsável */
.ar-autor{
  grid-column:2;display:flex;align-items:center;gap:1.25rem;margin-top:3rem;
  padding-top:2rem;border-top:1px solid var(--c-dark-10);
}
.ar-autor-foto{width:5rem;height:5rem;border-radius:50%;overflow:hidden;flex:none}
.ar-autor-foto img{width:100%;height:100%;object-fit:cover}
.ar-autor .cargo{color:var(--c-dark-40);margin-top:.25rem;display:block}

/* relacionados */
.ar-relacionados{background:var(--c-ink);padding:8rem 2rem}
.ar-relacionados .titulo{color:var(--c-light-base);margin-bottom:3rem}
.ar-relacionados i{font-style:italic}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width:1023px){
  .bl-lista{padding:3.5rem 1rem 4rem}
  .bl-topo{flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:2rem;text-align:center}
  .bl-topo .h3,.bl-topo .description{width:100%}
  .bl-filtros{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-bottom:2.5rem;
    padding-bottom:.5rem;scrollbar-width:none}
  .bl-filtros::-webkit-scrollbar{display:none}
  .bl-filtro{flex:none}
  .bl-grid{grid-template-columns:1fr}

  .ar-hero{min-height:0;padding:7rem 1rem 2.5rem}
  .ar-titulo{width:100%}
  .ar-trilha{flex-wrap:wrap}
  .ar-corpo{padding:2.5rem 1rem}
  .ar-wrap{display:block}
  .ar-indice{display:none}
  .ar-resumo{padding:1.25rem 1.25rem;margin-bottom:2rem}
  .ar-destaque{margin:2rem 0;padding:1rem 1.25rem}
  .ar-autor{flex-direction:column;text-align:center;gap:1rem}
  .ar-relacionados{padding:3.5rem 1rem}
}