/* * ESTILOS DO MEU PLUGIN DE POSTS RECENTES (v1.2)
 * - Título menor (1.2rem)
 * - Hover Dourado
 */

/* 1. As Cores (baseado na sua paleta) */
:root {
  --cor-azul-claro-card: #1A325E;
  --cor-dourado: #CFAF6E;
  --cor-branco-gelo: #F9F9F9;
  
  --cor-titulo: #303133;
  --cor-resumo: #020101;
  --cor-link-azul: #23527C;
}

/* 2. O "Grid" que segura os cards */
.meu-plugin-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
  grid-auto-rows: 1fr; /* Força altura igual */
}

/* 3. O Card Individual */
.meu-plugin-card {
  background-color: var(--cor-branco-gelo);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  border-radius: 0;
  overflow: hidden;
  border-top: 4px solid var(--cor-link-azul); 
  display: flex;
  flex-direction: column;
}

/* 4. A Imagem */
.card-imagem-wrapper img {
  width: 100%;
  height: 200px; 
  object-fit: cover; 
  display: block;
}

/* 5. O Conteúdo (Texto) */
.card-conteudo-wrapper {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; 
}

/* 6. O Título (com limite de 2 linhas e tamanho corrigido) */
.card-titulo {
  color: var(--cor-titulo);
  font-size: 1.2rem; /* <<< CORREÇÃO DE TAMANHO */
  margin-top: 0;
  margin-bottom: 15px;
  
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.4em; /* Altura de 2 linhas */
}
.card-titulo a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
/* <<< CORREÇÃO DE HOVER */
.card-titulo a:hover {
  color: var(--cor-dourado);
}


/* 7. O Resumo (com limite de 3 linhas) */
.card-resumo {
  color: var(--cor-resumo);
  font-size: 0.95rem;
  line-height: 1.6;
  
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  flex-grow: 1; 
}

/* 8. O "Leia Mais" */
.card-leia-mais {
  color: var(--cor-link-azul);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 15px; 
  transition: color 0.3s ease;
}
/* <<< CORREÇÃO DE HOVER */
.card-leia-mais:hover {
  color: var(--cor-dourado);
}


/* 9. Responsividade (para mobile) */
@media (max-width: 768px) {
  .meu-plugin-grid-wrapper {
    grid-template-columns: 1fr; 
  }
}
/* 10. Estilo do Botão "Voltar para o Blog" (no post único) */

/* O container que segura o botão */
.meu-plugin-botao-voltar-wrapper {
  /* Adiciona espaço antes da navegação "Próximo/Anterior" */
  margin-top: 40px; 
  margin-bottom: 40px;
  /* Garante que ele ocupe a largura toda */
  width: 100%;
}

/* O botão em si (estilo Dourado/Azul, como o do blog) */
.meu-plugin-botao-voltar {
  display: inline-block;
  background-color: var(--cor-dourado);
  color: var(--cor-azul-claro-card);
  
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 0; /* Cantos Retos */
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid var(--cor-dourado);
}

.meu-plugin-botao-voltar:hover {
  background-color: transparent;
  color: var(--cor-dourado);
  border-color: var(--cor-dourado);
}