/* Главная. Числа из макета: фрейм baqqybet-homepage-recomposed (1440) и
 * baqqybet-homepage-mobile (390). Мобильная ветка пишется вместе с секцией.
 */

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: 72px; background: var(--color-bg); }
.hero__inner { display: flex; align-items: center; gap: var(--space-48); }
.hero__copy { min-width: 0; }   /* иначе длинный заголовок не даёт колонке сжаться */

.hero__copy { display: flex; flex-direction: column; gap: var(--space-16); flex: 1; }
.hero__text { display: flex; flex-direction: column; gap: var(--space-16); }
.hero__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-accent);
}
.hero__title {
  font-family: var(--font-ui);
  font-size: 88px; font-weight: 900; line-height: 84px; letter-spacing: -2px;
  color: var(--color-text-strong);
}
.hero__lead { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text); }
.hero__cta {
  align-self: flex-start;
  min-height: 48px; padding-inline: 18px;
  border-radius: var(--radius-12);
  font-size: var(--fs-md); font-weight: 900; line-height: 18.15px; letter-spacing: normal;
}

.hero__media {
  flex: none; width: 520px; max-width: 100%; height: 420px;
  background: var(--scrim-35, rgba(11, 15, 20, .35));   /* подложка под фото из макета */
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── планшет ──────────────────────────────────────────────────────────── */
@media (max-width: 1359px) {
  .hero__title { font-size: 64px; line-height: 62px; letter-spacing: -1.5px; }
  .hero__media { width: 420px; height: 340px; }
}

/* ── мобильный фрейм макета ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero { padding-block: var(--space-40); }
  .hero__inner { flex-direction: column; align-items: stretch; gap: var(--space-24); }
  .hero__copy { gap: var(--space-24); }
  .hero__text { gap: var(--space-12); }
  .hero__title { font-size: 42px; line-height: 42px; letter-spacing: -1px; }
  .hero__lead { font-size: var(--fs-body); line-height: 21px; }
  .hero__cta { align-self: stretch; }
  .hero__media { width: 100%; height: 220px; border-radius: var(--radius-12); }
}

/* ── upcoming markets ─────────────────────────────────────────────────── */
.markets { background: var(--color-bg-light); color: var(--color-text-dark); }
.markets__inner  { display: flex; flex-direction: column; gap: var(--space-24); }
.markets__header { display: flex; flex-direction: column; gap: var(--space-8); }
.markets__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h2); font-weight: 900; line-height: 39px;
  color: var(--color-text-dark);
}
.markets__sub { font-size: var(--fs-md); line-height: 18.15px; color: var(--color-text-dark-muted); }

/* Табы на светлой секции: тёмная плашка, активная — лаймовая. */
.markets__tabs .tab {
  padding: var(--space-10) var(--space-14, 14px);
  min-height: 36px;
  background: var(--color-panel);
  border-color: var(--color-border);
  font-size: var(--fs-sm); font-weight: 700; line-height: 16px;
  color: var(--color-text);
}
.markets__tabs .tab[aria-selected="true"] {
  background: var(--color-accent); border-color: transparent;
  color: var(--color-on-accent); font-weight: 800;
}

.board {
  display: flex; flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-lg);
  overflow: hidden;
}
.board__league { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); }
.board__league-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.board__league-name { display: flex; align-items: center; gap: var(--space-10); }
.board__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--color-accent); border-radius: var(--radius-md);
  font-size: var(--fs-3xs); font-weight: 900; line-height: 1; color: var(--color-on-accent);
}
.board__league-title { font-size: var(--fs-body); font-weight: 800; line-height: 17px; color: var(--color-text-dark); }
.board__league-meta { display: flex; align-items: center; gap: var(--space-8); }
.board__count { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; line-height: 16px; color: var(--color-text-muted); }
.board__all {
  font-size: var(--fs-sm); font-weight: 700; line-height: 16px;
  color: #000; text-decoration: none;
  position: relative;
}
.board__all:hover { text-decoration: underline; }
/* Тап-зона 24px псевдоэлементом — паддинг здесь сдвинул бы шапку лиги. */
.board__all::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

