/* /css/gallery.css */

nav {
    font-weight: 500;
}
/* Карточка */
.gallery-card {
    width: 100%;
    /* Плавное появление карточки при загрузке и фильтрации */
    animation: cardFadeIn 0.3s ease-out forwards;
}

/* Класс для мгновенного скрытия JS-ом */
.hidden-card {
    display: none !important;
}

/* Родная браузерная анимация */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================
   СТИЛИ ДЛЯ КНОПОК ФИЛЬТРОВ (ТЕГОВ)
   ========================================= */

/* 1. БАЗОВОЕ СОСТОЯНИЕ (Неактивная серая кнопка) */
.filter-btn {
    background-color: #f3f4f6; /* bg-gray-100 */
    border-color: #e5e7eb;     /* border-gray-200 */
    color: var(--color-dark);
}
.filter-btn .filter-badge {
    background-color: #ffffff;
    color: var(--color-dark);
}

/* 2. ХОВЕР НЕАКТИВНОЙ КНОПКИ */
.filter-btn:hover {
    background-color: #e5e7eb; /* bg-gray-200 */
}

/* 3. АКТИВНОЕ СОСТОЯНИЕ (Выбранный черный тег) */
.filter-btn.active {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-light);
}
.filter-btn.active .filter-badge {
    background-color: var(--color-light);
    color: var(--color-dark);
}

/* 4. ХОВЕР АКТИВНОЙ КНОПКИ (Чтобы не становилась серой) */
.filter-btn.active:hover {
    opacity: 0.9;
}