/* Racing page — frames pumt123-racing (1440) and pumt123-racing-mobile (390).
 * The hero shares .page-hero with the sports page; only its widths differ. */

.page-hero--racing .page-hero__left { width: 588px; min-height: 600px; }
.page-hero--racing { min-height: 600px; }
.page-hero--racing .page-hero__intro { width: 492px; gap: var(--space-16); }
.page-hero--racing .page-hero__title { font-size: 44px; line-height: 48px; letter-spacing: -1px; }
.page-hero--racing .page-hero__cta { width: 387px; }
.page-hero--racing .page-hero__right { width: 852px; }

/* ── next to jump: 1440×399, pad 80/48/48, gap 40 ─────────────────────── */
.next-jump { padding: var(--space-80) 0 var(--space-48); }
.next-jump__head { display: flex; flex-direction: column; gap: var(--space-12); }
.next-jump__lead { color: var(--color-muted); font-size: var(--fs-base); line-height: 18px; }

.meeting-cards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-16);
  margin-top: var(--space-40);
}
.meeting-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-12);
  min-height: 134px; padding: var(--space-20);
  border: 0; background: var(--color-surface); color: var(--color-text);
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.meeting-card:hover { background: var(--color-surface-hover); }
.meeting-card.is-active { background: var(--color-band); box-shadow: inset 0 0 0 1px var(--color-brand); }

.meeting-card__top, .meeting-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.meeting-card__no {
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
}
.meeting-card__code {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
}
.meeting-card__name { display: flex; flex-direction: column; gap: var(--space-4); }
.meeting-card__track { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-body); line-height: 20px; }
.meeting-card__race { color: var(--color-muted); font-size: var(--fs-xs); line-height: 16px; }
.meeting-card__in {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-sm); line-height: 16px;
}
.meeting-card__state {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xs); line-height: 12px;
}

/* ── selected race header: 1440×135, pad 32/48/24/48 ──────────────────── */
.race-header { padding: var(--space-32) 0 var(--space-24); background: var(--color-surface); }
.race-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
.race-header__eyebrow {
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xs); line-height: 12px;
}
.race-header__title {
  margin-top: var(--space-8);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h3); line-height: 35px;
}
.race-header__meta { margin-top: var(--space-8); color: var(--color-muted); font-size: var(--fs-xs); line-height: 16px; }

.countdown {
  display: flex; align-items: center; gap: var(--space-16);
  min-height: 68px; padding: var(--space-16);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.countdown__label {
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xs); line-height: 12px;
}
.countdown__box { display: flex; flex-direction: column; align-items: center; }
.countdown__value {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h5); line-height: 25px;
}
.countdown__unit { color: var(--color-muted); font-size: var(--fs-4xs); line-height: 11px; }

/* ── market controls: 1440×82, pad 24/48 ──────────────────────────────── */
.market-controls { padding-block: var(--space-24); }
.market-controls__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
.market-controls__tabs { display: flex; gap: var(--space-8); }
.market-type {
  min-height: 34px; padding: 10px var(--space-24);
  border: 0; background: var(--color-surface); color: var(--color-muted); cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.market-type:hover { color: var(--color-text); }
.market-type.is-active { background: var(--color-brand); color: var(--color-on-brand); }
.market-controls__hint { color: var(--color-muted); font-size: var(--fs-xs); line-height: 16px; }

/* ── field: 1440×545, pad 24/48/80/48 ─────────────────────────────────── */
.runners { padding: var(--space-24) 0 var(--space-80); }
.runners-list { display: flex; flex-direction: column; gap: 1px; }
.runners-field { display: flex; flex-direction: column; gap: 1px; }
.runners-list__head, .runner-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 200px 340px;
  align-items: center;
}
.runners-list__head {
  padding: 12px 24px; background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-3xs); line-height: 12.4px;
}
.runners-list__odds-head { display: grid; grid-template-columns: repeat(2, 166px); gap: var(--space-8); }

.runner-row {
  min-height: 80px; padding: var(--space-16) var(--space-24);
  background: var(--color-bg);
  transition: background var(--dur-fast) var(--ease);
}
.runner-row:hover { background: var(--color-surface-2); }
.runner-row__no {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: var(--space-4);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
}
.runner-row__runner { padding-inline: var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); }
.runner-row__jockey { display: flex; flex-direction: column; gap: var(--space-4); }
.runner-row__name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17.36px; }
.runner-row__rider { font-weight: 600; font-size: var(--fs-sm); line-height: 17px; }
.runner-row__sub { color: var(--color-muted); font-size: var(--fs-2xs); line-height: 14px; }
.runner-row__odds { display: grid; grid-template-columns: repeat(2, 108px); gap: var(--space-8); justify-content: end; }
.runner-row .odd { width: 108px; min-height: 48px; }
.runners__note {
  margin-top: var(--space-24); padding: var(--space-20);
  background: var(--color-surface); color: var(--color-muted);
  font-size: var(--fs-sm); line-height: 20px;
}

