/* racing — правки по макету поверх pages.css.
   Файл подключается после pages.css, поэтому правила с той же
   специфичностью здесь выигрывают. Значения — числами из макета. */

/* ═══ Интро (0:823 / 0:6642) ══════════════════════════════════════════ */

/* 0:824 — intro-left 880x320, pad(40,40,40,80), контент прижат к верху.
   Правое поле в макете 40, а не 80: при 80 лид (0:831, бокс 760x22)
   переносится на вторую строку. */
.racing-intro__left {
  justify-content: flex-start;
  padding: 40px 40px 40px 80px;
}

/* 0:828 — счётчик в макете #f20d2f. Берём --color-brand-text (#c80a26):
   12px bold на #f4e2cf с чистым брендовым не добирает 4.5:1. */
.racing-intro__count { color: var(--color-brand-text); }

/* 0:831 — лид Geist 400 16/22.4, бокс 760x22 → строка 22px */
.racing-intro__lead { font-size: 16px; line-height: 22px; }

/* 0:836 — панель героя коралловая #ff704d, обводка 1px INSIDE */
.racing-intro__right {
  background: var(--color-flame);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

/* 0:839 — вертикальная полоса 8x320 у левого края панели */
.racing-intro__right::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 8px;
  height: 100%;
  background: rgba(242, 13, 47, .667);
}

/* 0:838 — фото 440x280 по центру панели (поля 60/20), без скругления */
.racing-intro__right img {
  left: 60px;
  right: auto;
  top: 20px;
  bottom: auto;
  border-radius: 0;
}

/* 0:837 — водяной знак: бокс 680x110 (габарит 688.69x203.57 при повороте
   -8deg), центр смещён от центра панели на +4.35 / -122.85. Заливка
   полупрозрачная красная плюс белая обводка 2px. */
.racing-intro__watermark {
  left: 50%;
  top: 50%;
  width: 680px;
  translate: calc(-50% + 4.35px) calc(-50% - 122.85px);
  rotate: -8deg;
  font-size: 120px;
  line-height: 110px;
  color: rgba(242, 13, 47, .133);
  -webkit-text-stroke: 2px var(--color-surface);
}

/* 0:6648 / 0:6657 — мобильные водяные знаки, на десктопе их нет */
.racing-intro__wm,
.racing-intro__wm-bets { display: none; }

.racing-intro__title-wrap { position: relative; }

/* ═══ Ближайшие забеги (0:840) ════════════════════════════════════════ */

/* 0:845 — «VIEW ALL RACES» в шапке ленты: 162x37, белая плашка с
   обводкой 1.5px, а не тёмная заливка */
@media (min-width: 768px) {
  .ntj__head .ntj__all {
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: inset 0 0 0 1.5px var(--color-ink);
  }

  .ntj__head .ntj__all:hover { background: var(--color-surface-hover); }
}

/* ═══ Карточка забега (0:889 / 0:6699) ════════════════════════════════ */

/* 0:892 — Geist 900 14/18.2 ; 0:893 — Archivo Black 40/43.52 */
.race-detail__track { line-height: 18px; }
.race-detail__number { line-height: 44px; }

/* 0:903 / 0:923 — линия 1px #120e0d при непрозрачности 0.15 */
.race-detail__rule { box-shadow: 0 0 0 .5px var(--color-line-strong); }

/* 0:895-0:902 — четыре плашки с разными заливками, а не одинаковые */
.race-detail__facts li:nth-child(1) { background: var(--color-ink); color: var(--color-surface); }
.race-detail__facts li:nth-child(2) { background: var(--color-flame); }
.race-detail__facts li:nth-child(3) { background: var(--color-paper); }
.race-detail__facts li:nth-child(4) { background: var(--color-surface); color: var(--color-brand-text); }

/* 0:905 — «RACES:» Archivo Black 14/15.23 #120e0d, а не приглушённый Geist */
.race-detail__races-label {
  font-family: var(--font-display);
  font-size: var(--fs-label-sm);
  line-height: 15px;
  color: var(--color-ink);
}

/* 0:907 — чип 55x35, радиус 6, белая заливка, обводка 1.5px.
   0:913 — активный: заливка #f20d2f, обводка сохраняется. */