.board__row {
  display: flex; align-items: center; gap: var(--space-16);
  padding-block: var(--space-14, 14px);
  height: 77px;
  box-shadow: inset 0 -1px 0 var(--color-border-light);
}
.board__league > .board__row:last-child { box-shadow: none; }

.board__event { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-width: 0; }
.board__meta {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--fs-xs); font-weight: 700; line-height: 15px; color: var(--color-text-muted);
}
.board__time { font-family: var(--font-mono); font-weight: 400; }
.board__name { font-size: var(--fs-lg); font-weight: 800; line-height: 19.36px; color: var(--color-text-dark); }
.board__name-short { display: none; }

.board__market { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; flex: none; }
.board__market-name  { font-size: var(--fs-xs); line-height: 15px; color: var(--color-text-muted); }
.board__market-count { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; line-height: 16px; color: var(--color-text-muted); }

.board__odds { display: flex; align-items: center; gap: var(--space-8); flex: none; }
.odd {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-12);
  background: var(--color-panel);
  border: 1px solid var(--color-border); border-radius: var(--radius-10);
  color: var(--color-text-strong); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.odd:hover  { border-color: var(--color-accent); }
.odd:active { transform: translateY(1px); }
.odd.is-selected { background: var(--color-accent); border-color: transparent; color: var(--color-on-accent); }
.odd--featured { background: var(--color-accent); border-color: transparent; color: var(--color-on-accent); }
.odd__side  { font-size: var(--fs-xs); font-weight: 700; line-height: 15px; text-align: center; color: var(--color-text); }
.odd__price { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 800; line-height: 18.2px; text-align: center; }
.odd--featured .odd__side { font-weight: 800; color: var(--color-on-accent); }

@media (max-width: 1359px) {
  .board__row { flex-wrap: wrap; }
  .board__market { order: 3; align-items: flex-start; }
}

@media (max-width: 767px) {
  .markets__inner { gap: var(--space-24); }
  .markets__header { gap: var(--space-6); }
  .markets__title { font-size: var(--fs-h3); line-height: 34px; }
  .markets__sub { font-size: var(--fs-body); line-height: 17px; }

  /* Ленту фильтров в макете можно прокручивать вбок — она не переносится. */
  .markets__tabs { flex-wrap: nowrap; width: 100%; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; }
  .markets__tabs::-webkit-scrollbar { display: none; }
  .markets__tabs .tab { flex: none; min-height: 31px; padding: var(--space-8) var(--space-14, 14px); font-size: var(--fs-xs); line-height: 15px; }

  .board__league { gap: var(--space-12); padding: var(--space-12); }
  .board__league-head { height: 24px; }
  .board__league-head { min-height: 24px; }
  /* Матч, которого нет в мобильном фрейме макета. */
  .board__row--desktop { display: none; }
  .board__row { flex-direction: column; align-items: stretch; gap: var(--space-12); padding: var(--space-8) 0 var(--space-16); height: 129px; }
  .board__name-full  { display: none; }
  .board__name-short { display: inline; }
  .board__name { font-size: var(--fs-body); line-height: 17px; }
  .board__market { flex-direction: row; align-items: center; justify-content: space-between; order: 0; }
  .board__odds { gap: var(--space-8); }
  .odd { flex: 1 1 auto; min-width: 0; min-height: 42px; }
  /* Три исхода не помещаются в строку уже мобильного фрейма — переносим. */
  .board__odds { flex-wrap: wrap; }
}

/* Пустое состояние ленты: фильтр может не совпасть ни с одной строкой. */
.board__empty {
  padding: var(--space-32) var(--space-16);
  text-align: center;
  font-size: var(--fs-md); line-height: 22px; color: var(--color-text-dark-muted);
}

/* ── next to jump ─────────────────────────────────────────────────────── */
.racing { background: var(--color-bg); }
.racing__inner  { display: flex; flex-direction: column; gap: var(--space-24); }
.racing__header { display: flex; flex-direction: column; gap: var(--space-6); }
.racing__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-24); }
.racing__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-accent);
}
.racing__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h2); font-weight: 900; line-height: 39px;
  color: var(--color-text-strong);
}
.racing__all {
  font-size: var(--fs-body); font-weight: 700; line-height: 17px;
  color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.racing__all:hover { text-decoration-thickness: 2px; }

/* Лента фильтров в макете хагает по содержимому, а не тянется на всю ширину. */
.racing__tabs { width: fit-content; }
.racing__tabs .tab { padding: var(--space-10) var(--space-14, 14px); font-size: var(--fs-sm); line-height: 16px; }
.racing__tabs .tab[aria-selected="true"] { font-weight: 800; }

.racing__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); }

