/* Racing — mockup frames betfans-racing-desktop [1:3322] / betfans-racing-mobile [69:4].
 *
 * Numbers from fig-spec: hero gradient 472 tall with 48/40/32/80 padding, the
 * meeting timeline on white with 80 padding, the race header 180 with the R04
 * watermark bleeding out of its top edge, and a six-column runners table on the
 * 1280 container (40 / 512 / 100 / 160 / 100 / 240, 16 apart, 24 side padding).
 */

/* ── racing-hero [23:28] ──────────────────────────────────────────────── */
.racing-hero { background: var(--color-bg); }

/* hero-gradient [23:29] — full-bleed, with the copy still on the container grid */
.racing-hero__inner {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-16);
  min-height: 472px;
  padding: var(--space-48) max(40px, calc((100vw - 1440px) / 2 + 40px))
           var(--space-32) max(var(--container-pad), calc((100vw - 1440px) / 2 + var(--container-pad)));
  background: var(--grad-hero);
  color: var(--color-on-dark);
}
.racing-hero .eyebrow, .racing-hero__headline, .racing-hero__lead, .racing-hero__cta { position: relative; z-index: 2; }

/* grain [23:30] — white wash at 3% over the gradient */
.racing-hero__grain {
  position: absolute; inset: 0; z-index: 0;
  background: var(--color-on-dark); opacity: .03;
  pointer-events: none;
}
/* track-motif [23:32] — a 720×220 stroked curve centred in the frame */
.racing-hero__motif {
  position: absolute; z-index: 1;
  left: 50%; top: 106px; translate: -50% 0;
  width: 720px; height: 220px;
  color: var(--color-on-dark); opacity: .16;
  pointer-events: none;
}
.racing-hero__headline {
  display: flex; flex-direction: column; gap: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 96px; line-height: 86.4px;
}
.racing-hero__lead { max-width: 1320px; font-size: var(--fs-body-sm); line-height: 22.5px; color: var(--color-on-dark-70); }
.racing-hero__cta { align-self: flex-start; font-size: var(--fs-body-sm); line-height: 20.49px; }

/* ── race-meeting-timeline [23:42] / meeting-selector [69:32] ─────────── */
/* The frame is FIXED 220: 80 of top padding plus a 140 row; the drawn bottom
   padding is absorbed by that fixed height, so it is not built. */
.timeline { min-height: 220px; padding: 80px var(--container-pad) 0; background: var(--color-surface); }
.timeline__row { display: flex; flex-direction: column; gap: var(--space-12); }
.timeline__label { display: none; }                       /* mobile only [69:34] */
.timeline__line { height: 1px; background: var(--color-brand); }
.timeline__stops { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); }

.stop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left;                       /* the column already centres each line */
  transition: color var(--dur-fast) var(--ease);
}
.stop__top { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.stop__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 26.4px; color: var(--color-dim); }
.stop__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-border-strong); transition: background-color var(--dur-fast) var(--ease); }
.stop__track { font-size: var(--fs-base); font-weight: 700; line-height: 19.12px; color: var(--color-ink); }
.stop__meta { font-size: var(--fs-xs); line-height: 16.39px; color: var(--color-dim); }
.stop__time { font-size: var(--fs-sm); font-weight: 700; line-height: 18px; color: var(--color-ink); }

.stop:hover .stop__dot { background: var(--color-brand); }
.stop.is-active .stop__no,
.stop.is-active .stop__time { color: var(--color-brand); }
.stop.is-active .stop__dot { background: var(--color-brand); }

/* A meeting that is not on screen is hidden twice over: `hidden` takes it out of
   the layout, and visibility:hidden makes every node inside it inherit the hidden
   state, so assistive tech and tools that walk the whole tree never read five
   copies of the same race. */
.race--off { visibility: hidden; }

/* ── race-header [23:76] ──────────────────────────────────────────────── */
.race__header { position: relative; overflow: hidden; min-height: 180px; padding-block: var(--space-24); background: var(--color-surface); }
.race__header-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  min-height: 128px; padding-block: var(--space-16);
}
.race__eyebrow { display: none; }                          /* mobile only [69:69] */
.race__title { font-family: var(--font-display); font-weight: 700; font-size: 80px; line-height: 96px; color: var(--color-ink); }
.race__meta, .race__tabs { position: relative; z-index: 1; }

/* R04 [23:88] — 140px watermark at 5%, bottom-aligned and clipped at the top */
.race__mark {
  position: absolute; z-index: 0; left: 50%; bottom: 0; translate: -50% 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 140px; line-height: 168px; text-align: center;
  color: var(--color-brand); opacity: .05;
  pointer-events: none; user-select: none;
}

.race__tabs { display: flex; gap: var(--space-12); }
.race-tab {
  min-height: 38px; padding: var(--space-10) 14px;
  border: 0; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  background: var(--color-surface); color: var(--color-brand);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; line-height: 18px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.race-tab:hover { background: var(--color-tint); }
.race-tab[aria-pressed="true"] { background: var(--color-brand); color: var(--color-on-dark); }

/* ── runners-table [23:89] / runners-list [69:77] ─────────────────────── */
.race__body { background: var(--color-surface); }
.runners { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border); }

