/* Racing. Числа из макета: фреймы baqqybet-racing-desktop (1440) и
 * baqqybet-racing-mobile (390). Мобильная ветка написана вместе с секцией.
 *
 * Дельта M2: мобильный фрейм показывает другой набор бегунов и сокращённые
 * подписи. Разметка одна — оба значения лежат в DOM, а видимость переключают
 * утилиты .dual--wide / .dual--narrow ниже.
 */

/* ── утилита десктоп/мобильный текст ──────────────────────────────────── */
.dual--narrow { display: none; }

/* ── racing intro ─── 36:70 ───────────────────────────────────────────── */
.racing-intro { padding-block: var(--space-48) var(--space-24); }
.racing-intro__inner { display: flex; flex-direction: column; gap: var(--space-12); }

.racing-intro__eyebrow {
  align-self: flex-start;                  /* 36:71 — HUG */
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px;
  letter-spacing: 2px;                     /* 36:71 */
  text-transform: uppercase; color: var(--color-accent);
}
.racing-intro__title {
  align-self: flex-start;                  /* 36:72 — HUG */
  font-size: var(--fs-d3); font-weight: 900; line-height: 54px;   /* 36:72 */
  color: var(--color-text-strong);
}
.racing-intro__lead {
  font-size: var(--fs-lg); font-weight: 400; line-height: 19.36px; /* 36:73 */
  color: var(--color-text);
}

/* ── next to jump ─── 36:74 ───────────────────────────────────────────── */
.next-to-jump { padding-block: var(--space-24) var(--space-48); }

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

.race-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-12);
  min-height: 147px; padding: var(--space-16);
  background: var(--scrim-75);                       /* заливка карточки 36:76 */
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border);   /* strokeAlign INSIDE */
  color: var(--color-text); text-decoration: none;
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.race-card--next { box-shadow: inset 0 0 0 1px var(--color-accent); }
.race-card:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }

/* Фото под скримом: слой прижат к краям явно, содержимое — над ним. */
.race-card__bg { position: absolute; inset: 0; opacity: .28; pointer-events: none; }
.race-card__bg picture,
.race-card__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.race-card__top, .race-card__info, .race-card__cta { position: relative; }
.race-card__badge, .race-card__min, .race-card__time { position: relative; }

.race-card__top { display: flex; align-items: center; gap: var(--space-8); min-height: 34px; }
.race-card__badge {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  font-family: var(--font-mono);        /* цифры макета — Geist Mono */
  background: var(--color-bg); border-radius: var(--radius-10);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: var(--fs-body); font-weight: 900; line-height: 18.2px;
  color: var(--color-text-strong);
}
.race-card--next .race-card__badge {
  background: var(--color-accent); box-shadow: none; color: var(--color-on-accent);
}
.race-card__min { font-size: var(--fs-xs); font-weight: 800; line-height: 15px; color: var(--color-text); }
.race-card--next .race-card__min { color: var(--color-text-strong); }
.race-card__time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; line-height: 16px; color: var(--color-text-muted); }
.race-card--next .race-card__time { color: var(--color-accent); }

.race-card__info { display: flex; flex-direction: column; gap: var(--space-4); }
.race-card__venue { font-size: var(--fs-lg); font-weight: 800; line-height: 19.36px; color: var(--color-text-strong); }
.race-card__meta  { font-size: var(--fs-sm); font-weight: 400; line-height: 16px; color: var(--color-text); }
.race-card__cta   { font-size: var(--fs-sm); font-weight: 700; line-height: 16px; color: var(--color-accent); }

/* ── выбранный заезд ─── 36:131 ───────────────────────────────────────── */
.selected-race { padding-block: 0 var(--space-48); }
.selected-race__inner { display: flex; flex-direction: column; gap: var(--space-24); }