/* Карточка заезда: фото лежит фоном под затемнением, поэтому и картинка, и
   слой затемнения адресуются отдельно — иначе фото «съедает» текст. */
.race {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--space-12);
  height: 145px; padding: var(--space-16);
  border: 1px solid var(--color-border); border-radius: var(--radius-14);
  overflow: hidden; text-decoration: none;
  transition: transform var(--dur-base) var(--ease);
}
.race--next { border-color: var(--color-accent); }
.race:hover { transform: translateY(-2px); }
.race__bg { position: absolute; inset: 0; z-index: -2; }
.race__bg img { width: 100%; height: 100%; object-fit: cover; }
.race::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-75); }

.race__body { display: flex; flex-direction: column; gap: var(--space-12); flex: 1; }
.race__top { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.race__countdown { display: inline-flex; align-items: center; gap: var(--space-8); }
/* Минуты до старта стоят на лаймовой плашке 34×34 — так в макете. */
.race__mins {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--color-bg); border-radius: var(--radius-10);
  font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 900; line-height: 18.2px;
  color: var(--color-text-strong);
}
/* Ближайший заезд выделен лаймом, остальные приглушены — так в макете. */
.race--next .race__mins { background: var(--color-accent); color: var(--color-on-accent); }
.race__unit { font-size: var(--fs-xs); font-weight: 800; line-height: 15px; color: var(--color-text); }
.race--next .race__unit { color: var(--color-text-strong); }
.race__time { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; line-height: 16px; color: var(--color-text-muted); margin-left: auto; }
.race--next .race__time { color: var(--color-accent); }

.race__name  { display: flex; flex-direction: column; gap: var(--space-4); }
.race__track { font-size: var(--fs-lg); font-weight: 800; line-height: 19.36px; color: var(--color-text-strong); }
.race__meta  { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text); }

.race__cta {
  display: inline-flex; align-items: center; gap: var(--space-8); margin-top: auto;
  font-size: var(--fs-sm); font-weight: 700; line-height: 16px; color: var(--color-accent);
}
.race__track { color: var(--color-text-strong); }
.race__arrow { width: 16px; height: 16px; transition: translate var(--dur-fast) var(--ease); }
.race:hover .race__arrow { translate: 3px 0; }

@media (max-width: 1359px) {
  .racing__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .racing__header { gap: var(--space-8); }
  .racing__row { align-items: center; }
  .racing__title { font-size: var(--fs-h3); line-height: 34px; }
  .racing__all { font-size: var(--fs-sm); line-height: 16px; align-self: flex-start; }
  .racing__tabs { flex-wrap: nowrap; width: 100%; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; }
  .racing__tabs::-webkit-scrollbar { display: none; }
  .racing__tabs .tab { flex: none; min-height: 31px; padding: var(--space-8) var(--space-12); font-size: var(--fs-xs); line-height: 15px; }

  /* В макете карточки заездов на мобильном — горизонтальная карусель. */
  .racing__cards {
    display: flex; gap: var(--space-12);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    scroll-padding-inline: var(--container-pad-mobile);
  }
  .racing__cards::-webkit-scrollbar { display: none; }
  .race { flex: none; width: 260px; min-height: 140px; border-width: 1.5px; scroll-snap-align: start; }
}

/* ── find your competition ────────────────────────────────────────────── */
.comps { background: var(--color-bg-light); color: var(--color-text-dark); }
/* Десктопный фрейм рисует секцию 1440×540 при содержимом 492 — с паддингом 48
   сверху и снизу это не сходится. Высота секции важнее внутреннего отступа:
   она задаёт положение всего, что ниже. На мобильном ритм обычный, 40. */
