/*
 * Контейнер и сетка.
 *
 * Полотно тянется на любую ширину: поля по краям фиксированы, всё остальное
 * между ними делится на двенадцать колонок. Ширина колонки нигде не задаётся
 * числом — её считает grid, поэтому одна и та же разметка работает и на 360,
 * и на 2560.
 */

.frk-container {
  width: 100%;
  padding-inline: var(--frk-layout-gutter);
}

.frk-grid {
  display: grid;
  grid-template-columns: repeat(var(--frk-layout-columns), minmax(0, 1fr));
  gap: var(--frk-layout-gap);
}

/*
 * Ширины из макета в колонках: 473px = 3, 632px = 4, 950px = 6, 1904px = 12.
 * Держим набор минимальным — новые классы добавляются, когда встречаются в макете.
 */
.frk-col-3 { grid-column: span 3; }
.frk-col-4 { grid-column: span 4; }
.frk-col-6 { grid-column: span 6; }
.frk-col-12 { grid-column: span 12; }

/*
 * На узких экранах двенадцать колонок теряют смысл — колонка становится уже
 * 25px и в неё ничего не помещается. Ниже планшета всё, что на десктопе занимало
 * часть ряда, разворачивается на всю ширину; исключения задаются в секциях.
 */
@media (max-width: 767px) {
  .frk-col-3,
  .frk-col-4,
  .frk-col-6 {
    grid-column: span 12;
  }
}

/*
 * Общее поведение горизонтальных лент.
 *
 * Плавность нужна кнопкам со стрелками, но она же мешает перетаскиванию:
 * пока ленту тащат курсором, каждое присваивание scrollLeft анимируется
 * и полотно отстаёт. Поэтому на время жеста скрипт вешает is-dragging,
 * и плавность со снапом снимаются здесь — одним правилом на все ленты.
 */
[data-drag-scroll] {
  scroll-behavior: smooth;
  overflow-x: auto;
  cursor: grab;

  /*
   * Выделение текста гасим сразу, а не в момент перетаскивания: браузер
   * успевает начать выделение раньше, чем сработает порог сдвига.
   */
  user-select: none;

  /* Полоса прокрутки спорит с подписями под плитками — прячем во всех лентах */
  scrollbar-width: none;
}

[data-drag-scroll]::-webkit-scrollbar {
  display: none;
}

[data-drag-scroll].is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
}

/* Перетаскивание не должно превращаться в переход по ссылке */
[data-drag-scroll].is-dragging a {
  pointer-events: none;
}

/* Родное перетаскивание изображения перехватывает курсор у ленты */
[data-drag-scroll] img {
  -webkit-user-drag: none;
}