/* ==========================================================================
   BGS Marcas — Frontend CSS
   Estilos base para grid e carrossel de logos.
   Personalize livremente no style.css do tema.
   ========================================================================== */

/*
 * Item individual (compartilhado entre grid e carrossel)
 */
.bgs-marca-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: transparent;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

a.bgs-marca-item {
    text-decoration: none;
}

a.bgs-marca-item:hover,
a.bgs-marca-item:focus {
    opacity: 0.75;
    transform: scale(1.04);
    outline: none;
}

.bgs-marca-item img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/*
 * Grid
 */
.bgs-marcas-grid {
    /* colunas são definidas via <style> inline pelo shortcode */
}

/*
 * Carrossel (Swiper)
 */
.bgs-marcas-swiper {
    padding-bottom: 40px !important; /* espaço para a paginação */
}

.bgs-marcas-swiper .swiper-button-prev,
.bgs-marcas-swiper .swiper-button-next {
    color: var(--color-orange, #fe5400);
}

.bgs-marcas-swiper .swiper-button-prev::after,
.bgs-marcas-swiper .swiper-button-next::after {
    font-size: 1.25rem;
}

.bgs-marcas-swiper .swiper-pagination-bullet-active {
    background: var(--color-orange, #fe5400);
}

.bgs-swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}