.runners__head, .runner {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 100px 160px 100px 240px;
  align-items: center; gap: var(--space-16);
  padding-inline: var(--space-24);
}
.runners__head {
  min-height: 40px; padding-block: var(--space-12);
  background: var(--color-surface); text-align: center;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-2xs); font-weight: 700; line-height: 15.03px;
  letter-spacing: var(--ls-wide); color: var(--color-dim);
}
.runners__col--odds { display: flex; gap: var(--space-8); }
.runners__col--odds span { width: 110px; text-align: center; }

/* The separators are their own 1px rectangles in the mockup [23:100 …], not a
   border on the row, so they are drawn as pseudo-elements and the row keeps the
   box the mockup gives it. */
.runner { position: relative; padding-block: var(--space-20); min-height: 93px; background: var(--color-surface); transition: background-color var(--dur-fast) var(--ease); }
.runner + .runner { min-height: 94px; }          /* row 93 + the 1px rule above it */
.runner + .runner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-border); }
.runner:hover { background: var(--color-bg); }

.runner__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h6); line-height: 29px; text-align: center; color: var(--color-dim); }
.runner:first-of-type .runner__no { color: var(--color-brand); }
.runner__name { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); line-height: 22px; color: var(--color-ink); }
.runner__sub { display: none; }                            /* mobile only [69:85] */
.runner__barrier { font-size: var(--fs-sm); line-height: 18px; color: var(--color-faint); }
.runner__jockey { font-size: var(--fs-base); line-height: 19.12px; color: var(--color-muted); }
.runner__form { font-size: var(--fs-base); font-weight: 700; line-height: 19.12px; color: var(--color-ink); }
.runner__form-label { display: none; }                     /* mobile only [69:87] */

