/* Incio de configuração de grid para pagina tds as news */
.grid-all-news {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 4rem;
}

/* Incio de configuração de grid-itens de ambos os grid acima mencionados */
.grid-news-item {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    justify-self: center;
}

.grid-news-item img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    box-shadow: var(--primary-shadow);
}

.grid-news-item:hover a {
    color: var(--secundary-color);
}

/* efeito zoom no grid item */
.grid-news-item:hover {
    transform: scale(1.05);
}

/* INICIO Efeito para a linha horizontal e vertical */
.hr-line-btn {
    height: 4px;
    width: 2rem;
    border-radius: 40px;
    margin-right: 0.5rem;
    background-color: var(--secundary-color);
    transition: width 0.3s ease-in-out;
}

.grid-news-item:hover .hr-line-btn {
    width: 5rem;
}

.border {
    width: 10px;
    height: 70%;
    background-color: var(--secundary-color);
    margin-right: 10px;
    border-radius: 40px;
    border: 0px solid transparent !important;
}

.info-news p {
    display: -webkit-box;
    /* Necessário para -webkit-line-clamp */
    -webkit-line-clamp: 2;
    /* Limita o texto a 2 linhas */
    -webkit-box-orient: vertical;
    /* Necessário para -webkit-line-clamp */
    overflow: hidden;
    /* Esconde o conteúdo que excede a caixa */
    text-overflow: ellipsis;
    /* Adiciona "..." ao final do texto cortado */
    /* Opcional: Para melhor compatibilidade e controle de largura */
    max-width: 100%;
    /* Ou defina uma largura fixa se necessário */
    word-wrap: break-word;
    /* Garante que palavras longas quebrem */

}

.read-more-btn {
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
}

.grid-news-item:hover .border {
    display: none;
}

.grid-news-item:hover .read-more-btn {
    opacity: 1;
    visibility: visible;
}

/* Inicio de css para pagina de noticia individual */
.banner-news {
    width: 100%;
    height: fit-content;
    box-shadow: var(--primary-shadow);
}

.banner-news::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    /* ajuste a opacidade conforme desejar */
    pointer-events: none;
    z-index: 1;
}

.banner-news img {
    width: 100%;
    height: auto;
    object-fit: cover;

}

.new-content {
    top: -5rem;
    left: 16.8%;
    background-color: #efefef;
    padding: 2rem;
    z-index: 1000;
}

.date {
    border-left: 5px solid var(--secundary-color);
    padding-left: 1rem;
    margin-left: 3rem;
    margin-top: 0.5rem;
}

p.creditos {
    color: rgb(0, 0, 0, 0.5);
    text-align: right;
}