.race-chip {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.race-chip:hover { background: var(--color-paper); }

.race-chip.is-active {
  background: var(--color-brand);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

/* 0:924 — переключатель рынка: не плашки, а вкладки с подчёркиванием.
   Активная (0:925) — обводка только снизу, 3px #f20d2f. */
.race-detail__markets { gap: var(--space-4); }

.market-switch {
  padding-inline: var(--space-10);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-label-sm);
  color: var(--color-muted);
}

.market-switch:hover { color: var(--color-ink); }

.market-switch.is-active {
  background: none;
  color: var(--color-brand-text);
  box-shadow: inset 0 -3px 0 var(--color-brand);
}

/* 0:929 — рабочая область 1280 = поле 916 + зазор 24 + купон 340 */
@media (min-width: 1024px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  /* 0:1094 — купон 340: базовый .slip шире (360) и вылезал за колонку */
  .slip--race { width: 100%; }
}

/* 0:890 — шапка карточки: плашки выровнены по центру блока 68, а не по верху */
.race-detail__head { align-items: center; }

/* ═══ Поле участников (0:930) ═════════════════════════════════════════ */
@media (min-width: 768px) {
  /* 0:931 — шапка поля 916x98: коралловая полоса, кикер над заголовком,
     счётчик участников — тёмная плашка справа, а не серый текст */
  .runner-board__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: var(--space-2);
    padding: var(--space-10);
    background: var(--color-flame);
    box-shadow: inset 0 0 0 1px var(--color-ink);
  }

  /* 0:933 — кикер Geist 900 12/15.6 #120e0d */
  .runner-board__kicker {
    grid-area: 1 / 1;
    font-size: var(--fs-label-xs);
    line-height: 16px;
    color: var(--color-ink);
  }

  .runner-board__title { grid-area: 2 / 1; }

  /* 0:935 — плашка «8 RUNNERS» 85x22, pad(4,10), заливка #120e0d */
  .runner-board__count {
    grid-area: 1 / 2 / 3 / 3;
    justify-self: end;
    margin: 0;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-ink);
    color: var(--color-surface);
  }

  /* 0:937 / 0:946 — колонки 30·200·180·60·50·60·110·110 при зазоре 12
     и полях 16: 52+212+192+72+62+72+122+132 = 916 */
  .runners th,
  .runners tbody td { padding-inline: var(--space-3); }
  .runners th:first-child,
  .runners tbody td:first-child { padding-left: var(--space-8); }
  .runners th:last-child,
  .runners tbody td:last-child { padding-right: var(--space-8); }

  .runners tr > :nth-child(5) { text-align: center; }
  .runners tr > :nth-child(7) { text-align: center; }
  .runners tr > :nth-child(8) { text-align: center; }

  /* 0:938 — заголовки колонок #120e0d, не приглушённые */
  .runners th { color: var(--color-ink); }

  /* 0:946 — разделитель строк 1px #120e0d */
  .runners td { border-top: 1px solid var(--color-ink); }

  /* 0:947 — номер участника в плашке 30x30, r4 */
  .runners__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    background: var(--color-ink);
    color: var(--color-surface);
  }

  /* 0:952 — жокей Geist 400; полужирный только в выбранной строке */
  .runners__jockey { font-weight: var(--fw-regular); }

  /* 0:946 — строка выбранного участника подсвечена, её номер красный */
  .runners tbody tr:has(.odds.is-picked) { background: rgba(244, 226, 207, .333); }
  .runners tbody tr:has(.odds.is-picked) .runners__badge { background: var(--color-brand); }
  .runners tbody tr:has(.odds.is-picked) .runners__jockey { font-weight: var(--fw-bold); }

  /* 0:957 — кнопка коэффициента 110x48, радиус 8 */
  .runners .odds--sm {
    width: 100%;
    height: 48px;
    padding-inline: var(--space-8);
    border-radius: var(--radius-lg);
  }
}

/* 0:937 / 0:946 — фиксированные колонки 30·200·180·60·50·60·110·110 при
   зазоре 12 и полях 16: 52+212+192+72+62+72+122+132 = 916. Включаются с
   1150px — там же, где появляются широкие колонки (.only-wide). */
@media (min-width: 1150px) {
  .runners { table-layout: fixed; }
  .runners tr > :nth-child(1) { width: 52px; }
  .runners tr > :nth-child(2) { width: 212px; }
  .runners tr > :nth-child(3) { width: 192px; }
  .runners tr > :nth-child(4) { width: 72px; }
  .runners tr > :nth-child(5) { width: 62px; }
  .runners tr > :nth-child(6) { width: 72px; }
  .runners tr > :nth-child(7) { width: 122px; }
  .runners tr > :nth-child(8) { width: 132px; }
}