.race-detail {
  display: flex; align-items: center;
  min-height: 128px; padding: var(--space-24);
  background: var(--color-panel);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.race-detail__info { display: flex; flex-direction: column; gap: var(--space-6); flex: 1; }
.race-detail__venue {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px;
  letter-spacing: 2px;                       /* 36:134 */
  text-transform: uppercase; color: var(--color-text-muted);
}
.race-detail__race { font-size: var(--fs-h3); font-weight: 900; line-height: 34px; color: var(--color-text-strong); }
.race-detail__meta { font-size: var(--fs-body); font-weight: 400; line-height: 17px; color: var(--color-text); }

.race-detail__countdown { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); min-width: 100px; }
.race-detail__countdown-label {
  text-align: right;
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--color-text-muted);
}
.race-detail__countdown-value { white-space: nowrap;   /* «02 MIN» в макете одной строкой */ text-align: right; font-size: var(--fs-h3); font-weight: 900; line-height: 34px; color: var(--color-accent); }

/* Табы рынков — компонент .tab, размеры и цвета из 36:140. */
.market-tabs { align-self: flex-start; height: 38px; align-items: center; }   /* 36:140 — HUG 248x38 */
.market-tabs .tab {
  height: 36px; min-height: 0; padding: 0 14px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: var(--fs-sm); font-weight: 700; line-height: 16px;
  color: var(--color-text);
}
.market-tabs .tab > span { text-align: left; }   /* у кнопки по умолчанию center, в макете — left */
.market-tabs .tab:hover { background: var(--color-panel-deep); color: var(--color-text-strong); }
.market-tabs .tab[aria-selected="true"] {
  background: var(--color-accent); box-shadow: none;
  font-weight: 800; color: var(--color-on-accent);
}
.market-tabs .tab[aria-selected="true"]:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

/* ── список бегунов ─── 36:145 ────────────────────────────────────────── */
.runner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "no name form odds"
    "no meta form odds";
  align-items: center;
  column-gap: var(--space-12); row-gap: var(--space-2);
  min-height: 84px; padding: var(--space-16);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.runner__no   { grid-area: no; font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 800; line-height: 21px; color: var(--color-accent); }
.runner__name { grid-area: name; font-size: var(--fs-lg); font-weight: 800; line-height: 19.36px; color: var(--color-text-strong); }
.runner__meta { grid-area: meta; font-size: var(--fs-sm); font-weight: 400; line-height: 16px; color: var(--color-text-muted); }

.runner__form {
  grid-area: form; margin-left: var(--space-12);   /* 12 + 12 = gap 24 из макета */
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 42px;
}
.runner__form-label {
  font-size: var(--fs-2xs); font-weight: 700; line-height: 13.31px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-text-muted);
}
.runner__form-value { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 700; line-height: 18.2px; color: var(--color-text); }

.runner__odds { grid-area: odds; margin-left: var(--space-12); display: flex; gap: var(--space-8); }

.odds {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-10);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.odds:hover  { transform: translateY(-1px); }
.odds:active { transform: translateY(1px); }
/* Обычная строка: обе кнопки тёмные (36:172). Лайм — только у фаворита. */
.odds--win { min-width: 60px; background: var(--color-panel); box-shadow: inset 0 0 0 1px var(--color-border); }
.odds--win:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }
.odds--win .odds__label { font-size: var(--fs-xs); font-weight: 700; line-height: 15px; color: var(--color-text); }
.odds--win .odds__value { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 800; line-height: 18.2px; color: var(--color-text-strong); }

.runner--fav .odds--win {
  min-width: 58px; background: var(--color-accent); box-shadow: none; color: var(--color-on-accent);
}
.runner--fav .odds--win:hover { background: var(--color-accent-hover); box-shadow: none; }
.runner--fav .odds--win .odds__label { font-weight: 800; color: var(--color-on-accent); }
.runner--fav .odds--win .odds__value { color: var(--color-on-accent); }
.odds--place {
  min-width: 60px; background: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.odds--place:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }
.odds--place .odds__label { font-size: var(--fs-xs); font-weight: 700; line-height: 15px; color: var(--color-text); }
.odds--place .odds__value { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 800; line-height: 18.2px; color: var(--color-text-strong); }

/* «View full race card» нарисована только в мобильном фрейме (81:335), но на
   десктопе она остаётся: у выбранного заезда больше пяти бегунов, и без неё
   остальные недостижимы. Секция из-за этого выше макета — осознанный размен
   35px геометрии на доступность содержимого. */
.race-card-link { display: flex; justify-content: flex-end; padding-top: var(--space-12); }
.race-card-link .arrow-link { position: relative; }
.race-card-link .arrow-link::after { content: ""; position: absolute; inset: -6px -8px; }  /* тап-зона 24+ */

