/* ==========================================================================
   50 · LISTAS DE BLOG POR CATEGORIA
   Tres tratamentos para o mesmo modulo Blog do Divi. Basta colar a classe
   no campo "CSS Class" (aba Advanced) e filtrar a categoria no modulo.

     mf-lista--writing     lista densa: data a esquerda, titulo grande
     mf-lista--aberto      cards de pergunta em aberto (marca amarela)
     mf-lista--ref         grade de referencias (marca em agua)

   O modulo Blog do Divi gera, dentro de .et_pb_post, nesta ordem:
     .et_pb_image_container   imagem destacada
     .entry-title             titulo
     .post-meta               autor, data, categoria
     .post-content            resumo + link "read more"
   Como a ordem do HTML e fixa, o reposicionamento usa grid-template-areas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   COMUM as tres
   -------------------------------------------------------------------------- */
[class*="mf-lista--"] .et_pb_post{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
[class*="mf-lista--"] .entry-title{
  font-family: var(--mf-font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
}
[class*="mf-lista--"] .entry-title a{ color: var(--mf-ink); text-decoration: none; }
[class*="mf-lista--"] .post-meta,
[class*="mf-lista--"] .post-meta a{
  font-family: var(--mf-font-mono);
  font-size: .62rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mf-meta);
  text-decoration: none;
}
[class*="mf-lista--"] .post-meta{
  line-height: 1.7;
  text-wrap: balance;
}
/* o Divi insere paginacao no fim; alinha com o resto */
[class*="mf-lista--"] .pagination{
  padding-top: 22px;
  font-family: var(--mf-font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   1 · WRITING — lista densa
   Modulo Blog, layout Fullwidth, sem imagem destacada.
   -------------------------------------------------------------------------- */
.mf-lista--writing .et_pb_post{
  display: grid;
  grid-template-columns: 132px 1fr;
  grid-template-areas:
    "meta titulo"
    "meta corpo";
  column-gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--mf-line);
  transition: padding-left .2s ease;
}
.mf-lista--writing .et_pb_post:hover{ padding-left: 8px; }
.mf-lista--writing .et_pb_post .et_pb_image_container,
.mf-lista--writing .et_pb_post .et_main_video_container{ display: none; }

.mf-lista--writing .entry-title{ grid-area: titulo; font-size: 1.3rem; margin: 0 0 6px; }
.mf-lista--writing .post-meta{ grid-area: meta; margin: 0; padding-top: 5px; line-height: 1.5; }
.mf-lista--writing .post-content{ grid-area: corpo; }

.mf-lista--writing .et_pb_post:hover .entry-title a{ color: var(--mf-rosa); }
.mf-lista--writing .post-content p{ font-size: .97rem; color: var(--mf-muted); margin: 0; max-width: 62ch; }
.mf-lista--writing .more-link{ display: none; } /* o titulo ja e o link */

@media (max-width: 700px){
  .mf-lista--writing .et_pb_post{
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "titulo" "corpo";
    row-gap: 6px;
  }
  .mf-lista--writing .post-meta{ padding-top: 0; }
}

/* --------------------------------------------------------------------------
   2 · WHAT I'M WORKING THROUGH — cards de pergunta
   Modulo Blog, layout Grid, 3 colunas, sem imagem destacada.
   -------------------------------------------------------------------------- */
.mf-lista--aberto .et_pb_salvattore_content{ margin: 0 -8px; }
.mf-lista--aberto .et_pb_post{
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-raio);
  padding: 22px;
  margin: 0 8px 16px;
  position: relative;
  overflow: hidden;
}
.mf-lista--aberto .et_pb_post::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 42px; height: 4px;
  background: var(--mf-sol);
}
.mf-lista--aberto .et_pb_post .et_pb_image_container{ display: none; }
.mf-lista--aberto .entry-title{ font-size: 1.02rem; margin: 8px 0 9px; }
.mf-lista--aberto .post-meta{
  order: -1;
  color: var(--mf-muted);
  margin: 0;
}
.mf-lista--aberto .post-content p{ font-size: .93rem; color: var(--mf-muted); margin: 0; }
.mf-lista--aberto .more-link{ display: none; }

/* --------------------------------------------------------------------------
   3 · REFERENCE — grade encostada, sem sombra
   Modulo Blog, layout Grid, 3 colunas.
   -------------------------------------------------------------------------- */
.mf-lista--ref .et_pb_salvattore_content{ margin: 0; }
.mf-lista--ref .et_pb_post{
  border: 1px solid var(--mf-line);
  border-radius: 0;
  padding: 24px;
  margin: 0 0 -1px -1px;   /* bordas colapsadas: vira uma grade unica */
  transition: background-color .2s ease;
}
.mf-lista--ref .et_pb_post:hover{ background: var(--mf-surface); }
.mf-lista--ref .et_pb_post .et_pb_image_container{ display: none; }
.mf-lista--ref .post-meta{ color: var(--mf-agua); margin: 0 0 10px; }
.mf-lista--ref .entry-title{ font-size: 1.08rem; margin: 0 0 8px; }
.mf-lista--ref .post-content p{ font-size: .92rem; color: var(--mf-muted); margin: 0; }
.mf-lista--ref .more-link{
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mf-font-mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mf-rosa);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   ESTADO VAZIO
   O Divi grita "No Results Found" num H1 do tamanho do titulo da pagina.
   Numa home isso e pior que nao ter a secao. Aqui ele vira uma linha discreta.

   Para sumir com o bloco inteiro enquanto a categoria nao tem post, adicione
   tambem a classe  mf-vazio-oculto  no modulo.
   -------------------------------------------------------------------------- */
[class*="mf-lista--"] .et_pb_no_results{
  padding: 22px 0;
  border-top: 1px solid var(--mf-line);
}
[class*="mf-lista--"] .et_pb_no_results h1,
[class*="mf-lista--"] .et_pb_no_results p{
  display: none;
}
[class*="mf-lista--"] .et_pb_no_results::after{
  content: "Nothing here yet — first notes coming soon.";
  font-family: var(--mf-font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mf-muted);
}
.mf-vazio-oculto .et_pb_no_results{ display: none; }

/* --------------------------------------------------------------------------
   CHIPS DE TOPICO — shortcode [mf_topicos]
   -------------------------------------------------------------------------- */
.mf-topicos, .mf-topicos li{ list-style: none !important; }
.mf-topicos li::before,
.mf-topicos li::marker{ content: none !important; display: none !important; }
.mf-topicos{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 22px 0 10px;
  padding: 0;
  list-style: none;
}
.mf-topicos a{
  display: inline-block;
  font-family: var(--mf-font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mf-muted);
  border: 1px solid var(--mf-line);
  border-radius: 99px;
  padding: 6px 12px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.mf-topicos a:hover{ border-color: var(--mf-rosa); color: var(--mf-rosa); }
.mf-topicos .mf-topico-ativo a{
  border-color: var(--mf-rosa);
  color: var(--mf-rosa);
}