/* Стили для списка элементов */
.ElementsPage {
    background-color: #fff;
    border-radius: var(--radius-l);
    padding: var(--gap-l);
}

.ElementsPage_Filter {
    position: sticky;
    top: 0;
    background-color: var(--color-background-level-1);
    padding-top: var(--gap-s);
    padding-left: var(--gap-l);
    padding-right: var(--gap-l);
    padding-bottom: var(--gap-l);
    margin-bottom: var(--gap-l);
    margin-left: calc(var(--gap-l) * -1);
    margin-right: calc(var(--gap-l) * -1);
    z-index: 100;
    transition: box-shadow 0.3s ease, border-bottom-color 0.3s ease;
    border-bottom: 1px solid transparent; /* Для плавного перехода */
}
@media (max-width: 480px) {
    .ElementsPage_Filter {
        margin-left: calc(var(--gap-ms) * -1);
        margin-right: calc(var(--gap-ms) * -1);
        padding-left: var(--gap-ms);
        padding-right: var(--gap-ms);
    }
}

.ElementsPage_Filter.is-stuck {
    border-bottom-color: var(--color-border-base);
    box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Поисковая строка */
.ElementsPage_Search {
    margin-bottom: var(--gap-l);
}

.ElementsSearch_Input {
    width: 100%;
    display: flex;
    padding: var(--gap-xs);
    padding-right: var(--gap-s);
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-xs);
    border-radius: var(--radius-s);
    background: var(--color-background-level-1);
    border: 1px solid var(--color-border-base);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-regular);
}

.ElementsSearch_Input input {
    border: none;
    background: transparent;
    width: 100%;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-regular);
}

.ElementsSearch_Input input:focus {
    outline: none;
}

.ElementsSearch_Input .material-icons-round {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.ElementsSearch_Input:focus-within {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.ElementsSearch_Clear {
    display: flex;
    align-items: center;
    gap: var(--gap-xxs);
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--gap-xxs) var(--gap-xs);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ElementsSearch_Clear:hover {
    background-color: var(--color-neutral-200);
    color: var(--color-text-secondary);
}

.ElementsSearch_Clear .material-icons-round {
    font-size: 16px;
}

.ElementsSearch_ClearText {
    font-size: var(--font-size-sm);
}

/* Категории элементов */

.ElementsCategories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
}

.ElementCategory {
    display: inline-block;
    padding: var(--gap-xs) var(--gap-s);
    background-color: var(--color-neutral-200);
    border-radius: var(--radius-m);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ElementCategory:hover {
    background-color: var(--color-neutral-300);
}

.ElementCategory.active {
    background-color: var(--color-neutral-700);
    color: var(--color-text-inverted);
}

/* Сетка элементов - Masonry */
.ElementsGrid {
    position: relative;
    width: 100%;
}

.masonry-grid {
    position: relative;
    width: 100%;
    display: flex;
    gap: var(--gap-s);
    align-items: flex-start;
}

.masonry-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
    flex: 1;
    min-width: 0; /* Позволяет колонкам сжиматься */
}

.masonry-item {
    width: 100%;
    box-sizing: border-box;
}

/* Карточка элемента */
.ElementCard {
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-m);
    /* overflow: hidden; */
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.ElementCard:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Заголовок карточки */
.ElementCard_Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-m);
    position: relative;
}

.ElementCard_Title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    flex: 1;
}

/* Контейнер для иконки информации и тултипа */
.ElementCard_InfoContainer {
    position: relative;
    display: inline-block;
}

@media (max-width: 480px) {
    .ElementCard_InfoContainer {
        display: none;
    }
}

.ElementCard_Info {
    font-size: var(--font-size-lg);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.ElementCard_Info:hover {
    color: var(--color-primary);
}

/* Тултип с описанием */
.ElementCard_Tooltip {
    position: absolute;
    top: 100%;
    right: -10px;
    min-width: 200px;
    max-width: 250px;
    width: max-content;
    padding: var(--gap-m);
    background-color: var(--color-neutral-900);
    color: var(--color-text-inverted);
    border-radius: var(--radius-m);
    font-size: var(--font-size-sm);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: var(--gap-xs);
    white-space: normal;
    word-wrap: break-word;
}

.ElementCard_Tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 12px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-neutral-900);
}

/* Изображение элемента */
.ElementCard_Image {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ElementCard_Image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Нижняя часть карточки */
.ElementCard_Footer {
    padding: var(--gap-m);
    margin-top: auto;
}

.ElementCard_SubTitle {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    /* background-color: var(--color-neutral-100);
    padding: var(--gap-xxs) var(--gap-xs);
    border-radius: var(--radius-xs); */
}

/* Адаптивность */
@media (max-width: 768px) {
    .ElementsSearch_ClearText {
        display: none;
    }
}

@media (max-width: 480px) {
    .ElementsPage {
        padding: var(--gap-ms);
    }
    
    .masonry-grid {
        gap: var(--gap-xs);
    }
    
    .masonry-column {
        gap: var(--gap-xs);
    }
}

/* Сообщение о пустом списке */
.ElementsGrid_Empty {
    width: 100%;
    padding: var(--gap-xl);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-lg);
}

.ElementsGrid_NoResults {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-s);
    padding: var(--gap-xl);
    text-align: center;
    color: var(--color-text-tertiary);
}

.ElementsGrid_NoResults .material-icons-round {
    font-size: 32px;
    color: var(--color-text-tertiary);
}

.ElementsGrid_NoResults p {
    font-size: var(--font-size-lg);
    margin: 0;
}

/* Скрываем skeleton-элементы на странице списка по умолчанию */
.soda-Body.soda-Skeleton {
    display: none !important;
}