/* ── mobile: frame pumt123-racing-mobile (390) ────────────────────────── */
@media (max-width: 1199px) {
  /* hero 390×617: text block 377 (pad 24/16, gap 16) over a 240 photo block */
  .page-hero--racing, .page-hero--racing .page-hero__left,
  .page-hero--racing .page-hero__intro, .page-hero--racing .page-hero__cta,
  .page-hero--racing .page-hero__right { width: 100%; min-height: 0; }
  .page-hero--racing { gap: 0; padding: 0; }
  .page-hero--racing .page-hero__left { padding: var(--space-24) var(--container-pad-m); gap: var(--space-16); }
  .page-hero--racing .page-hero__intro { gap: var(--space-16); }
  .page-hero--racing .page-hero__title { font-size: 30px; line-height: 34px; letter-spacing: 0; }
  .page-hero--racing .page-hero__cta { padding-block: var(--space-8); gap: var(--space-12); }
  .page-hero--racing .page-hero__cta .btn--primary { min-height: 42px; padding: 14px var(--space-24); }
  .page-hero--racing .page-hero__right { min-height: 240px; padding: var(--space-16); }
  .page-hero--racing .page-hero__venue-name { font-size: var(--fs-xs); line-height: 15px; }

  /* next to jump 390×258: the cards become a horizontal rail, as drawn */
  .next-jump { padding: var(--section-pad-y-m) 0; }
  .next-jump__head { gap: var(--space-6); }
  .next-jump .section-title { font-size: var(--fs-h2-m); line-height: 27px; }
  .next-jump__lead { font-size: var(--fs-sm); line-height: 17px; }
  .meeting-cards {
    display: flex; gap: var(--space-12); margin-top: var(--space-20);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .meeting-cards::-webkit-scrollbar { display: none; }
  .meeting-card {
    flex: 0 0 155px; min-height: 106px; padding: 14px; gap: var(--space-10);
    scroll-snap-align: start;
  }
  .meeting-card__top { font-size: var(--fs-3xs); }
  .meeting-card__no, .meeting-card__code { font-size: var(--fs-3xs); line-height: 12px; }
  .meeting-card__name { gap: var(--space-2); }
  /* The card is 155 wide and the track name is drawn on one line. */
  .meeting-card__track { font-size: var(--fs-sm); line-height: 16px; white-space: nowrap; letter-spacing: -.02em; }
  .meeting-card__race { font-size: var(--fs-2xs); line-height: 14px; }
  .meeting-card__in { font-size: var(--fs-xs); line-height: 14px; }
  .meeting-card__state { font-size: var(--fs-4xs); line-height: 11px; }

  /* selected race 390×168 */
  .race-header { padding: var(--space-24) 0 var(--space-20); }
  .race-header__inner { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .race-header__eyebrow { font-size: var(--fs-4xs); line-height: 11px; }
  .race-header__title { margin-top: var(--space-6); font-size: var(--fs-h2-m); line-height: 27px; }
  .race-header__meta { margin-top: var(--space-6); font-size: var(--fs-xs); line-height: 16px; }
  .countdown { justify-content: space-between; min-height: 42px; padding: 10px 14px; }
  .countdown__box { flex-direction: row; align-items: baseline; gap: var(--space-4); }
  .countdown__value { font-size: var(--fs-h2-m); line-height: 23px; }
  .countdown__unit { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-3xs); line-height: 13px; }

  /* market controls 390×92 */
  .market-controls { padding-block: var(--space-16); }
  .market-controls__inner { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .market-controls__tabs { gap: var(--space-8); }
  .market-type { flex: 1 1 0; min-height: 32px; padding: 8px var(--space-12); font-size: var(--fs-3xs); line-height: 12px; }
  .market-controls__hint { font-size: var(--fs-xs); line-height: 16px; }

  /* field 390×732: header 32 + five 140 rows, edge to edge */
  .runners { padding: 0; }
  .runners .container { padding-inline: 0; }
  .runners-list, .runners-field { gap: 0; }
  .runners-list__head {
    display: grid; grid-template-columns: 1fr;
    min-height: 32px; padding: 10px var(--container-pad-m);
    font-size: var(--fs-4xs); line-height: 12px;
  }
  .runners-list__head span:not(:first-child) { display: none; }
  .runner-row {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "no runner" "jockey jockey" "odds odds";
    gap: var(--space-12); min-height: 140px; padding: var(--space-12);
    background: var(--color-bg); align-items: start;
  }
  .runner-row__no { grid-area: no; width: 24px; height: 24px; font-size: var(--fs-3xs); line-height: 12px; }
  .runner-row__runner { grid-area: runner; padding-inline: 0; gap: var(--space-2); }
  .runner-row__name { font-size: var(--fs-sm); line-height: 16px; }
  .runner-row__jockey { grid-area: jockey; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
  .runner-row__rider { font-size: var(--fs-xs); line-height: 16px; }
  .runner-row__odds { grid-area: odds; grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: var(--space-8); }
  .runner-row .odd {
    width: auto; min-height: 44px; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0 var(--space-12); background: var(--color-surface); box-shadow: none;
  }
  .runner-row .odd__label { font-size: var(--fs-3xs); line-height: 13px; }
  .runner-row .odd__value { font-size: var(--fs-xs); line-height: 16px; }
  .runners__note { margin: var(--space-16) var(--container-pad-m) 0; }
}