/* ═══ Расписание (0:1138 / 0:7003) ════════════════════════════════════ */

/* 0:1146 / 0:7008 — список в рамке 1.5px #120e0d с радиусом 8,
   строки разделены сплошной линией 1px, а не десятипроцентной */
.schedule {
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  overflow: hidden;
}

.schedule__row { border-top: 1px solid var(--color-ink); }
.schedule__row:first-child { border-top: 0; }
.schedule__row:last-child { border-bottom: 0; }

/* 0:1148 — время Archivo Black 20/21.76 #ff7900. В вёрстке
   --color-amber-text (#b35400): чистый #ff7900 даёт 2.1:1 на белом. */
.schedule__time { line-height: 22px; color: var(--color-amber-text); }

/* 0:1149 — трек Archivo Black 18/19.58 */
.schedule__track { font-size: var(--fs-label-lg); line-height: 20px; }

/* 0:1144 — «VIEW ALL RACES» расписания: тёмная плашка 172x41, pad 12/24 */
.upcoming__head .ntj__all {
  height: 41px;
  padding-inline: var(--space-10);
  color: var(--color-paper);
  font-weight: var(--fw-black);
}

/* ═══════════════════════════════════════════════════════════════════════
   Мобильный фрейм 0:6621 — отдельный макет
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 0:6646 — счётчик Geist 900 14/18.2 */
  .racing-intro__count { font-weight: var(--fw-black); }

  /* 0:6650 — лид Geist 500 13/18 */
  .racing-intro__lead { font-size: var(--fs-body-sm); line-height: 18px; font-weight: var(--fw-medium); }

  /* 0:6654 — «18+ BET RESPONSIBLY.» Geist 800 10/13 */
  .racing-intro__mark { font-weight: var(--fw-extrabold); }

  /* 0:6655 — постер 358x200: коралловый фон, обводка 2px, радиус 12 */
  .racing-intro__right { box-shadow: inset 0 0 0 2px var(--color-ink); }

  /* 0:6658 — полоса 8x200 */
  .racing-intro__right::before { background: rgba(242, 13, 47, .6); }

  /* 0:6656 — фото 247x157 по центру постера */
  .racing-intro__right img { left: 55.5px; top: 21.5px; }

  /* На 390 знак «RACING» уходит из постера за заголовок (0:6648),
     а в постере стоит «MIGHTYBET.CO» (0:6657) */
  .racing-intro__watermark { display: none; }

  .racing-intro__wm {
    display: block;
    position: absolute;
    left: 0;
    top: -10px;
    z-index: 0;
    width: 280px;
    height: 58px;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 69.632px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(242, 13, 47, .039);
    -webkit-text-stroke: 1px var(--color-brand);
    opacity: .3;
    pointer-events: none;
  }

  .racing-intro__title { position: relative; z-index: 1; }

  /* 0:6657 — бокс 358x104 (габарит 371.8x176.16 при повороте -12deg),
     центр смещён от центра постера на +16.9 / -76.35 */
  .racing-intro__wm-bets {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 358px;
    translate: calc(-50% + 16.9px) calc(-50% - 76.35px);
    rotate: -12deg;
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 52.224px;
    text-transform: uppercase;
    color: rgba(242, 13, 47, .188);
    -webkit-text-stroke: 1px var(--color-surface);
    pointer-events: none;
  }

  /* 0:6700 — «FLEMINGTON» и «RACE 04» на 390 стоят колонкой, зазор 4 */
  .race-detail__name {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* 0:6701 — Geist 900 13/16.9 ; 0:6702 — Archivo Black 30/34 */
  .race-detail__track { font-size: var(--fs-body-sm); line-height: 17px; }
  .race-detail__number { font-size: 30px; line-height: 34px; }

  /* 0:6704-0:6711 — плашки pad(3,8), 10/13 */
  .race-detail__facts li { padding: 3px 8px; }
  .race-detail__facts li:nth-child(4) { box-shadow: inset 0 0 0 1px var(--color-brand); }

  /* 0:6714 — «RACES:» Archivo Black 12/13.06 */
  .race-detail__races-label { font-size: var(--fs-label-xs); line-height: 13px; }

  /* 0:6716 — чип 38x38, зазор 6 */
  .race-detail__races-list { gap: var(--space-3); }

  .race-chip {
    width: 38px;
    height: 38px;
    padding-inline: 0;
    line-height: 38px;
    text-align: center;
    font-size: var(--fs-label-sm);
  }

  /* 0:6733 — две вкладки во всю ширину, высота 29, текст по центру */
  .market-switch {
    flex: 1;
    min-width: 0;
    padding-inline: 0;
    text-align: center;
    font-size: var(--fs-label-xs);
  }

  /* 0:7007 — заголовок расписания Archivo Black 24/28 */
  .upcoming__title { font-size: var(--fs-title); line-height: 28px; }

  /* 0:7009 — строка 358x96: три ряда (время/трек, вид/отсчёт, ссылка),
     а не два. Зазор 8, padding 14. */
  .schedule__row {
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    gap: var(--space-4) var(--space-6);
  }

  .schedule__time { grid-area: 1 / 1; font-size: var(--fs-label-lg); line-height: 20px; }
  .schedule__track { grid-area: 1 / 2; justify-self: end; font-size: var(--fs-label-sm); line-height: 15px; }
  .schedule__kind { grid-area: 2 / 1; font-size: var(--fs-label-xs); line-height: 16px; }
  /* 0:7015 — обратный отсчёт в макете набран брендовым красным, а не
     приглушённым: на мобильном фрейме это единственный красный акцент
     строки, и без него полоса читалась ровнее макета. */
  .schedule__starts {
    grid-area: 2 / 2;
    justify-self: end;
    font-size: var(--fs-label-xs);
    line-height: 16px;
    color: var(--color-brand-text);
  }

  /* 0:7016 — ссылка отдельной строкой справа, отступ сверху 4 */
  .schedule__link {
    grid-area: 3 / 1 / 4 / 3;
    justify-self: end;
    margin-left: 0;
    padding-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    line-height: 12px;
  }
}

