/*
 * Template: Популярные таксономии
 * Description: Стили для шаблона "Популярные таксономии".
 */

.husky-greed-popular-tax {
    margin-bottom: 20px; /* Отступ снизу для всего блока */
}

.husky-greed-popular-tax .popular-tax-block {
    margin-bottom: 30px; /* Отступ снизу для каждого блока колонок */
    /* border: 1px solid #eee; */ /* Убрана граница блока, теперь она будет у колонок */
    padding: 15px; /* Оставляем внутренний отступ блока */
    /* background-color: #fff; */ /* Убран фон блока, теперь он будет у колонок */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Оставляем тень блока */

    /* Делаем блок грид-контейнером для колонок */
    display: grid;
    gap: 20px; /* Расстояние между колонками */
    /* grid-template-columns будет задаваться классами columns-X */
}

/* Стили для разного количества колонок В БЛОКЕ */
.husky-greed-popular-tax .popular-tax-block.columns-1 {
    grid-template-columns: repeat(1, 1fr); /* 1 колонка */
}
.husky-greed-popular-tax .popular-tax-block.columns-2 {
    grid-template-columns: repeat(2, 1fr); /* 2 колонки */
}
.husky-greed-popular-tax .popular-tax-block.columns-3 {
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
}
.husky-greed-popular-tax .popular-tax-block.columns-4 {
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
}
/* Добавь стили для других значений columns если нужно */


.husky-greed-popular-tax .popular-tax-column {
    /* Стили для каждой отдельной колонки (термина) */
    border: 1px solid #fff; /* Белая граница */
    background-color: #fff; /* Белый фон */
    border-radius: 8px; /* Скругленные углы */
    padding: 15px; /* Внутренний отступ */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Добавлена легкая тень для визуального отделения */
    display: flex; /* Используем flexbox для центрирования заголовка и списка */
    flex-direction: column; /* Элементы внутри колонки располагаются вертикально */
}

.husky-greed-popular-tax .popular-tax-column .column-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em; /* Размер заголовка колонки (термина) */
    text-align: center; /* Центрируем заголовок колонки */
}

.husky-greed-popular-tax .popular-tax-column .column-title a {
    text-decoration: none;
    color: #333; /* Цвет ссылки заголовка колонки */
}

.husky-greed-popular-tax .popular-tax-column .column-title a:hover {
    color: #0073aa; /* Цвет ссылки заголовка колонки при наведении */
}


.husky-greed-popular-tax .column-post-list {
    list-style: none; /* Убираем стандартные маркеры списка */
    margin: 0;
    padding: 0;
    flex-grow: 1; /* Список занимает все доступное вертикальное пространство */
}

.husky-greed-popular-tax .column-post-list .post-item {
    margin-bottom: 15px; /* Отступ между постами в колонке */
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee; /* Разделитель между постами */
    display: flex; /* Для расположения миниатюры и контента (заголовок + мета) в ряд */
    align-items: flex-start; /* Выравнивание элементов в начале */
    gap: 10px; /* Расстояние между миниатюрой и контентом */
}

.husky-greed-popular-tax .column-post-list .post-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; /* Убираем разделитель у последнего элемента */
}

.husky-greed-popular-tax .column-post-list .post-item .post-thumbnail {
    flex-shrink: 0; /* Миниатюра не сжимается */
    width: 100px; /* Увеличена ширина */
    height: 100px; /* Увеличена высота для квадратного превью */
    overflow: hidden; /* Обрезаем все, что выходит за границы контейнера */
    position: relative; /* Нужно для корректной работы transform на дочернем элементе */
}

.husky-greed-popular-tax .column-post-list .post-item .post-thumbnail img {
    display: block;
    width: 100%;
    height: 100%; /* Заставляем изображение заполнить контейнер по высоте */
    object-fit: cover; /* Обрезать, чтобы заполнить контейнер без искажений */
    transition: transform 0.3s ease; /* Плавный переход для эффекта увеличения */
}

/* Эффект увеличения картинки при наведении */
.husky-greed-popular-tax .column-post-list .post-item .post-thumbnail img:hover {
    transform: scale(1.1); /* Увеличиваем изображение на 10% */
}

.husky-greed-popular-tax .column-post-list .post-item .post-content {
    flex-grow: 1; /* Контент занимает оставшееся место */
}

.husky-greed-popular-tax .column-post-list .post-item .post-title {
    margin: 0 0 5px 0; /* Убран нижний отступ, добавлен небольшой отступ снизу для мета-информации */
    font-size: 0.9em; /* Размер заголовка поста в списке */
    line-height: 1.4;
}

.husky-greed-popular-tax .column-post-list .post-item .post-title a {
    text-decoration: none;
    color: #555; /* Цвет ссылки заголовка поста */
}

.husky-greed-popular-tax .column-post-list .post-item .post-title a:hover {
    color: #0073aa; /* Цвет ссылки заголовка поста при наведении */
}

/* Стили для новой строки с датой и просмотрами */
.husky-greed-popular-tax .column-post-list .post-item .post-meta {
    font-size: 0.8em; /* Размер шрифта меньше, чем у заголовка */
    color: #888; /* Серый цвет текста */
    margin-top: 5px; /* Небольшой отступ сверху */
    /* --- Добавлены стили для выравнивания в строку --- */
    display: flex; /* Включаем Flexbox */
    align-items: center; /* Выравниваем элементы по центру вертикали */
    gap: 5px; /* Добавляем небольшой промежуток между датой и просмотрами */
    flex-wrap: wrap; /* Разрешаем перенос на новую строку, если места не хватит (маловероятно для даты+просмотров) */
    /* --- Конец добавленных стилей --- */
}

/* Если шорткод [post-views] оборачивает вывод в конкретный тег (например, span),
можно добавить стили для него, чтобы нейтрализовать внешние margin/padding */
/* .husky-greed-popular-tax .post-meta span.post-views-count {
    margin: 0;
    padding: 0;
    display: inline; // Убедимся, что это строчный элемент внутри flex-контейнера
} */
/* Подставь правильный класс/тег, если знаешь структуру вывода шорткода */


.husky-greed-popular-tax .no-posts-found {
    font-style: italic;
    color: #888;
    text-align: center;
    /* Если сообщение находится внутри списка, оно будет элементом списка */
    /* Для центрирования в колонке могут потребоваться дополнительные стили */
}

.husky-greed-popular-tax .no-popular-terms {
    font-style: italic;
    color: #888;
    text-align: center;
    /* Это сообщение выводится вне блоков, занимает полную ширину */
}


/* Медиа-запросы для адаптивности */
/* На маленьких экранах блоки могут переключаться на меньшее количество колонок или одну колонку */
@media (max-width: 992px) { /* Пример брейкпоинта */
    .husky-greed-popular-tax .popular-tax-block.columns-3,
    .husky-greed-popular-tax .popular-tax-block.columns-4 {
        grid-template-columns: repeat(2, 1fr); /* Переключаемся на 2 колонки */
    }
}

@media (max-width: 768px) { /* Пример брейкпоинта */
    .husky-greed-popular-tax .popular-tax-block.columns-2,
    .husky-greed-popular-tax .popular-tax-block.columns-3,
    .husky-greed-popular-tax .popular-tax-block.columns-4 {
        grid-template-columns: repeat(1, 1fr); /* На планшетах/мобильных по одной колонке */
    }
}