/* Racing — mockup pumtl23-racing-desktop [3:2865]. */

.meetings { position: relative; overflow: hidden; padding-bottom: var(--space-20); }
.meetings__watermark { top: -32px; left: 0; width: 100%; text-align: center; font-size: var(--fs-watermark-xl); line-height: 306px; color: var(--color-brand); opacity: .03; }
.meeting-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-16); margin-top: var(--space-30, 30px); }
.meeting-card {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-16); border-radius: var(--radius-xl);
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow var(--dur-base) var(--ease);
}
/* Карточка встречи — кнопка: сбрасываем стандартный вид и выравниваем текст. */
.meeting-card { width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer; }
.meeting-card:hover { box-shadow: inset 0 0 0 1px var(--color-border-brand-strong); }
.meeting-rail li { list-style: none; display: flex; }
.meeting-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
.meeting-card__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); line-height: 23px; color: var(--color-brand-light); }
.meeting-card__time { font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
.meeting-card__track { font-size: var(--fs-body); font-weight: 700; line-height: 20.42px; color: var(--color-white); }
.meeting-card__meta { font-size: var(--fs-small); line-height: 17px; color: var(--color-muted); }

.race-context { padding-block: var(--space-10); }
.race-context__card {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.race-context__meta { margin: 0; font-size: var(--fs-small); line-height: 17px; color: var(--color-muted); }
.race-context__title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 80px; line-height: 102px; text-transform: uppercase; color: var(--color-white);
}

.workspace { padding-top: var(--space-20); }
.workspace__row { display: flex; gap: var(--space-24); align-items: flex-start; }

.runner-board {
  flex: 1; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.runner-row__odds { display: contents; }

.runner-board__head,
.runner-row {
  display: grid;
  grid-template-columns: 48px 1.6fr 100px 1.2fr 80px 92px 92px;
  align-items: center; gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
}
.runner-board__head {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-muted-2);
  border-bottom: 1px solid var(--color-border);
}
.runner-row + .runner-row { border-top: 1px solid var(--color-border-soft); }
.runner-row__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h6); line-height: 31px; color: var(--color-brand); }
.runner-row__name { font-size: var(--fs-body); font-weight: 700; line-height: 20.42px; color: var(--color-white); }
.runner-row__barrier { font-size: var(--fs-small); line-height: 17px; color: var(--color-muted); }
.runner-row__jockey,
.runner-row__form { font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
.runner-board__note { margin: 0; padding: var(--space-20); font-size: var(--fs-small); color: var(--color-muted); }

/* Панель «Same race multi»: список выбранных ног и суммарный коэффициент. */
.runner-board__multi {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8);
  padding: var(--space-20); border-top: 1px solid rgba(255, 255, 255, .08);
}
.runner-board__multi .runner-board__note { padding: 0; }
.runner-board__legs { margin: 0; font-size: var(--fs-ui); line-height: 18px; color: var(--color-white); }
.runner-board__multi .btn:disabled { opacity: .5; cursor: not-allowed; }
/* Выбранная нога мультиставки видна и без цвета — по рамке и заливке. */
.odd.is-leg { background: var(--grad-brand); box-shadow: inset 0 0 0 2px var(--color-brand); }
.odd.is-leg .odd__name,
.odd.is-leg .odd__value { color: var(--color-white); }

