/* Сетка для логотипов (жестко 3 колонки на десктопе и планшетах) */
.partners-img {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ровно 3 в ряд, плитки равномерно растягиваются */
    gap: 24px;
    width: 100%;
}

/* Обертка логотипа */
.partner-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px; /* Слегка увеличили высоту под пропорции широких плиток */
    padding: 24px;
    
    /* Цвета фона по умолчанию: мягкий нейтральный серый */
    background-color: #f4f4f6; 
    
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
    box-sizing: border-box;
    
    opacity: 0;
    transform: translateY(30px);
    
    /* Плавный переход для всех состояний */
    transition: 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
        box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
        background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), /* Плавный переход фона */
        border-color 0.8s ease,
        opacity 0.8s ease;
}

/* Настройки изображения */
.partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%) opacity(60%); 
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Активация появления по скроллу (из script.js) */
.partner-logo-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Десктопная анимация при наведении */
@media (min-width: 1024px) {
    .partner-logo-wrapper:hover {
        transform: translateY(-6px);
        border-color: rgba(0, 0, 0, 0.05);
        box-shadow: 0 20px 38px rgba(0, 0, 0, 0.06);
        
        /* Бежевый фон при наведении */
        background-color: #f3ede2; 
    }
    
    .partner-logo-wrapper:hover .partner-logo {
        filter: grayscale(0%) opacity(100%);
    }
}

/* Адаптив под мобильные телефоны */
@media (max-width: 767px) {
    .partners-img {
        grid-template-columns: repeat(2, 1fr); /* На мобильных выстраиваем по 2 в ряд (ровно 3 ряда для 6 плиток) */
        gap: 12px;
    }
    .partner-logo-wrapper {
        height: 100px;
        padding: 16px;
    }
}