/* ==========================================
   MODS-FEATURED — карусель подборки «Моды в центре внимания»
   Подключается после mod-card.css: карточка здесь — модификатор
   карточки каталога, всё оформление (радиус, фон-заглушка, градиент,
   hover, кликабельность через ::after) наследуется от .mod-card.
   Общие стили не трогаем — только новые классы и один модификатор.
   ========================================== */

/* Карточка каталога в широком формате 16:9. Обложка, заглушка, hover
   и кликабельность остаются общими с .mod-card; низ — своя, короткая
   строка: название и скачивания. */
.mod-card--wide {
  aspect-ratio: 16 / 9;
}

/* Текста меньше, чем в каталоге, поэтому затемнение начинается ниже:
   верхняя половина обложки остаётся свободной. */
.mod-card--wide .mod-card__shade {
  background: linear-gradient(
    rgb(0 0 0 / 0.35) 0%,
    transparent 25%,
    transparent 55%,
    rgb(0 0 0 / 0.92) 100%
  );
}

/* Тело без собственных отступов: их задаёт единственная нижняя строка. */
.mod-card--wide .mod-card__body {
  gap: 0;
  padding: 0;
}

/* Одна строка: название слева, скачивания справа. */
.mod-card--wide .mod-card__bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.mod-card--wide .mod-card__heading {
  /* Без flex: 1 и min-width: 0 многоточие во флекс-строке не работает. */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
/* В каталоге название обрезается по двум строкам — здесь нужна одна
   с многоточием, поэтому line-clamp снимается. */
.mod-card--wide .mod-card__link {
  display: block;
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Счётчик — тот же .mod-card__stat, что в каталоге (флекс-строка,
   иконка с прозрачностью 0.7, 12px, #bbb); здесь он не тянется и не
   переносится. */
.mod-card--wide .mod-card__downloads {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ==========================================
   Секция: строка заголовка + кнопки
   ========================================== */
.mods-featured {
  --mods-featured-gap: 16px;
}
.mods-featured__head {
  gap: var(--ds-space-4);
}
.mods-featured__nav {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
  /* Сбрасываем наследование .ds-section__head: uppercase, 18px, заголовочный шрифт. */
  font-family: var(--ds-font-body);
  text-transform: none;
}
/* Без JS кнопки не выводятся: в разметке они помечены hidden, а правило
   display ниже перебивало бы атрибут — держим его явно. Показывает
   кнопки скрипт (mods-featured.js снимает hidden после инициализации). */
.mods-featured__button[hidden] {
  display: none;
}
.mods-featured__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #3a3a3a;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-surface);
  color: var(--ds-text-white);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--ds-transition), color var(--ds-transition),
    opacity var(--ds-transition);
}
.mods-featured__button:hover:not(:disabled) {
  border-color: rgb(245 199 106 / 0.6);
  color: #f5c76a;
}
.mods-featured__button:focus-visible {
  outline: 2px solid #f5c76a;
  outline-offset: 2px;
}
/* Край трека: листать некуда — кнопка недоступна и не спорит с активной. */
.mods-featured__button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ==========================================
   Трек
   ========================================== */
.mods-featured__track {
  display: grid;
  grid-auto-flow: column;
  /* 4 карточки в ряд: ширина колонки = (ширина − три зазора) / 4. */
  grid-auto-columns: calc((100% - 3 * var(--mods-featured-gap)) / 4);
  gap: var(--mods-featured-gap);
  /* padding + отрицательный margin: подъём и тень карточки при hover не
     обрезаются overflow, но и не раздвигают секцию. */
  margin: -8px 0;
  padding: 8px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Полосу прокрутки прячем: нативная прокрутка (свайп, тачпад,
     Shift+колесо) остаётся. */
  scrollbar-width: none;
}
.mods-featured__track::-webkit-scrollbar {
  display: none;
}
.mods-featured__item {
  min-width: 0;
  scroll-snap-align: start;
}

/* Все карточки помещаются: листать нечего — кнопок нет. */
.mods-featured--fits .mods-featured__nav {
  display: none;
}

/* ==========================================
   Адаптив
   ========================================== */
@media (max-width: 1199px) {
  .mods-featured__track {
    grid-auto-columns: calc((100% - 2 * var(--mods-featured-gap)) / 3);
  }
}

/* До 768px листают свайпом: кнопки скрыты, следующая карточка видна краем. */
@media (max-width: 767px) {
  .mods-featured__nav {
    display: none;
  }
  .mods-featured__track {
    grid-auto-columns: calc((100% - var(--mods-featured-gap)) / 1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mods-featured__button {
    transition: none;
  }
}