.odd--dark { background: var(--fill-glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.odd--dark .odd__name { font-size: 9px; color: var(--color-muted-2); }
.odd--dark .odd__value { font-size: var(--fs-lead); color: var(--color-white); }
.odd--dark:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
.odd--dark[aria-pressed="true"] { background: var(--color-brand); box-shadow: none; }
.odd--dark[aria-pressed="true"] .odd__value { color: #fff; }

@media (max-width: 1199px) {
  .meeting-rail { grid-template-columns: repeat(2, 1fr); }
  .workspace__row { flex-direction: column; }
  .runner-board { width: 100%; }
}

/* ── мобильный фрейм [111:4] ──────────────────────────────────────────────
   Герой pad 40/16 gap 24, заголовок 32/35.2; «next to jump» — горизонтальный
   рельс карточек 155×91 через 12; карточка забега 146, поля бегунов — карточки. */
@media (max-width: 767px) {
  .hero { padding-block: var(--space-40); }
  .hero__headline { gap: var(--space-4); font-size: var(--fs-h4); line-height: 35.2px; }
  .hero__lead { font-size: var(--fs-ui); line-height: 20px; }
  .hero__cta { width: 100%; }

  .meetings { padding: var(--space-32) var(--container-pad-mobile); }
  .meetings .section__title { font-size: var(--fs-h6); line-height: 31px; }
  .meetings__watermark { font-size: 64px; line-height: 82px; }
  /* Встречи на мобильном едут вбок рельсом, как в макете, а не сеткой. */
  .meeting-rail {
    display: flex; gap: var(--space-12); margin-top: var(--space-16);
    overflow-x: auto; scrollbar-width: none;
  }
  .meeting-rail::-webkit-scrollbar { display: none; }
  /* Ширину рельса задаёт <li>: сама карточка теперь кнопка внутри него. */
  .meeting-rail li { flex: none; width: 155px; }
  .meeting-card { flex: none; width: 100%; min-height: 91px; padding: var(--space-12); gap: var(--space-8); }
  .meeting-card__num { font-size: var(--fs-small); line-height: 19px; }
  .meeting-card__track { font-size: var(--fs-small); line-height: 17px; }
  .meeting-card__meta { font-size: var(--fs-micro); line-height: 14.04px; }

  .race-context { padding: var(--space-8) var(--container-pad-mobile); }
  .race-context__card { padding: var(--space-16); gap: var(--space-12); }
  .race-context__title { font-size: var(--fs-h4); line-height: 41px; }
  .race-context .tab { min-height: 44px; }

  .workspace { padding: var(--space-8) var(--container-pad-mobile) var(--space-32); }
  .workspace__row { gap: var(--space-12); }
  .runner-board { background: none; box-shadow: none; overflow: visible; }
  .runner-board__head { display: none; }
  .runner-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name form" "meta meta" "win place";
    gap: var(--space-12);
    min-height: 146px; padding: var(--space-16);
    border-radius: var(--radius-xl); background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border-brand);
  }
  .runner-row + .runner-row { border-top: 0; margin-top: var(--space-12); }
  .runner-row__num { display: none; }
  .runner-row__name { grid-area: name; font-size: var(--fs-body-sm); line-height: 19.14px; }
  .runner-row__form { grid-area: form; font-size: var(--fs-caption); line-height: 15.31px; }
  .runner-row__barrier, .runner-row__jockey { grid-area: meta; font-size: var(--fs-caption); line-height: 15.31px; }
  .runner-row__jockey { justify-self: end; }
  /* На мобиле коэффициенты — своя строка из двух равных кнопок (макет 159+159). */
  .runner-row__odds { display: flex; grid-area: odds; gap: var(--space-8); }
  .runner-row__odds .odd { flex: 1; }
}

@media (max-width: 767px) {
  /* Мобильный герой racing — только текст: снимок в этот фрейм не входит. */
  .hero__right { display: none; }

  /* Карточка бегуна 146: 16 + верх 23 + 12 + середина 15 + 12 + коэффициенты 52 + 16.
     Номер и кличка стоят в строке, форма — справа, барьер и жокей — второй строкой. */
  .runner-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'num name form' 'meta jockey jockey' 'odds odds odds';
    align-items: center; gap: var(--space-12) var(--space-8);
    min-height: 146px;
  }
  .runner-row__num { display: block; grid-area: num; font-size: var(--fs-lead); line-height: 23px; }
  .runner-row__name { font-size: var(--fs-body-sm); line-height: 19.14px; }
  .runner-row__barrier { grid-area: meta; }
  .runner-row__jockey { grid-area: jockey; justify-self: start; }
  .runner-row__form { justify-self: end; }
  .runner-row .odd { min-height: 52px; padding: 6px 0; }
  .odd--dark .odd__name { font-size: 9px; line-height: 11.48px; }
  .odd--dark .odd__value { font-size: var(--fs-body); line-height: 20.42px; }
}

/* ── содержимое светлых полос racing ──────────────────────────────────────
   Макет: meeting-card #ffffff (активная — градиент бренда), header-card #ffffff
   с «RACE 04» #0a0f1e, runner-board #ffffff со строками #11172a и линиями #e5e7eb. */
.section--light .meeting-card__num { color: var(--color-brand); }
.section--light .meeting-card.is-active {
  background: var(--grad-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}
.section--light .meeting-card.is-active .meeting-card__num,
.section--light .meeting-card.is-active .meeting-card__track,
.section--light .meeting-card.is-active .meeting-card__time { color: var(--color-white); }
.section--light .meeting-card.is-active .meeting-card__meta { color: rgba(255, 255, 255, .702); }

.section--light .race-context__card {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.section--light .race-context__title { color: #0a0f1e; }
.section--light .race-context__meta { color: var(--color-muted-2); }
.section--light .tab--dark {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
  color: var(--color-text-dark);
}
.section--light .tab--dark[aria-selected="true"] {
  background: var(--color-brand); color: var(--color-white); box-shadow: none;
}

.section--light .runner-board {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.section--light .runner-board__head { color: #888; border-bottom-color: #e5e7eb; }
.section--light .runner-row + .runner-row { border-top-color: #e5e7eb; }
.section--light .runner-row__num { color: #8b8b8b; }   /* макетный #999 давал 2.85:1 */
.section--light .runner-row__name,
.section--light .runner-row__form { color: #11172a; }
.section--light .runner-row__barrier { color: #777; }
.section--light .runner-row__jockey { color: #555; }
.section--light .odd--dark {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.section--light .odd--dark .odd__name { color: var(--color-muted-2); }
.section--light .odd--dark .odd__value { color: var(--color-text-dark); }
.section--light .odd--dark[aria-pressed="true"] { background: var(--color-brand); box-shadow: none; }
.section--light .odd--dark[aria-pressed="true"] .odd__name { color: rgba(255, 255, 255, .8); }
.section--light .odd--dark[aria-pressed="true"] .odd__value { color: var(--color-white); }

/* Панель мультиставки лежит на белой таблице бегунов — текст здесь тёмный. */
.section--light .runner-board__multi { border-top-color: #e5e7eb; }
.section--light .runner-board__note { color: var(--color-muted-3); }
.section--light .runner-board__legs { color: var(--color-text-dark); }
.section--light .odd.is-leg { background: var(--grad-brand); box-shadow: inset 0 0 0 2px var(--color-brand); }
.section--light .odd.is-leg .odd__name { color: rgba(255, 255, 255, .8); }
.section--light .odd.is-leg .odd__value { color: var(--color-white); }

/* Купон остаётся тёмной панелью и на светлой полосе — как в макете. */
.section--light .bet-slip { background: var(--color-surface); }