/* Стили для сетки рубрик */
.skillmind-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 столбца на ПК и планшетах */
    gap: 12px; /* Отступы между элементами */
    padding: 20px; /* Внутренний отступ контейнера */
    margin: 20px auto; /* Отступы сверху/снизу и центрирование */
    max-width: 1200px; /* Максимальная ширина */
    /* --- Стили для выделения в блок --- */
    background-color: var(--wpsc-white-bg, #ffffff); /* Белый фон */
    border: 1px solid var(--wpsc-light-bg, #e0e0e0); /* Легкая граница */
    border-radius: 8px; /* Скругление углов */
    /* --- Конец стилей блока --- */
}

.skillmind-grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px; /* Внутренний отступ элемента */
    /* --- Стили для выделения каждой плитки (остаются) --- */
    background-color: var(--wpsc-white-bg, #ffffff); /* Белый фон плитки */
    border: 1px solid var(--wpsc-light-bg, #e0e0e0); /* Легкая граница */
    border-radius: 6px; /* Скругление углов у плитки */
    /* --- Конец стилей выделения --- */
    text-decoration: none; /* Убираем подчеркивание ссылки */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные эффекты */
    /* --- Цвета ссылок, используя переменные --- */
    color: var(--wpsc-text-color, #333); /* Темный цвет текста по умолчанию */
    /* --- Конец цвета --- */
}

.skillmind-grid-item:hover {
    transform: translateY(-1px); /* Легкий подъем при наведении */
    /* --- Тень при наведении --- */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Тень */
    /* --- Цвет при наведении, используя переменную --- */
    color: var(--wpsc-primary-color, #0073aa); /* Синий цвет при наведении */
    /* --- Конец цвета --- */
}

.skillmind-grid-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.skillmind-grid-image-wrapper {
    margin-bottom: 6px; /* Отступ между изображением и названием */
    /* Опционально: можно задать размер wrapper'а для лучшего контроля */
    /* width: 60px;
    height: 60px; */
}

.skillmind-grid-image {
    /* --- Новые стили для 60x60 --- */
    width: 128px;          /* Фиксированная ширина */
    height: 128px;         /* Фиксированная высота */
    object-fit: cover;    /* Изображение заполняет область 60x60, обрезая при необходимости */
    /* --- Конец новых стилей --- */
    border-radius: 2px; /* Скругление изображения */
}

.skillmind-grid-title {
    font-size: 0.85rem; /* Размер шрифта названия */
    margin: 0;
    color: inherit; /* Наследует цвет ссылки */
}

/* Скрытие на мобильных устройствах (ширина до 768px) */
@media (max-width: 768px) {
    .skillmind-grid-container {
        display: none; /* Скрываем на мобильных */
    }
}

/* Адаптация под темную тему */
@media (prefers-color-scheme: dark) {
    .skillmind-grid-container {
        background-color: var(--wpsc-white-bg, #1b1a26); /* Фон контейнера темной темы */
        border-color: var(--wpsc-light-bg, #232136); /* Граница контейнера темной темы */
    }

    .skillmind-grid-item {
        background-color: var(--wpsc-white-bg, #1b1a26); /* Фон плитки темной темы */
        border-color: var(--wpsc-light-bg, #232136); /* Граница плитки темной темы */
        color: var(--wpsc-text-color, #e3e3e3); /* Светлый цвет текста */
    }

    .skillmind-grid-item:hover {
        color: var(--wpsc-primary-color, #3276ff); /* Акцентный цвет при наведении */
    }

    .skillmind-grid-title {
        color: inherit; /* Наследует светлый цвет */
    }
}

/* Адаптация для явной темной темы */
body.dark-theme .skillmind-grid-container {
    background-color: var(--wpsc-white-bg, #1b1a26); /* Фон контейнера темной темы */
    border-color: var(--wpsc-light-bg, #232136); /* Граница контейнера темной темы */
}

body.dark-theme .skillmind-grid-item {
    background-color: var(--wpsc-white-bg, #1b1a26); /* Фон плитки темной темы */
    border-color: var(--wpsc-light-bg, #232136); /* Граница плитки темной темы */
    color: var(--wpsc-text-color, #e3e3e3); /* Светлый цвет текста */
}

body.dark-theme .skillmind-grid-item:hover {
    color: var(--wpsc-primary-color, #3276ff); /* Акцентный цвет при наведении */
}

body.dark-theme .skillmind-grid-title {
    color: inherit; /* Наследует светлый цвет */
}