.products {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}

.container {
    display: flex;
    height: 100%;
    width: 100%;
}

.products ul {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
    overflow: hidden;
}

li.product-item {
    flex-basis: 25%; /* Divide em 4 colunas de tamanho igual */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
    transition: flex-basis 0.6s ease, background-color 0.6s ease; /* Separada a transição do tamanho */
    background-repeat: no-repeat;
    height: 100%;
    min-height: 400px; /* Altura mínima de 400px */
}

/* Camada escura por cima da imagem quando NÃO está em hover */
li.product-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Camada com opacidade de 50% */
    z-index: 1;
    transition: background-color 0.6s ease;
}

li.product-item.active,
li.product-item:hover {
    flex-basis: 33%; /* Ocupa 33% da tela no hover */
}

/* Adiciona a camada com a variável azul sobre a imagem ao hover */
li.product-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0); /* Transparente por padrão */
    transition: background-color 0.6s ease;
    z-index: 2;
}

li.product-item.active::after,
li.product-item:hover::after {
    background-color: var(--color-primary); /* Usa a variável de cor primária no hover */
}

li.product-item .section-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: white;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    z-index: 3; /* Para o texto aparecer sobre a camada */
}

li.product-item.active .section-title,
li.product-item:hover .section-title {
    display: none; /* Esconde o título no hover/ativo */
}

li.product-item .product-description {
    display: block;
    opacity: 0; /* Texto invisível por padrão */
    transition: opacity 0.5s ease-in-out; /* Transição suave tanto na entrada quanto na saída */
    transition-delay: 0s; /* Sem atraso para começar a fade-in */
    position: absolute;
    padding: 20px;
    color: #fff;
    text-align: center;
    z-index: 3; /* Mantém o texto por cima da camada */
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Quando o item estiver expandido, o texto aparece após um delay */
li.product-item.active .product-description,
li.product-item:hover .product-description {
    opacity: 1; /* Texto visível após a transição */
    transition-delay: 0.3s; /* Aparece após 0.3 segundos (ajuste conforme necessário) */
}

/* Para o fade-out, o texto some antes de encolher o item */
li.product-item:not(:hover) .product-description {
    opacity: 0; /* Começa o fade-out do texto */
    transition-delay: 0s; /* Sem atraso para o fade-out */
    transition: opacity 0.3s ease-in-out; /* Fade-out mais rápido */
}

/* Ajustes para mobile */
@media (max-width: 992px) {
    #produtos ul {
        flex-direction: column;
    }
 
    li.product-item {
        flex-basis: 100%;
        height: auto;
        margin-bottom: 20px;
        min-height: 400px; /* Altura mínima de 400px também no mobile */
    }

    li.product-item.active {
        height: auto; /* Altura automática para expandir conforme o conteúdo */
    }

    li.product-item .section-title {
        position: static;
        font-size: 1.5rem;
    }

    li.product-item.active .product-description {
        display: block;
        position: static; /* Deixa o texto posicionado dentro do fluxo da página */
        width: auto;
        transform: none;
        padding: 20px;
        background-color: var(--color-primary); /* Fundo azul no mobile */
        margin-top: 10px;
        margin-bottom: 10px; /* Respiro embaixo */
    }
}