/* ------------------------------------------------------------------------- */
/* 1. Общие стили контейнеров и типографика (если нужно) */
/* ------------------------------------------------------------------------- */

/* Основной контейнер страницы, если нужно центрировать контент и задать отступы */
.wp-block-column[style*="flex-basis:90%"] {
    max-width: 1200px; /* Ограничим максимальную ширину для больших экранов */
    margin: 0 auto;    /* Центрируем контейнер */
    padding: 20px;
}

/* ------------------------------------------------------------------------- */
/* 2. Стилизация сетки клиентов */
/* ------------------------------------------------------------------------- */

/* Контейнер сетки для логотипов */
.wp-block-group.is-layout-grid {
    display: grid;
    /* Настраиваем сетку: 4 колонки для десктопа, с адаптацией к размеру экрана */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 30px; /* Отступы между элементами сетки */
    padding: 40px 0; /* Отступы сверху и снизу для всего блока сетки */
}

/* Элемент сетки, содержащий каждое изображение */
.wp-block-group.is-layout-grid .wp-block-image {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Немного закругляем углы */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Мягкая тень */
    overflow: hidden; /* Важно для скрытия частей изображения, выходящих за границы */
    display: flex; /* Используем flexbox для центрирования логотипа */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center;   /* Центрируем по вертикали */
    padding: 15px; /* Внутренние отступы внутри блока логотипа */
    aspect-ratio: 1 / 1; /* Принудительно делаем блок квадратным */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Эффект при наведении */
.wp-block-group.is-layout-grid .wp-block-image:hover {
    transform: translateY(-5px) scale(1.02); /* Немного приподнимаем и увеличиваем */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Более выраженная тень */
}

/* !!! САМОЕ ВАЖНОЕ: Стилизация самих изображений логотипов !!! */
.wp-block-group.is-layout-grid .wp-block-image img {
    width: 100%;  /* Изображение занимает всю ширину контейнера */
    height: 100%; /* Изображение занимает всю высоту контейнера */
    object-fit: contain; /* Вписывает изображение в контейнер, сохраняя пропорции */

    /* Убраны: filter: grayscale(100%); и opacity: 0.8; */
    transition: transform 0.3s ease-in-out; /* Оставляем плавность для трансформаций */
}

/* Эффект при наведении на изображение - убран filter и opacity, оставляем только трансформации контейнера */
.wp-block-group.is-layout-grid .wp-block-image:hover img {
    /* Если вы хотите, чтобы само изображение тоже немного масштабировалось при наведении, можно добавить: */
    /* transform: scale(1.05); */
}

/* ------------------------------------------------------------------------- */
/* 3. Адаптивность для разных размеров экрана */
/* ------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .wp-block-group.is-layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 3-4 колонки на планшетах */
        gap: 25px;
    }
}

@media (max-width: 600px) {
    .wp-block-group.is-layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 2-3 колонки на телефонах */
        gap: 20px;
        padding: 20px 0;
    }
    .wp-block-group.is-layout-grid .wp-block-image {
        padding: 10px;
    }
}