@media (min-width: 768px) { .comps { padding-block: var(--space-24); } }
.comps__grid {
  /* Доли вместо жёстких 447/489/360: на 1440 они дают ровно макетные ширины
     (447+489+360 = 1296 = ширина контейнера минус два зазора), а между 1360 и
     1439 сетка ужимается вместо того, чтобы выносить документ за экран. */
  display: grid; grid-template-columns: minmax(0, 447fr) minmax(0, 489fr) minmax(0, 360fr); gap: var(--space-24);
  align-items: start;              /* карточки не тянутся по высоте ряда */
}
.comps__intro { display: flex; flex-direction: column; gap: var(--space-20); }
.comps__heading { display: flex; flex-direction: column; gap: var(--space-8); }
.comps__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h1); font-weight: 900; line-height: 48px;
  color: var(--color-text-dark);
}
.comps__sub { font-size: var(--fs-md); line-height: 18.15px; color: var(--color-text-dark-muted); }
.comps__note { display: flex; flex-direction: column; gap: var(--space-12); }
.comps__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: 1px;
  text-transform: uppercase; color: #000;
}
.comps__text { font-size: var(--fs-body); line-height: 17px; color: var(--color-text-dark-muted); }

/* Карточка соревнования: фото под затемнением, слои разведены по z-index,
   иначе фон «съедает» подписи. */
.comp {
  /* Фон под фотографией: без него подписи «висят» на прозрачном, и проверка
     контраста считает их по фону секции, а не по затемнённому снимку. */
  background: var(--color-bg);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: var(--color-text-strong);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.comp:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.comp__bg { position: absolute; inset: 0; z-index: -2; }
.comp__bg img { width: 100%; height: 100%; object-fit: cover; }
.comp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-55); }

.comp--featured { height: 320px; }
.comp--featured .comp__body { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-20); height: 100%; }
.comp__top { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.comp__label {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px;
  text-transform: uppercase; color: var(--color-text-strong);
}
.comp__markets {
  padding: var(--space-4) var(--space-10);
  background: var(--color-accent); color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 800; line-height: 16px;
}
.comp__name { display: flex; flex-direction: column; gap: var(--space-4); }
.comp__code { font-family: var(--font-ui); font-size: var(--fs-h4); font-weight: 900; line-height: 29.05px; }
.comp__full { font-size: var(--fs-body); line-height: 17px; color: var(--color-text); }
.comp__cta {
  display: inline-flex; align-items: center; gap: var(--space-8); margin-top: auto;
  font-size: var(--fs-sm); font-weight: 800; line-height: 16px; color: var(--color-text-strong);
}
/* У плиток призыв лаймовый, у крупной карточки — белый. */
.comp--tile .comp__cta { color: var(--color-accent); }
.comp__arrow { width: 16px; height: 16px; transition: translate var(--dur-fast) var(--ease); }
.comp:hover .comp__arrow { translate: 3px 0; }

.comps__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); height: 492px; }
.comp--tile { border-radius: var(--radius-14); }
.comp--tile .comp__body { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-16); min-height: 148px; }
.comp__tile-title { font-size: var(--fs-lg); font-weight: 900; line-height: 19.36px; }
.comp__tile-sub   { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text); }

@media (max-width: 1359px) {
  .comps__grid { grid-template-columns: repeat(2, 1fr); }
  .comps__intro { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .comps__grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .comps__intro { gap: var(--space-16); }
  /* Пояснения «COMPETITIONS» в мобильном фрейме нет — только заголовок и лид. */
  .comps__note { display: none; }
  .comps__title { font-size: var(--fs-h2); line-height: 36px; }
  .comps__sub { font-size: var(--fs-body); line-height: 17px; }
  .comp--featured { height: 240px; }
  .comp--featured .comp__body { padding: var(--space-16); }
  .comps__tiles { height: auto; }
  /* В мобильном фрейме плитки стоят в два столбца по 120px высотой. */
  .comps__tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); grid-auto-rows: 120px; }
  /* Плитки, которых нет в мобильном фрейме макета. */
  .comp--desktop { display: none; }
  .comp--tile .comp__body { min-height: 0; height: 100%; padding: var(--space-12); }
  .comp--tile .comp__body { min-height: 128px; }
}