/**
 * Brand Logo Grid Widget Styles
 * 十字分割线 + 灰度悬停效果
 */

.blg-grid {
    --blg-columns: 3;
    --blg-divider-color: #e0e0e0;
    --blg-divider-width: 1px;
    --blg-grayscale: 100%;
    --blg-transition: 0.3s;
    display: grid;
    grid-template-columns: repeat(var(--blg-columns), 1fr);
}

/* 十字分割线：使用 border 模拟 */
.blg-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: var(--blg-divider-width) solid var(--blg-divider-color);
    border-bottom: var(--blg-divider-width) solid var(--blg-divider-color);
    padding: 40px;
    box-sizing: border-box;
}

/* JS 动态添加类：最后一列去掉右边框 */
.blg-item.blg-last-col {
    border-right: none;
}

/* JS 动态添加类：最后一行去掉下边框 */
.blg-item.blg-last-row {
    border-bottom: none;
}

/* Logo 图片样式 */
.blg-item img {
    display: block;
    width: 100%;
    max-width: 140px;
    height: auto;
    filter: grayscale(var(--blg-grayscale, 100%));
    opacity: 0.6;
    transition: filter var(--blg-transition, 0.3s) ease, opacity var(--blg-transition, 0.3s) ease;
    object-fit: contain;
}

/* 悬停恢复原色 */
.blg-item:hover img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

.blg-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 手机端：不显示分割线 */
@media (max-width: 767px) {
    .blg-grid {
        --blg-columns: 2 !important;
    }

    .blg-item {
        border-right: none !important;
        border-bottom: none !important;
        padding: 20px;
    }
}