/* Estilos para a grade de livros */
.livros-grid {
    display: flex; /* Use display flex para alinhar os livros lado a lado */
    flex-wrap: wrap; /* Para lidar com quebras de linha responsivas */
    gap: 20px; /* Espaço entre os livros */
    justify-content: flex-start; /* Alinhar os livros à esquerda */
}

/* Estilos para cada card de livro */
.livro-card {
    border: 1px solid #ddd;
    padding: 20px;
    flex: 0 0 calc(33.33% - 20px); /* 3 colunas lado a lado com margem entre elas */
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    position: relative;
}

/* Estilos para o contêiner da imagem */
.livro-imagem-container {
    width: 100%;
    padding-bottom: 150%; /* Proporção de aspecto 2:3 (ajuste conforme necessário) */
    position: relative;
    overflow: hidden;
}

.livro-imagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Preserva a proporção de aspecto e corta a imagem se necessário */
    transition: filter 0.3s ease; /* Transição para o efeito de escurecimento */
}

/* Adicione uma nova classe para imagens retangulares */
.livro-imagem.retangular {
    object-fit: contain; /* Mantém a proporção de aspecto e exibe a imagem inteira sem cortes */
}

/* Adicione uma nova classe para imagens quadradas se necessário */
.livro-imagem.quadrada {
    /* Não é necessário ajuste adicional, pois o object-fit: cover já funciona bem para imagens quadradas */
}

.livro-card:hover .livro-imagem {
    filter: brightness(80%); /* Efeito de escurecimento quando passa o mouse por cima */
}

/* Estilos para o texto abaixo da imagem */
.livro-texto {
    position: absolute;
    bottom: 5px; /* Ajuste conforme necessário para a distância do texto à parte inferior */
    left: 10px; /* Ajuste conforme necessário para a distância do texto à esquerda */
    right: 10px; /* Ajuste conforme necessário para a distância do texto à direita */
    color: #333; /* Cor do texto */
    font-size: 14px; /* Tamanho da fonte do texto */
}

.book-tag {
    background-color: #3498db;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10px;
    margin-bottom: 4px;
    display: inline-block; /* Para aparecer ao lado do título */
}
.saiba-mais {
    display: none; /* Inicialmente, o link "Saiba Mais" está oculto */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
}

.livro-card:hover .saiba-mais {
    display: block; /* Exibe o link "Saiba Mais" quando passa o mouse por cima do card */
}

.esgotado-tag {
    background-color: #ff0000; /* Cor de fundo vermelha para indicar "esgotado" */
    color: #ffffff; /* Texto branco para contrastar com o fundo */
    padding: 5px; /* Espaçamento interno */
    border-radius: 5px; /* Borda arredondada */
    font-weight: bold; /* Texto em negrito */
    margin-top: 10px; /* Espaçamento superior para separar dos elementos vizinhos */
}

/* Estilo adicional para o ícone "esgotado" (opcional) */
.esgotado-icon {
    max-width: 50px; /* Largura máxima do ícone esgotado */
    height: auto; /* Altura ajustável */
}