/* Sports and Racing — numbers from fig-spec of robwaterhause-sports (1:257),
 * robwaterhause-racing (1:416) and their -mobile frames. */

/* ── page hero (shared by sports / racing / betstop / how-it-works) ───── */
.phero { position: relative; overflow: hidden; background: var(--color-bg); }
.phero__glow { position: absolute; left: 550px; top: 50px; width: 800px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 24, 63, .11) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.phero__inner { position: relative; display: flex; align-items: flex-start; gap: 40px; min-height: 571px; padding-block: 79px; }
.phero__editorial { display: flex; flex-direction: column; gap: 32px; width: 560px; flex: none; }
.phero__title {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero-lg); line-height: 81px; letter-spacing: -.04em; color: var(--color-text);
}
.phero__title-grad {
  background: var(--grad-headline); -webkit-background-clip: text; background-clip: text; color: var(--color-text); -webkit-text-fill-color: transparent;   /* цвет остаётся заданным: прозрачной делается только заливка глифов */
  padding-bottom: .2em; margin-bottom: -.2em;   /* line-height 81 < кегль 90: без запаса хвост «g» выходит из бокса и остаётся незакрашенным */
}
.phero__lead { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.phero__cta { display: flex; align-items: center; gap: 24px; }

/* racing hero console */
.phero--racing .phero__glow { left: 580px; top: 60px; background: var(--grad-glow); filter: blur(100px); }   /* 1:439: FOREGROUND_BLUR 100 */
.phero--racing .phero__title { gap: 2px; }   /* 1:444 gap 2, у sports 1:285 — 4 */
.phero--racing .phero__inner { min-height: 720px; gap: 0; padding-block: 0; }
.phero--racing .phero__editorial { width: 520px; margin-top: 130px; gap: 32px; }   /* 1:440 @80,240 в фрейме от 110 → 130 */
.phero__console { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 440px; height: 360px; margin: 110px 0 0 80px; padding: 32px; flex: none; box-shadow: inset 0 0 0 1.5px var(--color-border-brand); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }   /* 1:454 @680 = 80 контейнера + 520 текста + 80; обводка 1.5, blur 30 */
/* декоративные кольца «трека» (1:455, 1:456) и отражение консоли (1:469) — как в макете */
.phero__arc { position: absolute; border-radius: 50%; pointer-events: none; }
.phero__arc--1 { left: 180px; top: -60px; width: 300px; height: 300px; box-shadow: inset 0 0 0 1px var(--color-border); }
.phero__arc--2 { left: 200px; top: -40px; width: 260px; height: 260px; box-shadow: inset 0 0 0 1px var(--color-brand); opacity: .3; }
.phero__reflection { position: absolute; left: 20px; top: 362px; width: 400px; height: 64px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--color-surface-glass); opacity: .15; pointer-events: none; }
.phero__console > .eyebrow, .phero__console-body, .phero__console-foot { position: relative; }
.phero__console-head { justify-content: space-between; }
.phero__console-body { display: flex; flex-direction: column; gap: 8px; }
.phero__console-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 44px; letter-spacing: -.02em; color: var(--color-text); }
.phero__console-meta { font-size: var(--fs-ui); line-height: 19px; color: var(--color-muted); }
.phero__console-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.phero__console-label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-ui); line-height: 17px; text-transform: uppercase; color: var(--color-text); }
.countdown { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 700; }
.countdown__num { font-size: var(--fs-hero); line-height: 72px; letter-spacing: -.02em; color: var(--color-brand); }
.countdown__unit { font-size: var(--fs-lead); line-height: 20px; text-transform: uppercase; color: var(--color-muted); }
.countdown--lg .countdown__num { font-size: 56px; line-height: 56px; }
.countdown--xl .countdown__num { font-size: var(--fs-hero); line-height: 72px; }
.phero__orbits { position: absolute; right: 80px; top: 150px; display: flex; flex-direction: column; gap: 6px; }
.orbit {
  display: flex; flex-direction: column; gap: 8px; width: 200px; padding: 16px;
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border);
  text-decoration: none; transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.orbit:hover { box-shadow: inset 0 0 0 1px var(--color-border-brand-2); transform: translateX(-2px); }
.orbit__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro); line-height: 12px; letter-spacing: .08em; color: var(--color-muted); }
.orbit__time { font-size: 18px; line-height: 22px; color: var(--color-text); }

/* ── market control (sports) ──────────────────────────────────────────── */
/* On desktop the title and the filter console share one row (1:294); the mobile
   frame splits them into two sections (4:37 + 4:39), so the filter lives in its
   own section and is pulled up into the row at ≥1200px. */