/* Win and place prices [23:107]: 110 wide, the win chip 46 tall, the place 53. */
.runner__odds { display: flex; align-items: center; gap: var(--space-8); }
.runner__odds .odd {
  flex: 0 0 110px;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
.runner__odds .odd--win { min-height: 46px; padding: var(--space-6) var(--space-8); }
.runner__odds .odd--place { min-height: 53px; padding: var(--space-8) var(--space-12); gap: 0; }
.runner__odds .odd__name { font-size: var(--fs-4xs); line-height: 12.29px; font-weight: 700; letter-spacing: .5px; color: var(--color-dim); }
.runner__odds .odd__price { font-size: var(--fs-md); font-weight: 700; line-height: 25px; color: var(--color-ink); }
.runner__odds .odd[aria-pressed="true"] { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.runner__odds .odd[aria-pressed="true"] .odd__name,
.runner__odds .odd[aria-pressed="true"] .odd__price { color: var(--color-on-dark); }

/* Same Race Multi: one leg price per runner, place prices step aside. */
.race.is-multi .odd--place { display: none; }
.race.is-multi .runners__col--odds span:last-child { display: none; }
.race__note { padding-top: var(--space-16); font-size: var(--fs-sm); line-height: 20px; color: var(--color-soft); }

/* ── bet-slip-bar [23:170] ────────────────────────────────────────────── */
/* bet-slip-bar [23:170] is 251: 32 + the 172 bar + the 15 note + 32. The shared
   slip keeps that note inside itself, so the 16 grid gap above it is taken back. */
/* bet-slip-bar [23:170] is 251: 32 + the 172 bar [23:171] + the 15 note + 32. */
.race-slip { min-height: 251px; padding-block: var(--space-32); background: var(--color-surface); }
.race-slip .bet-slip { min-height: 172px; }
.race-slip .bet-slip { margin-top: 0; border-radius: 0; }
/* The mockup puts the note straight under the bar [23:201], with no gap. */
.race-slip .slip-note { margin-top: 0; }

/* ── tablet: no mockup frame, derived from the container and the splits ── */
@media (max-width: 1199px) {
  .racing-hero__inner { min-height: 0; padding: var(--space-48) var(--container-pad); }
  .racing-hero__headline { font-size: 72px; line-height: 68px; }
  .timeline { padding-block: var(--space-48); }
  .timeline__stops { gap: var(--space-12); overflow-x: auto; justify-content: flex-start; }
  .stop { flex: 0 0 auto; min-width: 120px; }
  .race__title { font-size: 56px; line-height: 64px; }
  .runners__head, .runner { grid-template-columns: 32px minmax(0, 1fr) 90px 120px 70px 236px; padding-inline: var(--space-16); }
}

/* ── mobile frame [69:4] ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* hero [69:22]: 32/20 padding, headline 56, lead 13, CTA 42 tall */
  .racing-hero { min-height: 358px; }
  .racing-hero__inner { min-height: 358px; padding: var(--space-32) var(--container-pad); }
  .racing-hero__headline { font-size: 56px; line-height: 50px; gap: var(--space-2); }
  .racing-hero__lead { font-size: var(--fs-sm); line-height: 18px; }
  .racing-hero__cta { min-height: 42px; padding-inline: var(--space-16); font-size: var(--fs-sm); line-height: 18px; }
  .racing-hero__motif { width: 350px; height: 180px; top: auto; bottom: 0; left: var(--container-pad-mobile); translate: 0 0; }

  /* meeting-selector [69:32]: label + a card rail that scrolls sideways */
  /* meeting-selector [69:32] 390×172: 24/8 padding, label 15, gap 12, rail 113 */
  .timeline { min-height: 172px; padding: var(--space-24) 0 var(--space-8); }
  .timeline__row { gap: var(--space-12); }
  .timeline .container { padding-inline: 0; }
  .timeline__label {
    display: block; padding-inline: var(--container-pad-mobile);
    font-size: var(--fs-2xs); font-weight: 700; line-height: 15px;
    letter-spacing: var(--ls-wide); color: var(--color-brand);
  }
  .timeline__line { display: none; }
  .timeline__stops {
    gap: var(--space-10);
    padding: 0 var(--space-4) 0 var(--container-pad-mobile);
    overflow-x: auto; scroll-snap-type: x proximity;
    align-items: stretch;
  }
  .stop {
    flex: 0 0 120px; min-width: 0;
    align-items: flex-start; gap: var(--space-6);
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    text-align: left; scroll-snap-align: start;
  }
  .stop.is-active { background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-brand); }
  .stop__top { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; width: 100%; }
  .stop__no { font-size: var(--fs-h6); line-height: 24px; }
  .stop__dot { width: 6px; height: 6px; }
  .stop__track { font-size: var(--fs-sm); line-height: 18px; }
  .stop__meta { font-size: var(--fs-3xs); line-height: 14px; color: var(--color-soft); }
  .stop__time { font-size: var(--fs-2xs); line-height: 15.03px; }

  /* race-header-container [69:67]: eyebrow + 48px title, tabs on their own row */
  /* race-header-container [69:67] 390×192: 24/24 padding, meta 76, gap 20, tabs 48 */
  .race__header { min-height: 192px; padding-block: var(--space-24); }
  .race__header-row { flex-direction: column; align-items: stretch; gap: var(--space-20); min-height: 0; padding-block: 0; }
  .race__meta { display: flex; flex-direction: column; gap: var(--space-4); }
  .race__eyebrow {
    display: block;
    font-size: var(--fs-3xs); font-weight: 700; line-height: 14px;
    letter-spacing: var(--ls-wide); color: var(--color-dim);
  }
  .race__title { font-size: var(--fs-h2); line-height: 58px; }
  .race__mark { left: auto; right: 0; bottom: auto; top: var(--space-10); translate: 0 0; font-size: 100px; line-height: 120px; }
  .race__tabs { gap: var(--space-8); }
  .race-tab { flex: 1; min-height: 48px; text-align: center; padding-inline: var(--space-8); font-size: var(--fs-xs); line-height: 16.39px; }

  /* runners-list [69:77]: number + name/sub, form on the right, prices below */
  .runners__head { display: none; }
  .runner {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "no id form" "odds odds odds";
    gap: var(--space-12);
    padding: var(--space-16) 0;
    min-height: 141px;                    /* runner-row [69:78] 350×141 */
    border-bottom: 1px solid var(--color-border);
  }
  .runner + .runner { min-height: 141px; }
  .runner + .runner::before { content: none; }
  .runner:hover { background: none; }
  .runner__no { grid-area: no; }
  .runner__id { grid-area: id; display: flex; flex-direction: column; gap: var(--space-2); }
  .runner__formcell { grid-area: form; display: flex; flex-direction: column; text-align: right; }
  .runner__odds { grid-area: odds; }
  .runner__barrier, .runner__jockey { display: none; }
  .runner__name { font-size: var(--fs-body-sm); line-height: 20.49px; }
  .runner__sub { display: block; font-size: var(--fs-2xs); line-height: 15.03px; color: var(--color-soft); }
  .runner__form-label { display: block; font-size: var(--fs-2xs); line-height: 15.03px; color: var(--color-soft); }
  .runner__form { font-size: var(--fs-xs); line-height: 16.39px; }

  .runner__odds .odd { flex: 1; min-height: 48px; }
  .runner__odds .odd--win, .runner__odds .odd--place { min-height: 48px; padding: var(--space-6) var(--space-8); gap: var(--space-2); }
  .runner__odds .odd__price { font-size: var(--fs-body); line-height: 22px; }

  /* bet-slip-container [69:173] */
  /* bet-slip-container [69:173] 390×466: 24 + the 391 bar + a 27 note block + 24.
     The shared slip keeps the note inside the bar, so that block is padding here. */
  /* bet-slip-container [69:173] 390×466: 24 + the 391 bar + 12 + the 15 note + 24 */
  .race-slip { min-height: 466px; padding-block: var(--space-24); }
  .race-slip .bet-slip { min-height: 391px; }
  .race-slip .slip-note { margin-top: var(--space-12); }
  .race-slip .bet-slip { border-radius: var(--radius-sm); }
}