/* ── Купон на мобильном фрейме Racing (0:6959) ────────────────────────────
   Здесь выбор лежит БЕЗ карточки — прямо на чернильной панели, а поле ставки
   тёмное (#282423, радиус 10) с кремовой суммой. У нас на 390 действовали
   десктопные числа: кремовая карточка и белое поле — расхождение 29.98%.
   Поле оставляем редактируемым: в макете вместо него подпись и ссылка «Edit»,
   но мёртвых контролов на сайте нет (решение F3). */
@media (max-width: 767px) {
  /* 0:6964 — группа выбора: зазор 10, без фона и паддинга */
  .page-racing .slip--race .slip__pick {
    gap: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--color-surface);
  }

  /* 0:6966 — бейдж лиги красный, 0:6968 — «Remove ×» 13/16.9 */
  .page-racing .slip--race .slip__pick-head { justify-content: space-between; min-height: 18px; }
  .page-racing .slip--race .slip__pick-head .badge {
    padding: 3px 8px;
    border-radius: var(--radius);
    background: var(--color-brand);
    color: var(--color-surface);
    font-size: 11px;
    line-height: 12px;
  }
  .page-racing .slip--race .slip__remove { font-size: 13px; line-height: 17px; color: var(--color-brand); }

  /* 0:6970 — событие 15/19.5 кремовым, 0:6971 — рынок 13/16.9 при 0.7 */
  .page-racing .slip--race .slip__event {
    order: 3;
    width: 100%;
    margin-top: 10px;
    font-size: 15px;
    line-height: 20px;
    color: var(--color-surface);
  }
  .page-racing .slip--race .slip__market { font-size: 13px; line-height: 17px; color: var(--color-paper); opacity: .7; }

  /* 0:6973 — имя 16/20.8 кремовым, 0:6974 — коэффициент Archivo Black 18/19.58 */
  .page-racing .slip--race .slip__selection {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: 16px;
    line-height: 21px;
    color: var(--color-surface);
  }
  .page-racing .slip--race .slip__selection strong {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: 18px;
    line-height: 20px;
    color: var(--color-paper);
  }

  /* 0:6978 — поле ставки тёмное с радиусом 10 и кремовой суммой */
  .page-racing .slip--race .slip__stake-control {
    padding-inline: var(--space-8);
    border-radius: 10px;
    background: #282423;
    box-shadow: none;
  }
  .page-racing .slip--race .slip__currency,
  .page-racing .slip--race .slip__input { color: var(--color-paper); }
  .page-racing .slip--race .slip__input { background: none; }
}