/* ====== GRADE DE NOTÍCIAS EM 3 COLUNAS ====== */ .blocos-categorias { display: grid; /* Ativa layout em grade */ grid-template-columns: repeat(3, 1fr); /* Divide em 3 colunas de larguras iguais */ gap: 20px; /* Espaçamento entre os blocos */ margin: 30px 10px 40px; /* Margem externa (topo, laterais, base) */ padding: 0 10px; /* Espaçamento interno lateral */ box-sizing: border-box; /* Inclui padding e border no cálculo de tamanho */ }/* Cada bloco individual de post */ .bloco-categoria { background: #f9f9f9; /* Fundo cinza claro */ padding: 20px; /* Espaçamento interno */ border-radius: 10px; /* Cantos arredondados */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra leve para destaque */ display: flex; flex-direction: column; /* Conteúdo empilhado verticalmente */ height: 100%; /* Ocupa altura total do grid */ transition: transform 0.2s ease; /* Animação suave ao passar o mouse */ }/* Efeito ao passar o mouse: eleva levemente o bloco */ .bloco-categoria:hover { transform: translateY(-5px); }/* Container da imagem (thumb) */ .bloco-categoria .thumb { overflow: hidden; /* Oculta qualquer parte da imagem que passe do container */ border-radius: 6px; /* Cantos arredondados na imagem */ }/* Estilo da imagem */ .bloco-categoria .thumb img { width: 100%; /* Largura total do container */ height: auto; /* Altura proporcional à imagem */ object-fit: cover; /* Preenche o espaço cortando excessos */ max-height: 230px; /* Altura máxima para uniformizar blocos */ transition: transform 0.4s ease; /* Animação suave para zoom no hover */ display: block; /* Remove espaçamento abaixo da imagem */ }/* Zoom leve na imagem ao passar o mouse */ .bloco-categoria:hover .thumb img { transform: scale(1.05); /* Aumenta em 5% */ }/* Título da matéria */ .bloco-categoria a.titulo-materia { font-weight: bold; /* Negrito */ font-size: 16px; /* Tamanho do texto */ text-decoration: none; /* Remove sublinhado */ color: #1A237E; /* Azul escuro */ transition: all 0.3s ease; /* Transição suave */ line-height: 1.3; /* Espaçamento entre linhas */ margin-top: 10px; /* Espaçamento acima */ min-height: 48px; /* Garante altura mínima uniforme (mesmo com títulos curtos) */ }/* Hover no título */ .bloco-categoria a.titulo-materia:hover { color: #0D47A1; /* Azul mais escuro */ text-decoration: underline; /* Sublinhado no hover */ }/* Data da matéria */ .data-publicacao { font-size: 14px; color: #555; /* Cinza escuro */ margin: 8px 0; display: flex; /* Ícone e data na mesma linha */ align-items: center; gap: 6px; /* Espaço entre ícone e texto */ }/* Ícone do calendário antes da data */ .data-publicacao::before { content: "📅"; font-size: 15px; }/* Botão "Veja a matéria completa" */ .botao-materia { margin-top: auto; /* Empurra o botão para o fim do bloco */ background-color: #0047AB; /* Azul forte */ color: white !important; /* Texto branco */ padding: 10px 16px; border-radius: 6px; text-align: center; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease; display: inline-block; }/* Hover no botão */ .botao-materia:hover { background-color: #002b70; /* Azul mais escuro */ color: white !important; }/* Título da seção principal */ .titulo-categoria { font-size: 32px; margin: 30px 10px 20px; color: #E65100; /* Laranja vibrante */ border-bottom: 2px solid #0047AB; /* Linha azul embaixo */ padding-bottom: 8px; text-align: center; grid-column: span 3; /* Ocupa as 3 colunas da grade */ }/* Botão "Veja mais" */ .ver-mais-btn { display: block; text-align: center; margin: 30px auto 0; background-color: #0047AB; color: white !important; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: bold; max-width: 200px; transition: background-color 0.3s ease; }/* Hover do botão "Veja mais" */ .ver-mais-btn:hover { background-color: #002b70; color: white !important; }/* ===== RESPONSIVIDADE ===== *//* Até 992px: vira 2 colunas */ @media (max-width: 992px) { .blocos-categorias { grid-template-columns: repeat(2, 1fr); } }/* Até 600px: vira 1 coluna */ @media (max-width: 600px) { .blocos-categorias { grid-template-columns: 1fr; }.bloco-categoria .thumb img { height: auto; /* Garante que não estique a imagem no mobile */ }.titulo-categoria { font-size: 26px; /* Diminui o tamanho do título */ } }Veja mais