/* ── Same Race Multi: панель второго таба ─────────────────────────────── */
.srm { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-8); }
.srm__note { max-width: 900px; font-size: var(--fs-body); line-height: 21px; color: var(--color-text); }
.srm__actions { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; margin-top: var(--space-4); }
.srm__cta { min-height: 44px; padding-inline: 18px; border-radius: var(--radius-12); font-weight: 900; }
.srm__how { position: relative; }
.srm__how::after { content: ""; position: absolute; inset: -6px -8px; }   /* тап-зона 24+ */

/* ── responsible wagering ─── 40:271 ──────────────────────────────────── */
.rw__inner { display: flex; flex-direction: column; gap: var(--space-24); }
.rw__rule { height: 1px; border: 0; background: var(--color-border-light); }

.rw__grid { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.rw__copy { display: flex; flex-direction: column; gap: var(--space-16); }
.rw__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-green-deep);
}
.rw__title { font-size: var(--fs-h1); font-weight: 900; line-height: 48px; color: var(--color-text-dark); }
.rw__lead  { font-size: var(--fs-lg); font-weight: 400; line-height: 24px; color: var(--color-text-dark-muted); }

.rw__actions { display: flex; flex-direction: column; gap: 49px; }   /* 24 + линия 1 + 24 */
.rw-action { display: flex; flex-direction: column; gap: var(--space-8); }
.rw-action + .rw-action { position: relative; }
.rw-action + .rw-action::before {
  content: ""; position: absolute; inset-inline: 0; top: -25px; height: 1px;
  background: var(--color-border-light);
}
.rw-action__no {
  font-size: var(--fs-h1); font-weight: 900; line-height: 53.25px; letter-spacing: -1px;
  color: var(--color-green-deep);
}
.rw-action__title { font-size: var(--fs-h6); font-weight: 900; line-height: 22px; color: var(--color-text-dark); }
.rw-action__text  { font-size: var(--fs-body); font-weight: 400; line-height: 21px; color: var(--color-text-dark-muted); }
.rw-action__link {
  position: relative; align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-size: var(--fs-sm); font-weight: 800; line-height: 16px;
  color: var(--color-text-dark); text-decoration: none;
  transition: gap var(--dur-fast) var(--ease);
}
.rw-action__link::after { content: ""; position: absolute; inset: -6px -8px; }   /* тап-зона 24+ */
.rw-action__link:hover { gap: var(--space-10); text-decoration: underline; }

.rw__support {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4);   /* у компонента center, в макете 25:42/40:298 — по левому краю */
  height: 69px; padding: var(--space-16) var(--space-20);   /* FIXED 40:297 */
  justify-content: center;
  background: var(--color-card);
  box-shadow: inset 0 0 0 1px var(--color-border-light);     /* strokeAlign INSIDE */
  border-radius: var(--radius-14);
}
.rw__support-title { font-size: var(--fs-body); font-weight: 900; line-height: 17px; color: var(--color-text-dark); }
.rw__support-text  { display: block; font-size: var(--fs-sm); font-weight: 400; line-height: 16px; color: var(--color-text-dark-muted); }
.rw__support-text a { position: relative; color: var(--color-text-dark); font-weight: 700; }
.rw__support-text a::after { content: ""; position: absolute; inset: -8px -6px; }   /* тап-зона 24+ */

/* Лаймовый фокус на бежевом читается плохо — на светлой секции он тёмный. */
.rw :focus-visible { outline-color: var(--color-text-dark); }

