/*
Theme Name: Kadence Child
Theme URI:  https://ihmsolucoesdigitais.com.br
Description: Child theme para o tema Kadence
Author: Ivan Alves
Author URI: https://ihmsolucoesdigitais.com.br
Template: kadence
Version: 2.0
Text Domain: kadence-child
*/

/* Importa o CSS principal do tema pai */
@import url("../kadence/style.css");

/* ===== Variáveis CSS ===== */
:root {
    --primary-color: blue;
    --secondary-color: #fff;
    --font-size-base: 1rem;
    --font-size-title: 2rem;
    --font-size-title-lg: 2.5rem;
}

/* ===== Comentário: Meta Viewport ===== */
/* Certifique-se de incluir no header:
   <meta name="viewport" content="width=device-width, initial-scale=1">
*/

/* ===== Banner Fullwidth ===== */
.home-banner {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.home-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== Wrapper do Conteúdo ===== */
.home-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ===== Títulos Principais ===== */
.home-title,
.interesse-title {
    text-align: center;
    margin: 2rem 0;
    font-size: var(--font-size-title);
}

/* ===== Card de Post ===== */
.post-item {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 1rem;
}

/* ===== Imagem do Post (Thumbnail) ===== */
.post-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9; /* Mantém a proporção desejada */
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* ===== Título e Excerpt ===== */
.post-title {
    margin: 1rem 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.2;
    text-align: center;
}

.post-excerpt {
    font-size: 1rem;
    line-height: 1.5;
}

/* ===== Botões e Contêiner de Botões ===== */
.saiba-mais-container {
    margin-top: 1rem;
    text-align: left;
}

.saiba-mais-btn,
.all-news-btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    color: var(--secondary-color);
    text-decoration: none;
    background-color: var(--primary-color);
    min-width: 120px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.saiba-mais-btn:hover,
.all-news-btn:hover {
    background-color: #003399; /* Tom mais escuro do primary */
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Botão "Todas as Notícias" */
.all-news-btn-container {
    text-align: center;
    margin-bottom: 2rem;
}

/* ===== Seção de Destaque ===== */
.featured-row-section {
    margin: 0;
    padding: 0;
}

.featured-row {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 10px;
}

.featured-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #f0f0f0;
}

.featured-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    box-sizing: border-box;
}

.featured-title h2 {
    margin: 0;
    color: #fff;
    font-size: 1.2em;
    text-align: left;
}

/* ===== Sobrescrita para imagens de posts em seções específicas ===== */
.latest-posts .post-thumbnail,
.interesse-posts .post-thumbnail {
    height: auto !important;
    padding-bottom: 0 !important;
    
}

/* ===== Espaçamento entre Seções ===== */
.featured-row-section,
.latest-posts,
.interesse-posts,
.all-news {
    margin-bottom: 4rem;
}

/* ===== Grids Específicos para Posts Recentes ===== */
.latest-posts-grid,
.interesse-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* ===== Media Queries ===== */
@media (min-width: 480px) {
    .featured-row {
        grid-template-columns: repeat(2, 1fr); /* Tablets: 2 colunas */
    }
}

@media (min-width: 768px) {
    /* Seção de Destaque em desktop: 3 colunas */
    .featured-row {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Grids para os artigos (sem incluir os headers) */
    .latest-posts-grid,
    .interesse-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Aumenta os títulos em desktop */
    .home-title,
    .interesse-title {
        font-size: var(--font-size-title-lg);
    }
    .post-title {
        font-size: 1.5rem;
    }
}