/* style/stores_entretenimento.css */

/* --- Estilos da Seção de Entretenimento --- */
.entretenimento {
    display: flex;            /* Alinha os ícones lado a lado */
    justify-content: center;  /* Centraliza os ícones no container */
    gap: 20px;                /* Espaço moderno e consistente entre os ícones */
    padding: 10px;            /* Espaço interno para evitar que os ícones fiquem colados nas bordas */
}

.card-entretenimento {
    width: 100px;             /* Largura do card do ícone */
    height: 100px;            /* Altura do card do ícone */
    display: flex;
    flex-direction: column;   /* Empilha os itens verticalmente */
    justify-content: center;
    align-items: center;
    text-decoration: none;    /* Remove o sublinhado do link */
    background-color: var(--cor-borda-card);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-entretenimento:hover {
    transform: translateY(-5px); /* Efeito de "levantar" ao passar o mouse */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.card-entretenimento img {
    width: 50%;         /* Levemente menor para dar espaço ao texto */
    margin-bottom: 8px; /* Empurra o texto para baixo com folga */
}  

.card-entretenimento span {
    font-size: 0.8rem;      /* Tamanho da fonte da legenda */
    font-weight: 600;       /* Deixa a fonte um pouco mais forte */
    color: #5a6778;       /* Cor do texto da legenda */
    text-align: center;
}

/* --- Responsividade para Telas Menores --- */
@media (max-width: 768px) {
    .entretenimento {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Cria as 4 colunas iguais */
        justify-items: center; /* Centraliza os cards dentro das colunas */
        gap: 10px;             /* Espaço entre os ícones na grade */
    }
    .card-entretenimento {
        width: 80px;           /* Reduz a largura do card em telas pequenas */
        height: 80px;          /* Reduz a altura do card em telas pequenas */
    }
    .card-entretenimento img {
        width: 45%;            /* Reduz o tamanho da imagem em telas pequenas */
    }
    .card-entretenimento span {
        font-size: 0.7rem;     /* Reduz o tamanho da fonte da legenda em telas pequenas */
        white-space: nowrap;   /* Evita que o texto quebre em várias linhas */
    }
}

@media (max-width: 390px) {
    .entretenimento {
        display: flex;                /* Volta para flex para alinhar horizontalmente */
        overflow-x: auto;            /* Ativa o scroll horizontal */
        scroll-snap-type: x mandatory; /* MÁGICA: Força o travamento no item */
        gap: 15px;
        padding: 15px 20px;          /* Espaço nas pontas para o primeiro/último card */
        justify-content: flex-start; /* Alinha no início para o scroll funcionar */
        -webkit-overflow-scrolling: touch; /* Deixa o scroll suave no iPhone */
    }
    /* Esconde a barra de rolagem para o visual ficar limpo */
    .entretenimento::-webkit-scrollbar {
        display: none;
    }
    .card-entretenimento {
        flex: 0 0 90px;              /* NÃO estica e mantém 90px de largura sempre */
        height: 90px;
        scroll-snap-align: center;   /* MÁGICA: O card trava no centro da tela ao rolar */
        background-color: var(--cor-borda-card);
        border-radius: 16px;
    }
}