.mcontrol { padding: 40px 0 0; background: var(--color-bg); }
.mcontrol__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 57px; }
.mfilter { padding: 0 0 40px; background: var(--color-bg); }
@media (min-width: 1200px) {
  .mcontrol { padding-bottom: 40px; }   /* 1:293 = 137px: 40 + 57 + 40 */
  .mfilter { margin-top: -97px; padding-bottom: 40px; }
  .mfilter .container { display: flex; justify-content: flex-end; }
}
.filter-console { padding: 16px; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--color-border); }
.filter-console__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 12px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-bg-alt); color: var(--color-muted);
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-caption); line-height: 13px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--color-text); }
.chip.is-active { background: var(--color-brand); color: var(--color-text); font-weight: 700; }

/* ── market cards (sports) ────────────────────────────────────────────── */
.mgrid { padding: 20px 0 60px; background: var(--color-bg); }
.mgrid .container { display: flex; flex-direction: column; gap: 32px; }
.mgrid__group { display: flex; flex-direction: column; gap: 20px; }
.mgrid__group[hidden] { display: none; }
.mgrid__kicker { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.mgrid__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mgrid__empty { padding: 40px 0; text-align: center; color: var(--color-muted); }
.mgrid__empty a { color: var(--color-brand); text-decoration: none; }
.mcard {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 380px; padding: 24px;
  background: var(--color-surface); border-radius: var(--radius-3xl); box-shadow: inset 0 0 0 1px var(--color-border);
  transition: box-shadow var(--dur-base) var(--ease);
}
.mcard:hover { box-shadow: inset 0 0 0 1px var(--color-border-brand-2); }
.mcard__head { display: flex; flex-direction: column; gap: 12px; }
.mcard__meta { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-caption); line-height: 13px; color: var(--color-muted); }
.mcard__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h6); line-height: 27px; color: var(--color-text); }
.mcard__odds { display: flex; flex-direction: column; gap: 12px; }
.mcard__odds--3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.odd--wide { height: 49px; padding: 0 16px; border-radius: var(--radius-md); background: #000; }
.odd--wide .odd__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); line-height: 16px; }
.odd--wide .odd__price { font-size: var(--fs-ui); line-height: 17px; }

/* ── meetings navigator (racing) ──────────────────────────────────────── */
/* Desktop draws the header and the rail as one section (1:479); the mobile frame
   splits them (4:214 header + 4:219 rail), so the rail is its own section. */
.meetings { padding: 80px 0 0; background: var(--color-bg); }
@media (min-width: 1200px) { .meetings { padding-bottom: 32px; } .meetings-rail { padding: 0 0 48px; } }
.meetings .container { display: flex; flex-direction: column; gap: 32px; }
.meetings-rail { padding: 32px 0 48px; background: var(--color-bg); }
.meetings__head { align-items: flex-start; }
.meetings__lead { width: 360px; flex: none; }
.meetings__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: hidden; background: var(--color-bg-deep); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--color-border); }
.meeting {
  display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 0; cursor: pointer; text-align: left;
  background: var(--color-bg-deep); box-shadow: -1px 0 0 var(--color-border);
  transition: background var(--dur-base) var(--ease);
}
.meeting:first-child { box-shadow: none; }
.meeting:hover { background: var(--color-surface); }
.meeting.is-active { background: linear-gradient(0deg, #2a0710 0%, #0b090a 100%); }
.meeting__top { display: flex; justify-content: space-between; align-items: center; }
.meeting__no { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 24px; color: var(--color-muted); }
.meeting.is-active .meeting__no { color: var(--color-text); }
.meeting__mins { font-size: var(--fs-small); line-height: 15px; color: var(--color-muted); }
.meeting.is-active .meeting__mins { color: var(--color-brand-2); }
.meeting__track { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.meeting__meta { font-size: var(--fs-caption); line-height: 15px; color: var(--color-muted); }

/* ── selected race ────────────────────────────────────────────────────── */
.selected { padding: 0 0 48px; background: var(--color-bg); }
.selected__panel {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 32px; overflow: hidden;
  min-height: 152px; padding: 20px 32px;
  background: linear-gradient(90deg, #420b16 0%, #0b090a 100%); border-radius: var(--radius-xl);
}
.selected__curve { position: absolute; left: 380px; top: -50px; width: 600px; height: 400px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-border-brand); pointer-events: none; }
.selected__left { position: relative; display: flex; flex-direction: column; gap: 12px; }
.selected__title { display: flex; align-items: baseline; gap: 16px; font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 59px; letter-spacing: -.02em; color: var(--color-text); }
.selected__race { font-size: var(--fs-h5); line-height: 29px; text-transform: uppercase; color: var(--color-brand-2); }
.selected__meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); line-height: 16px; text-transform: uppercase; color: var(--color-muted); }
.selected__meta span + span::before { content: ""; display: inline-block; width: 12px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--color-muted); }
.selected__right { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.selected__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13px; text-transform: uppercase; color: var(--color-muted); }

