/* === Стили для категорий === */

html {
  scroll-behavior: smooth; /* Плавный скролл для всей страницы */
}

.groups-container {
  /* Основной контейнер для групп. Настройки для горизонтальной прокрутки */
  width: 100%;
  display: flex; /* Устанавливаем флекс-контейнер для горизонтального выравнивания */
  overflow: auto;
  padding: 4px 0;
  scroll-snap-type: x mandatory; /* Прокрутка с привязкой */
  scrollbar-width: none; /* Убираем скроллбар для Firefox */
  -ms-overflow-style: none; /* Убираем скроллбар для IE */
}

.groups-container::-webkit-scrollbar {
  display: none; /* Убираем скроллбар для Chrome, Safari, Opera */
}

.group-wrapper {
  width: 350px; /* Фиксированная ширина обёртки для карточки */
  padding: 0px 16px; /* Внутренние отступы для создания пространства вокруг карточки */
  margin-right: -16px; /* Отрицательный отступ для выравнивания с соседними элементами */
  flex: 0 0 auto; /* Элемент не растягивается и не сжимается, занимает фиксированное место */
  scroll-snap-align: start; /* Привязка для прокрутки с учётом отступов */
  display: flex; /* Устанавливаем флекс-контейнер для вертикального выравнивания */
  flex-direction: column; /* Элементы внутри располагаются вертикально */
  align-items: stretch; /* Карточки растягиваются по высоте самой высокой */
}

.group {
  background: var(--01-layer-1); /* Фон карточки */
  border: 1px solid var(--04-border-control); /* Граница карточки */
  /* overflow: hidden; */
  position: relative;
  border-radius: var(--radius-200); /* Скругление углов */
  transition: all 0.15s ease-out; /* Плавный переход при наведении */
  cursor: pointer; /* Указатель при наведении */
  text-decoration: none; /* Убираем подчёркивание ссылок */
  display: block; /* Элемент отображается как блочный */
  flex: 0 0 auto; /* Карточка не растягивается и не сжимается, занимает фиксированное место */
  height: 100%; /* Карточка занимает всю высоту обёртки */
  flex-grow: 1; /* Карточка растягивается до высоты самой высокой */
}

.group:hover {
  box-shadow: 0 0 0 3px var(--06-theme-violet-content);
  /* transition: box-shadow 0.05s ease; */
  /* outline: 3px var(--06-theme-violet-content) solid; */
}

.group-cover-wrapper {
  padding: 4px;
  width: 100%;
  height: 125px;
}

.group-cover {
  border-radius: 4px;
  width: 100%; /* Изображение занимает всю ширину карточки */
  height: 100%;
  object-fit: cover; /* Изображение обрезается по размеру контейнера */
  object-position: center;
}

.group-content {
  display: grid;
  padding: 8px 12px 12px 12px;
  gap: 4px;
}

.group-title {
  color: var(--02-content-primary); /* Цвет текста */
  font-size: var(--module-400);
  font-weight: var(--fw-medium);
  line-height: var(--module-500);
}

.group-description {
  color: var(--02-content-secondary); /* Цвет текста с прозрачностью */
  font-size: var(--module-350); /* Размер шрифта описания */
  line-height: var(--module-400);

  display: -webkit-box; /* Для обрезки текста */
  -webkit-line-clamp: 3; /* Количество строк до обрезки */
  line-clamp: 2; /* Количество строк до обрезки */
  -webkit-box-orient: vertical; /* Ориентация текста */
  overflow: hidden; /* Скрытие текста за пределами блока */
  text-overflow: ellipsis; /* Добавление троеточия при обрезке */
}

.group-badge {
  display: flex;
  position: absolute; /* Абсолютное позиционирование бейджа */
  right: 12px; /* Отступ справа */
  top: 12px; /* Отступ сверху */
  align-items: center; /* Выравнивание по центру */
  justify-content: center;

  background: var(--06-theme-neutral-layer-soft); /* Фон бейджа */
  padding: var(--space-50) var(--space-200); /* Внутренние отступы */
  gap: 4px; /* Расстояние между элементами */
  border-radius: var(--radius-200); /* Скругление углов */
}

.icon-strike svg {
  fill: var(--02-content-secondary);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group-badge-text {
  color: var(--02-content-secondary);
  font-family: var(--font-secondary); /* Шрифт текста бейджа */
  font-size: var(--module-350); /* Размер шрифта текста бейджа */
  line-height: var(--module-500); /* Высота строки текста бейджа */
}

/* ———————————————————————————————————- */

.icon-schevron-left svg {
  fill: var(--02-content-secondary);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#subgroups-container {
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: var(--01-layer-blur); /* Основной цвет страницы */
  backdrop-filter: blur(12px);
  display: flex;
  overflow-x: auto; /* Добавлено для горизонтального скроллинга */
  overflow-y: hidden; /* Убираем вертикальный скроллинг */
  padding: 16px 16px 16px 16px;
  align-items: flex-start;
  gap: 8px;
  white-space: nowrap; /* Запрещаем перенос элементов */
  scrollbar-width: none; /* Убираем скроллбар для Firefox */
  -ms-overflow-style: none; /* Убираем скроллбар для IE */
}

/* Стили для бейджиков подгрупп */
.badge {
  background: var(--06-theme-neutral-layer-soft);
  color: var(--02-content-secondary);
  text-decoration: none;
  display: inline-flex; /* Убедиться, что элементы выстраиваются в строку */
  padding: var(--space-150) var(--space-300);
  align-items: center;
  gap: var(--space-100);
  border-radius: var(--radius-200);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.badge-title {
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 14px;
}

.badge.active {
  background: var(--06-theme-violet-layer-solid);
  color: var(--02-content-on-solid);
}