/* ==========================================================================
   1win Design System · МОСТ К ПРОД-РАЗМЕТКЕ
   --------------------------------------------------------------------------
   Блоки «1win — это лидер в мире iGaming» и «1win — это постоянное развитие»
   перенесены на страницу один в один из прод-сборки (or1wtoken.html), вместе
   со своими data-v-* скоупами. Их стили живут в land/_nuxt/index.BnkXHkeO.css,
   который мы не правим — это вывод сборщика.

   Здесь ровно то, без чего перенесённая разметка не работает вне прода:

     1. Переменные, которые на проде объявлены в entry.css: --light-color,
        --main-font, --secondary-font. Мы их не тащим целиком (entry.css
        переопределяет html и body), а выдаём двум блокам из своих токенов.
     2. Отмена отступа сверху: на проде секция about подпирает первый экран
        и получает padding-top до 387 px. У нас над ней свой герой.
     3. Слайдер проектов без swiper.js: нативная прокрутка со снапом.
        Разметка остаётся прод-овская, скрипт в airdrop.js только
        дорисовывает точки пагинации — ровно как это делал бы swiper.
     4. Кнопка «Начать»: её класс .button живёт в прод-entry.css, которого
        мы не подключаем. Повторяем из токенов.

   Подключается последним, после land/_nuxt/index.BnkXHkeO.css.
   ========================================================================== */

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ ПРОДА
   Область — только два перенесённых блока, чтобы имена без префикса
   не растекались на остальную страницу.
   ========================================================================== */

.about,
.statistic {
  --light-color: var(--neutral-clean-white);
  --main-font: var(--font-body-font-family);
  --secondary-font: var(--font-decorative-font-family);
}

/* ==========================================================================
   2. ОТСТУП СВЕРХУ
   На проде about начинается сразу под первым экраном и держит на себе
   кота с телефоном, отсюда padding-top: 352…387px в четырёх медиазапросах.
   У нас над блоком обычная секция, поэтому отступ снимаем. !important —
   единственный способ перебить все четыре правила сразу, не дублируя
   медиазапросы минифицированного файла, который мы не редактируем.
   ========================================================================== */

.about[data-v-24f6cab7] { padding-top: 0 !important; }

/* Ритм между секциями у нас свой — 16 px, как и на проде (.section) */
.about.section,
.statistic.section { margin-bottom: var(--l-section-gap); }

/* ==========================================================================
   3. СЛАЙДЕР ПРОЕКТОВ БЕЗ SWIPER.JS
   Прод инициализирует swiper скриптом; у нас страница статическая.
   Нативная прокрутка со снапом даёт то же поведение: один слайд в кадре,
   свайп пальцем и колесом, без библиотеки. Это в точности то, что делает
   сам swiper в режиме css-mode.
   ========================================================================== */

#about .swiper-wrapper {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#about .swiper-wrapper::-webkit-scrollbar { display: none; }

#about .swiper-slide { scroll-snap-align: start; scroll-snap-stop: always; }

/* Точки пагинации рисует airdrop.js. Пока их нет, плашка-подложка
   не должна висеть пустым овалом. */
.about-card__pagination:empty { display: none; }
.about-card__pagination { cursor: default; }
.about-card__pagination .swiper-pagination-bullet { cursor: pointer; }

/* ==========================================================================
   4. КНОПКА «НАЧАТЬ»
   Класс .button из прод-entry.css. Значения — из токенов системы,
   визуально это наша синяя кнопка размера lg.
   ========================================================================== */

.about .button {
  border: none;
  border-radius: var(--l-button-radius);
  cursor: pointer;
  display: block;
  font-size: 0;
  outline: none;
  position: relative;
  text-decoration: none;
  transition: background-color var(--l-duration-fast) var(--l-ease);
}

.about .button__text {
  display: block;
  font-size: var(--l-button-font-size);
  font-weight: var(--l-button-font-weight);
  line-height: var(--l-button-line-height);
}

.about .button_theme_blue {
  background-color: var(--color-solid-brand-primary-default);
  color: var(--neutral-clean-white);
}

.about .button_theme_blue:hover { background-color: var(--color-solid-brand-primary-hover); }

.about .button_size_lg { padding: var(--spacing-12) var(--spacing-20); }

/* Компонент <picture> на проде объявлен в entry.css */
.about .picture { display: block; font-size: 0; }

/* ==========================================================================
   5. ДЛИНА СТРОКИ В КАРТОЧКАХ НА УЗКИХ ЭКРАНАХ
   Прод подбирает ширину текста под каждый язык: en, es, pt, fr. Русского
   в выгрузке нет, и карточка отдаёт ему общее значение — оно рассчитано на
   английский, который короче. На широких экранах места хватает, на узких
   строка заезжала под стрелку и куб. Не задаём ширину заново: берём
   меньшее из прод-овской и того, что реально осталось рядом с объектом.
   Выше 768 карточка шире объекта с запасом, и работает прод как есть.
   ========================================================================== */

@media (max-width: 767px) {
  .statistic__list .card:first-child .card__text:lang(ru) {
    max-width: min(var(--l-prod-card-text-max),
                   calc(100% - var(--l-prod-art-arrow)));
  }

  .statistic .statistic__card-last .card__text:lang(ru) {
    max-width: min(var(--l-prod-card-text-max),
                   calc(100% - var(--l-prod-art-cube)));
  }

  .about .about-card__text:lang(ru) {
    max-width: min(var(--l-prod-about-text-max),
                   calc(100% - var(--l-prod-art-badge)));
  }
}