/* ── market type switcher ─────────────────────────────────────────────── */
.mtype { padding: 0 0 24px; background: var(--color-bg); }
.mtype__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.mtype__group { display: flex; align-items: center; gap: 12px; }
.mtype__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.mtype__hint { font-size: var(--fs-label); line-height: 18px; color: var(--color-muted); }

/* ── runner board ─────────────────────────────────────────────────────── */
.board { padding: 0 0 64px; background: var(--color-bg); }
.board__table { overflow: hidden; background: var(--color-bg-deep); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--color-border); }
.board__head, .board__row { display: grid; grid-template-columns: 620fr 120fr 240fr 180px; gap: 24px; align-items: center; }
.board__head {
  padding: 16px 24px; background: var(--color-bg-alt);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted);
}
.board__row { padding: 20px 24px; box-shadow: inset 0 1px 0 var(--color-border); transition: background var(--dur-fast) var(--ease); }
.board__row:hover { background: var(--color-surface); }
.board__meta { display: contents; }   /* на 390 это один meta-ряд, на десктопе — две колонки таблицы */
.board__runner { display: flex; align-items: center; gap: 16px; min-width: 0; }
.board__no {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--color-bg-alt); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); line-height: 16px; color: var(--color-text);
}
.board__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); line-height: 20px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__barrier { font-family: var(--font-display); font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }
.board__jockey { display: flex; flex-direction: column; gap: 2px; }
.board__jockey-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-ui); line-height: 17px; color: var(--color-text); }
.board__form { font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); }
.board__odds { display: flex; gap: 8px; }
.odd--racing { flex: 1; flex-direction: column; gap: 1px; height: 41px; padding: 6px 12px; border-radius: 6px; background: var(--color-bg); box-shadow: none; }
.odd--racing .odd__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-tiny); line-height: 11px; }
.odd--racing .odd__price { font-size: var(--fs-ui); line-height: 17px; }