/* ── планшет ──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .race-cards { grid-template-columns: repeat(3, 1fr); }
  .racing-intro__title { font-size: 40px; line-height: 46px; }
  .rw__grid { grid-template-columns: 1fr; }
  .rw__title { font-size: var(--fs-h2); line-height: 36px; }
  .runner { column-gap: var(--space-8); }
  .runner__form { margin-left: var(--space-8); }
  .runner__odds { margin-left: var(--space-8); }
}

/* ── мобильный фрейм макета ─── 79:4 ──────────────────────────────────── */
@media (max-width: 767px) {
  .dual--wide   { display: none; }
  .dual--narrow { display: inline; }

  /* 79:29: интро и лента заездов — один блок, 32/20/32 */
  .racing-intro { padding-block: var(--space-32) 0; }
  .racing-intro__inner { gap: var(--space-8); }
  .racing-intro__eyebrow { letter-spacing: 1px; }              /* 79:31 */
  .racing-intro__title { align-self: stretch; font-size: var(--fs-h2); line-height: 38px; }   /* 79:32 — FILL */
  .racing-intro__lead { font-size: var(--fs-body); line-height: 21px; }

  .next-to-jump { padding-block: var(--space-20) var(--space-32); }

  /* 81:147: горизонтальная лента карточек 152px */
  .race-cards {
    display: flex; gap: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .race-cards__item { flex: 0 0 152px; scroll-snap-align: start; }
  .race-card { min-height: 145px; }

  /* 79:43 */
  .selected-race { padding-block: 0 var(--space-32); }
  .selected-race__inner { gap: var(--space-16); }
  .market-tabs { align-self: stretch; height: 36px; }   /* 81:207 — на всю ширину */
  .race-card-link { display: flex; align-items: center; height: 40px; padding: 0 var(--space-12); }   /* 81:335 — 358x40 */
  .race-card-link .arrow-link { font-size: var(--fs-sm); font-weight: 800; line-height: 16px; }
  .race-detail { min-height: 143px; }
  .race-detail__info { flex: 1; }

  /* 81:211: на мобильном список — панель с фоном */
  .runner-list {
    background: #0f1923;              /* заливка runner-list мобильного фрейма 81:211 */
    border-radius: var(--radius-14);
    overflow: hidden;
  }

  /* 81:270: две строки — номер/кличка/коэффициенты, ниже подпись */
  .runner {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas:
      "no   name odds"
      "meta meta meta";
    align-items: center;
    column-gap: var(--space-12); row-gap: var(--space-8);
    min-height: 91px; padding: var(--space-12);
  }
  .runner__no {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: var(--color-accent-2); border-radius: var(--radius-12);
    font-size: var(--fs-body); font-weight: 800; line-height: 18.2px;
    color: var(--color-on-accent);
  }
  .runner__name { font-size: var(--fs-md); line-height: 18.15px; }
  .runner__meta { padding-left: 36px; font-size: var(--fs-xs); line-height: 15px; }
  .runner__form { display: none; }        /* форма ушла в подпись — 81:281 */
  .runner__odds { margin-left: 0; gap: var(--space-12); }   /* 81:271 — шаг 12, на десктопе 8 */

  .odds { height: 44px; min-height: 0; gap: var(--space-2); padding: 0 var(--space-8); justify-content: center; }   /* FIXED 81:275 */
  .odds--win, .runner--fav .odds--win {
    min-width: 52px; background: var(--color-accent-2); box-shadow: none; color: var(--color-on-accent);
  }
  .odds--win .odds__label, .runner--fav .odds--win .odds__label { font-weight: 800; color: var(--color-on-accent); }
  .odds--win .odds__value, .runner--fav .odds--win .odds__value { color: var(--color-on-accent); }
  .odds--place { min-width: 52px; }
  /* 10px макета верстается как 11px (решение F3) */
  .odds--win .odds__label, .odds--place .odds__label { font-size: var(--fs-2xs); line-height: 13px; }

  .srm__cta { width: 100%; justify-content: center; }

  /* 79:114 */
  .rw { padding-block: var(--space-40); }
  .rw__inner { gap: var(--space-24); }
  .rw__title { font-size: var(--fs-h3); line-height: 31px; }
  .rw__lead { font-size: var(--fs-body); line-height: 21px; }
  .rw__copy { gap: var(--space-12); }
  .rw__actions { gap: 33px; }                              /* 16 + линия 1 + 16 */
  .rw-action { gap: var(--space-6); }
  .rw-action + .rw-action::before { top: -17px; }
  .rw-action__no { font-size: var(--fs-h2); line-height: 39px; }
  .rw-action__title { font-size: var(--fs-lg); line-height: 19.36px; }
  .rw-action__text { font-size: var(--fs-sm); line-height: 18px; }
  .rw__support { height: auto; padding: var(--space-16); border-radius: var(--radius-12); }   /* 79:138 — 87 */
  .rw__support-text { font-size: var(--fs-xs); line-height: 17px; }
}