/* =========================================================
   MOD CASESOCB – CATEGORIAS
   Estilo: Grayscale institucional
   ========================================================= */

/* Wrapper geral */
.casesocb-categorias {
    width: 100%;
    overflow: hidden;
}

/* Lista principal */
.casesocb-categorias__list {
    display: flex;
    flex-wrap: nowrap; /* nunca quebra linha */
    justify-content: center; /* centraliza horizontal */
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 0; /* separação vem da barra */
}

/* Cada item */
.casesocb-categorias__item {
    display: flex;
    align-items: center;
}

/* Barra separadora (exceto o último item) */
.casesocb-categorias__item:not(:last-child)::after {
    content: "";
    display: block;
    width: 1px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.15);
    margin: 0 26px;
}

/* Botão (sem aparência de botão) */
.casesocb-categorias__btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;

    /* ajuste: evita “highlight” estranho em mobile */
    -webkit-tap-highlight-color: transparent;

    /* ajuste: transição suave sem afetar layout */
    transition: transform 0.2s ease;
}

/* ajuste: foco acessível (teclado) sem mudar visual geral */
.casesocb-categorias__btn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 6px;
    border-radius: 6px;
}

/* Container da imagem */
.casesocb-categorias__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 64px; /* ALTURA PADRÃO */
}

/* Imagem da categoria */
.casesocb-categorias__img {
    height: 64px; /* todas iguais */
    width: auto; /* mantém proporção */
    max-width: 220px;
    object-fit: contain;
    display: block;

    /* ajuste: evita “borrado” em alguns browsers ao aplicar filter */
    backface-visibility: hidden;
    transform: translateZ(0);

    /* Estilo visual */
    filter: grayscale(100%);
    opacity: .5;

    /* ajuste: sua transição estava quebrando em múltiplas linhas */
    transition:
            filter 0.25s ease,
            opacity 0.25s ease,
            transform 0.25s ease;
}

/* Hover (leve destaque, sem quebrar identidade) */
.casesocb-categorias__btn:hover .casesocb-categorias__img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Estado ativo (JS controla via aria-pressed) */
.casesocb-categorias__btn[aria-pressed="true"] .casesocb-categorias__img {
    filter: none;
    opacity: 1;
    transform: scale(1.03);
}

/* ajuste: respeitar usuários com redução de movimento */
@media (prefers-reduced-motion: reduce) {
    .casesocb-categorias__btn,
    .casesocb-categorias__img {
        transition: none;
    }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* Tablets */
@media (max-width: 991px) {
    .casesocb-categorias__media {
        height: 56px;
    }

    .casesocb-categorias__img {
        height: 56px;
        max-width: 200px;
    }

    .casesocb-categorias__item:not(:last-child)::after {
        height: 36px;
        margin: 0 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .casesocb-categorias__list {
        justify-content: center; /* alinha à esquerda */
        overflow-x: auto;
        padding: 0 12px;

        /* ajustes: scroll mais “limpo” */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
    }

    /* ajuste: esconder scrollbar no WebKit sem mexer no layout */
    .casesocb-categorias__list::-webkit-scrollbar {
        display: none;
    }

    /* ajuste: snap por item (fica bem gostoso no mobile) */
    .casesocb-categorias__item {
        scroll-snap-align: start;
    }

    .casesocb-categorias__media {
        height: 48px;
    }

    .casesocb-categorias__img {
        height: 48px;
        max-width: 180px;
    }

    .casesocb-categorias__item:not(:last-child)::after {
        height: 30px;
        margin: 0 16px;
    }
}