.track-separator { padding: 0 0 80px; background: var(--color-bg); }
.track-separator__line { display: block; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .05) 0%, var(--color-brand) 30%, var(--color-brand) 37%, rgba(255, 255, 255, .05) 100%); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .phero__inner { flex-direction: column; min-height: 0; gap: 24px; padding-block: 40px 48px; }   /* padding-block: сокращённый padding обнулил бы боковые 16px контейнера */
  .phero__editorial { width: auto; gap: 24px; }
  .phero__title { gap: 2px; font-size: 52px; line-height: 49px; }
  .phero__lead { font-size: var(--fs-ui); line-height: 21px; }
  .phero__cta { width: 100%; }
  .phero__cta .btn { width: 100%; height: 44px; }
  /* The mobile frame drops the hero console and the orbit cards: the meetings
     rail below shows the same races (4:178 is editorial only). */
  .phero--racing .phero__inner { min-height: 0; gap: 20px; padding-block: 32px; }
  .phero--racing .phero__editorial { width: auto; margin-top: 0; gap: 20px; }
  .phero--racing .phero__title { gap: 0; font-size: 52px; line-height: 52px; }
  .phero--racing .phero__console, .phero--racing .phero__orbits { display: none; }
  .phero__console { width: auto; height: auto; margin: 0; padding: 20px; gap: 16px; }
  .phero__console-title { font-size: var(--fs-h4); line-height: 34px; }
  .countdown--lg .countdown__num { font-size: var(--fs-h3); line-height: 44px; }
  .countdown--xl .countdown__num { font-size: var(--fs-h2-sm); line-height: 40px; }
  .phero__orbits { position: static; flex-direction: row; gap: 12px; overflow-x: auto; scrollbar-width: none; }
  .phero__orbits::-webkit-scrollbar { display: none; }
  .orbit { flex: none; width: 160px; }

  .mcontrol { padding: 24px 0 16px; }
  .mcontrol__inner { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; }
  .mfilter { padding: 0 0 24px; }
  .mcontrol .sec-title--md { font-size: var(--fs-h4); line-height: 34px; }
  .filter-console { padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .filter-console__row { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .filter-console__row::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 12px 18px; font-size: var(--fs-small); line-height: 15px; }

  .mgrid { padding: 0 0 48px; }
  .mgrid .container { gap: 24px; }
  .mgrid__group { gap: 16px; }
  .mgrid__cards { grid-template-columns: 1fr; gap: 16px; }
  .mcard { min-height: 0; gap: 16px; padding: 16px; border-radius: var(--radius-xl); }
  .mcard__head { gap: 6px; }
  .mcard__title { font-size: 18px; line-height: 22px; }
  .mcard__odds { flex-direction: row; gap: 8px; }
  .mcard__odds .odd { flex: 1; }
  .odd--wide { height: 48px; padding: 0 12px; }
  .odd--wide .odd__name { font-size: var(--fs-small); line-height: 15px; }

  .meetings { padding: 24px 0 18px; }   /* 4:214 = 153: 24 + 105 + 24 */
  .meetings .container { gap: 16px; }
  .meetings__head { gap: 8px; }
  .meetings-rail { padding: 0 0 24px; }
  .meetings__head { gap: 8px; }
  .meetings__lead.lead--sm { display: block; width: auto; font-size: var(--fs-ui); line-height: 21px; }
  .meetings__rail { display: flex; gap: 12px; overflow-x: auto; background: none; border-radius: 0; box-shadow: none; scrollbar-width: none; }
  .meetings__rail::-webkit-scrollbar { display: none; }
  .meeting { flex: none; width: 160px; height: 120px; justify-content: space-between; padding: 16px; border-radius: var(--radius-lg); box-shadow: none; background: var(--color-bg-strip); }
  .meeting.is-active { background: linear-gradient(0deg, #2a0710 0%, #0b090a 100%); box-shadow: inset 0 0 0 1px var(--color-border-brand); }

  .selected { padding: 0 0 24px; }
  .selected__panel { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 20px 32px; }
  .selected__left { gap: 8px; }
  .selected__curve { display: none; }
  .selected__title { gap: 12px; font-size: 32px; line-height: 39px; }   /* в мобильном фрейме 4:255 это по-прежнему ряд */
  .selected__race { font-size: 18px; line-height: 22px; }
  .selected__meta { flex-wrap: wrap; gap: 8px; font-size: var(--fs-caption); }
  .selected__meta span + span::before { width: 8px; margin-right: 8px; }
  .selected__right { flex-direction: row; align-items: center; justify-content: space-between; height: 40px; margin-top: 20px; }

  .mtype { padding: 4px 0 20px; }   /* 4:269 = 127: 12 + 13 + 12 + 52 + 12 + 18 + 20 */
  .mtype__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .mtype__group { flex-direction: column; align-items: stretch; gap: 8px; }
  .switcher { width: 100%; }
  .switcher { padding: 4px; }
  .switcher__opt { flex: 1; height: 44px; font-size: var(--fs-small); }

  .board { padding: 0 0 40px; }
  .board__table { display: flex; flex-direction: column; gap: 12px; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
  .board__head { display: none; }
  .board__row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; background: var(--color-bg-strip); border-radius: var(--radius-lg); box-shadow: none; }
  .board__runner { gap: 12px; }
  .board__no { width: 28px; height: 28px; background: var(--color-bg); }
  .board__name { font-size: var(--fs-body); line-height: 18px; }
  .board__meta { display: flex; align-items: center; gap: 10px; }
  .board__jockey { flex-direction: row; align-items: center; gap: 10px; font-size: var(--fs-label); }
  .board__jockey-name { font-size: var(--fs-label); line-height: 16px; }
  .odd--racing { height: 48px; padding: 8px 0; justify-content: center; background: var(--color-bg); }
  .odd--racing .odd__price { font-size: var(--fs-body); line-height: 18px; }

  .track-separator { padding: 0 0 40px; }
}

/* the mobile frame shows barrier / jockey / form on one meta row */
@media (max-width: 1199px) {
  .board__row { position: relative; }
  .board__barrier::after { content: ""; display: inline-block; width: 10px; height: 1px; margin: 0 10px; vertical-align: middle; background: var(--color-border); }
  .board__barrier { align-items: center; font-size: var(--fs-label); line-height: 16px; }
}

/* Same Race Multi: win odds are not offered, but the row stays readable */
.odd.is-off { opacity: .4; cursor: not-allowed; }
.odd.is-off:hover { background: var(--color-bg); box-shadow: none; transform: none; }
.countdown.is-jumped { color: var(--color-muted); }

/* Ниже ширины мобильного фрейма: карточка не должна распирать документ —
   grid-элементы по умолчанию имеют min-width:auto и растут от длинной мета-строки. */
@media (max-width: 389px) {
  .mgrid__cards { grid-template-columns: minmax(0, 1fr); }
  .mcard, .mcard__meta, .mcard__odds { min-width: 0; }
  .mcard__meta { white-space: normal; }
  .mcard__odds .odd { min-width: 0; }
  .odd--wide .odd__name { min-width: 0; }
}