/* Бегущая лента должностей: два ряда, противоположные направления.
   Подключить после /assets/style.css. Дизайн карточек (.card, .tag, h3, p) не трогаем. */

/* обрезаем всё, что шире секции: 100vw включает полосу прокрутки (Windows),
   без этого страница получила бы горизонтальный скролл */
#instrukcii { overflow-x: clip; }

#instrukcii .marquee {
  --marquee-gap: 20px;          /* расстояние между карточками */
  --marquee-speed: 40px;        /* скорость, пикселей в секунду (ставит JS, это запасное значение) */
  display: grid;
  margin-bottom: 16px;
  /* на всю ширину окна, как на HypeAuditor: карточки уходят за края экрана */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* по умолчанию (без JS, до его загрузки) ряд статичный и прокручивается вручную;
   анимация включается классом is-ready, который ставит marquee.js после создания копии */
#instrukcii .marquee__row {
  display: flex;
  overflow-x: auto;
  /* запас внутри ряда: подъём карточки и тень при наведении не обрезаются */
  padding: 8px 0 20px;
}

#instrukcii .marquee__track {
  display: flex;
  flex: none;
  width: max-content;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);   /* шов между копиями ленты равен обычному зазору */
}

#instrukcii .marquee.is-ready .marquee__row { overflow-x: hidden; }

#instrukcii .marquee.is-ready .marquee__track {
  animation: marquee-left var(--marquee-duration, 90s) linear infinite;
  will-change: transform;
}

#instrukcii .marquee.is-ready .marquee__row--right .marquee__track {
  animation-name: marquee-right;
}

#instrukcii .marquee__group {
  display: flex;
  gap: var(--marquee-gap);
}

/* ширина карточки в ленте фиксированная, чтобы ряд был ровным */
#instrukcii .marquee .card {
  flex: none;
  width: 340px;
  min-height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}

#instrukcii .marquee .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(20, 26, 32, .10);
}

/* при наведении ряд останавливается, чтобы по карточке было удобно попасть */
#instrukcii .marquee.is-ready .marquee__row:hover .marquee__track {
  animation-play-state: paused;
}

/* фокус с клавиатуры: ряд переходит в статичный режим, фокусируемые ссылки оригинала
   прокручиваются в видимую зону штатно (копия скрыта, анимации нет) */
#instrukcii .marquee.is-ready .marquee__row:focus-within { overflow-x: auto; }
#instrukcii .marquee.is-ready .marquee__row:focus-within .marquee__track { animation: none; }
#instrukcii .marquee.is-ready .marquee__row:focus-within .marquee__group[aria-hidden="true"] { display: none; }

@keyframes marquee-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 900px) {
  #instrukcii .marquee { --marquee-gap: 14px; }
  #instrukcii .marquee .card { width: 280px; padding: 24px; }
}

/* без анимации: обычная прокручиваемая лента, вторая копия скрыта */
@media (prefers-reduced-motion: reduce) {
  #instrukcii .marquee.is-ready .marquee__row { overflow-x: auto; }
  #instrukcii .marquee.is-ready .marquee__row .marquee__track { animation: none; }
  #instrukcii .marquee__group[aria-hidden="true"] { display: none; }
}