/* Container principal do bloco */
.block-he-is {
    margin-bottom: 60px;
}

/* Título do bloco */
.block-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 25px;
    color: #1e1e1e;
}

/* Grid principal */
.grid-items {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Destaque maior à esquerda, dois menores à direita */
    gap: 20px; /* Espaçamento entre os elementos */
}

/* Artigo principal em destaque */
.grid-item.highlight {
    grid-row: span 2; /* Ocupa duas linhas */
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.grid-item.highlight .grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay geral */
.grid-item.highlight .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Garante que o conteúdo fique na parte inferior da imagem */
    padding: 30px;
    color: #fff;
    z-index: 2;
}

/* Degradê no overlay */
.grid-item.highlight .grid-overlay::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0; /* Degradê começa no topo da imagem */
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 0%,     /* Transparente no topo */
        rgba(0, 0, 0, 0.3) 60%,  /* Degradê suave com escurecimento mais leve */
        rgba(0, 0, 0, 0.8) 100%  /* Escurecimento total perto do final */
    );
    pointer-events: none;
}

/* Botão da categoria - Ajuste para ficar logo acima do título */
.grid-item.highlight .grid-category {
    background-color: #e53e3e;  /* Fundo branco */
    color: #fff;             /* Texto preto */
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    text-decoration: none; /* Remove o sublinhado do botão */
    margin-bottom: 10px;      /* Espaço entre o botão e o título */
    transition: all 0.3s ease; /* Suaviza a transição do efeito de hover */
}

/* Efeito de hover - Botão fica preto com texto branco */
.grid-item.highlight .grid-category:hover {
    background-color: #718096;  /* Fundo preto ao passar o mouse */
    color: #fff;             /* Texto branco ao passar o mouse */
}

/* Conteúdo principal do overlay */
.grid-item.highlight .grid-overlay-content {
    margin-top: 10px;
}

.grid-item.highlight .grid-title {
    font-size: 2rem; /* Tamanho ajustado conforme Figma */
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #fff;
}

.grid-overlay-content .grid-excerpt {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #fff;
}

/* Título destaque */
.grid-item.highlight .grid-title a {
    color: #fff; /* Título na cor branca */
    text-decoration: none; /* Remove sublinhado padrão */
}

.grid-item.highlight .grid-title a:hover {
    text-decoration: underline; /* Adiciona sublinhado no hover */
}

/* Ajuste da imagem do autor no destaque do bloco "grid-way" */
.grid-item.highlight .grid-overlay-bottom .grid-author img {
    width: 32px; /* Define a largura fixa da imagem do autor */
    height: 32px; /* Define a altura fixa da imagem do autor */
    border-radius: 50%; /* Mantém o formato arredondado */
    margin-right: 5px; /* Espaçamento entre a imagem e o texto */
    object-fit: cover; /* Garante que a imagem fique proporcional dentro do círculo */
    border: 1px solid #eee; /* Adiciona uma borda clara */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
}

/* Rodapé do overlay (autor e data) */
.grid-overlay-bottom {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    gap: 10px;
}

.grid-overlay-bottom .grid-author {
    display: flex;
    align-items: center;
    gap: 5px;
}

.grid-overlay-bottom .grid-date {
    color: #fff;
    margin-left: 10px;
}

/* Link do Autor - Artigo Destaque */
.grid-item.highlight .grid-author {
    color: #fff; /* Nome do autor na cor branca */
    text-decoration: none; /* Remove sublinhado padrão */
}

.grid-item.highlight .grid-author:hover {
    text-decoration: underline; /* Adiciona sublinhado no hover */
}

/* Artigos secundários */
.grid-item.secondary {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 100%; /* Ocupa toda a altura do grid */
}

/* Imagem do artigo secundário */
.grid-item.secondary .grid-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.grid-item.secondary .grid-image img {
    width: 100%;
    height: 100%; /* Imagem ocupa toda a altura */
    object-fit: cover; /* Garante que a imagem se ajuste sem distorção */
    border-radius: 8px; /* Borda arredondada */
}

/* Overlay geral nos artigos secundários */
.grid-item.secondary .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinha o conteúdo ao fundo */
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); /* Degradê no overlay */
    color: #fff;
    z-index: 2;
}

/* Título sobreposto */
.grid-item.secondary .grid-title {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin: 5px 0;
    line-height: 1.3;
}

.grid-item.secondary .grid-title a {
    color: #fff;
    text-decoration: none;
}

.grid-item.secondary .grid-title a:hover {
    text-decoration: underline; /* Efeito hover */
}

/* Data sobreposta */
.grid-item.secondary .grid-date {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8); /* Branco com leve transparência */
    margin-top: 5px;
}