/* Home page — frames pumt123-homepage (1440) and pumt123-homepage-mobile (390).
 * Every number below is read from fig-spec, not estimated. */

/* ── hero: 1440×600, row, left 468 / divider / right 600 ──────────────── */
/* The frame is 600 tall and space-between spreads the three blocks inside it. */
.hero { display: flex; min-height: 600px; }

.hero__left {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 468px; flex: none; min-height: 600px;
  padding: var(--space-48);
  background: var(--color-bg);
}
/* The mockup draws the match card and the CTA row wider than the column that
   holds them — they run out over the empty gutter. Keeping their widths keeps
   the geometry. */
.hero__intro { display: flex; flex-direction: column; gap: var(--space-16); width: 372px; }
/* Three drawn lines, 192 tall: the breaks are in the markup, so the lines must
   not wrap again — the block runs a little past the 372 column, as the mockup's
   own card does. */
.hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 64px;
  letter-spacing: -1px; white-space: nowrap;
  color: var(--color-text);
}
.hero__lead { color: var(--color-muted); font-size: 15px; line-height: 23px; }

.featured-match {
  display: flex; flex-direction: column; gap: var(--space-16);
  width: 663px; padding: var(--space-24);
  background: var(--color-surface);
  box-shadow: inset 2px 0 0 var(--color-brand);
}
.featured-match__meta {
  display: flex; align-items: center; gap: var(--space-8);
  color: var(--color-text);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
  text-transform: uppercase;
}
.featured-match__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
.featured-match__event {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h5); line-height: 25px;
  color: var(--color-text);
}
.featured-match__odds { display: flex; gap: var(--space-8); }
/* odds-box is 48 tall in the mockup (resize FIXED), not the sum of its lines. */
.odd { min-height: 48px; }

/* The marker beside a sport is the circle-x glyph, 14px, lime stroke. */
.dot { width: 14px; height: 14px; flex: none; color: var(--color-brand); }
.dot--lg { width: 18px; height: 18px; }

.hero__cta { display: flex; align-items: center; gap: var(--space-24); width: 380px; }
.hero__cta .btn--primary { padding: 16px 32px; font-size: var(--fs-xs); line-height: 15px; white-space: nowrap; }
.hero__cta-alt { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); line-height: 17px; white-space: nowrap; }

/* The divider column: a hairline along the bottom of the empty gutter. */
.hero__divider { flex: 1; display: flex; align-items: flex-end; }
.hero__divider::before { content: ""; width: 100%; height: 1px; background: var(--color-border); }

.hero__right {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 600px; flex: none; padding: var(--space-32);
  overflow: hidden;
}
/* Photo and scrim are separate layers, or the gradient tints the whole box. */
.hero__pic { position: absolute; inset: 0; z-index: -2; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.hero__right::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gradient-fade-x);
}
.chip--dark {
  background: rgba(0, 0, 0, .698); color: var(--color-text);
  padding: 6px 12px; font-weight: 700; font-size: var(--fs-3xs); line-height: 12px;
}
.hero__venue { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.hero__venue-name {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-xs); line-height: 15px;
}
.hero__venue-city { margin-top: var(--space-4); color: var(--color-text); opacity: .8; font-size: var(--fs-2xs); line-height: 14px; }
.hero__sport {
  color: var(--color-text);
  font-family: var(--font-display); font-weight: 900;
  font-size: 40px; line-height: 50px;
  opacity: .15;
}

/* ── today's markets: 1440×789, pad 80/48, gap 40 ─────────────────────── */
.markets { padding-block: var(--section-pad-y); }
.markets__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.markets__head .eyebrow { margin-bottom: var(--space-12); }
.hero__intro .eyebrow { font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .18em; text-transform: uppercase; }

.sport-tabs { display: flex; padding: var(--space-4); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.sport-tabs__btn {
  padding: 10px 20px; border: 0; background: transparent; cursor: pointer;
  color: var(--color-muted);
  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);
}
.sport-tabs__btn:hover { color: var(--color-text); }
.sport-tabs__btn.is-active { background: var(--color-band); color: var(--color-brand); }

.markets-list { display: flex; flex-direction: column; gap: 1px; margin-top: var(--space-40); }
.markets-list__head,
.market-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 340px 100px;
  align-items: center; gap: var(--space-24);
}
.markets-list__head {
  padding: 12px 24px; background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xs); line-height: 12.4px;
}
.markets-list__odds-head { display: grid; grid-template-columns: repeat(3, 108px); gap: var(--space-8); }

.market-row {
  padding: var(--space-16) var(--space-24);
  background: var(--color-bg);
  transition: background var(--dur-fast) var(--ease);
}
.market-row:hover { background: var(--color-surface-2); }
.market-row__sport {
  display: flex; align-items: center; gap: var(--space-8);
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
  text-transform: uppercase;
}
.market-row__event {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-base); line-height: 17.36px;
  color: var(--color-text);
}
.market-row__odds { display: grid; grid-template-columns: repeat(3, 108px); gap: var(--space-8); }
.market-row .odd { min-width: 0; width: 108px; padding: 6px 10px; background: var(--color-surface); box-shadow: none; }
.market-row .odd:hover:not(.odd--void) { background: var(--color-surface-hover); box-shadow: inset 0 0 0 1px var(--color-brand); }
.odd--void { cursor: default; box-shadow: inset 0 0 0 1px var(--color-border); }
.odd--void .odd__value { color: var(--color-muted); }
.market-row__more {
  justify-self: end;
  color: var(--color-brand); text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); line-height: 16px;
  transition: opacity var(--dur-fast) var(--ease);
}
.market-row__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.markets-list__empty { padding: var(--space-32) var(--space-24); background: var(--color-bg); color: var(--color-muted); font-size: var(--fs-sm); }

/* ── racing: 1440×461, left 413 / divider / right 711 ─────────────────── */
.racing { display: flex; min-height: 461px; }
.racing__left {
  display: flex; flex-direction: column; gap: var(--space-32);
  width: 413px; flex: none; padding: var(--space-48);
}
/* The heading block is drawn 395 wide and runs over the 413 column, like the
   hero card does — keeping the width keeps "RACING — NEXT UP" on one line. */
.racing__head { display: flex; flex-direction: column; gap: var(--space-8); width: 395px; }
.racing__list { display: flex; flex-direction: column; gap: var(--space-12); width: 642px; }
.race-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  padding: var(--space-20);
  background: var(--color-surface);
  transition: background var(--dur-fast) var(--ease);
}
.race-row:hover { background: var(--color-surface-hover); }
.race-row__track { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-body); line-height: 20px; }
.race-row, .directory__item { box-shadow: inset 0 0 0 1px var(--color-border); }
.race-row__runners { margin-top: var(--space-6); color: var(--color-muted); font-size: var(--fs-xs); line-height: 16px; }
.race-row__right { display: flex; align-items: center; gap: var(--space-24); }
.race-row__time {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-body); line-height: 20px;
}
.race-row__right .link-action { padding: 8px 16px; }

.racing__divider { flex: 1; display: flex; align-items: flex-end; }
.racing__divider::before { content: ""; width: 100%; height: 1px; background: var(--color-border); }

.racing__right {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-start;
  width: 711px; flex: none; padding: var(--space-48);
  overflow: hidden;
}
.racing__pic { position: absolute; inset: 0; z-index: -2; }
.racing__pic img { width: 100%; height: 100%; object-fit: cover; }
.racing__right::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 10, 9, .45); }
.racing__overlay { display: flex; flex-direction: column; gap: var(--space-8); max-width: 573px; }
.racing__overlay .eyebrow { font-size: var(--fs-3xs); line-height: 12.4px; letter-spacing: .1em; text-transform: uppercase; }
.racing__claim {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-lead); line-height: 23px;
  color: var(--color-text);
}

/* ── directory: 1440×411, pad 80/48, gap 40 ───────────────────────────── */
.directory { padding-block: var(--section-pad-y); }
.directory__head { display: flex; flex-direction: column; gap: var(--space-8); }
.directory__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16);
  margin-top: var(--space-40);
}
.directory__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  min-height: 66px; padding: var(--space-24);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.directory__item:hover { background: var(--color-surface-hover); }
.directory__label {
  display: flex; align-items: center; gap: var(--space-16);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-sm); line-height: 16.12px;
  text-transform: uppercase;
}
.directory__arrow {
  color: var(--color-brand); font-family: var(--font-display);
  font-size: var(--fs-xs); line-height: 15px;
  transition: transform var(--dur-fast) var(--ease);
}
.directory__item:hover .directory__arrow { transform: translateX(4px); }

/* ── mobile: frame pumt123-homepage-mobile (390) ──────────────────────── */
@media (max-width: 1199px) {
  /* hero 390×711: column, gap 20, pad 24/16 */
  .hero { flex-direction: column; gap: var(--space-20); min-height: 0; padding: var(--space-24) var(--container-pad-m); }
  .hero__left { width: 100%; min-height: 0; padding: 0; gap: var(--space-20); }
  .hero__intro { width: 100%; gap: var(--space-12); }
  .hero__intro .eyebrow { font-size: var(--fs-3xs); line-height: 12px; letter-spacing: .1em; }
  .hero__intro .eyebrow--rule::before { width: 12px; }
  .hero__title { font-size: var(--fs-h3); line-height: 31px; letter-spacing: 0; white-space: normal; }
  .hero__lead { font-size: var(--fs-sm); line-height: 18px; }

  .featured-match { width: 100%; padding: var(--space-16); gap: var(--space-12); box-shadow: none; }
  .featured-match__meta { gap: var(--space-6); font-size: var(--fs-3xs); line-height: 12px; }
  .featured-match__row { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .featured-match__event { font-size: var(--fs-body); line-height: 20px; }
  .featured-match__odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

  /* odds-box on the 390 frame: 46 tall, pad 8/4, label 9/12, price 11/14 */
  .odd { min-width: 0; min-height: 46px; padding: 8px 4px; gap: 0; }
  .odd__label { font-size: var(--fs-4xs); line-height: 12px; }
  .odd__value { font-size: var(--fs-2xs); line-height: 14px; }

  .hero__cta { flex-direction: column; align-items: stretch; gap: var(--space-12); width: 100%; }
  .hero__cta .btn--primary { width: 100%; min-height: 38px; padding: 12px var(--space-16); font-size: var(--fs-2xs); line-height: 14px; }
  .hero__cta-alt { font-size: var(--fs-xs); line-height: 16px; white-space: normal; }

  .hero__divider { display: none; }
  .hero__right { width: 100%; min-height: 220px; padding: var(--space-16); }
  .chip--dark { padding: 4px 8px; font-size: var(--fs-4xs); line-height: 11px; }
  .hero__venue-name { font-size: var(--fs-2xs); line-height: 14px; }
  .hero__venue-city { margin-top: var(--space-2); font-size: var(--fs-3xs); line-height: 13px; }
  .hero__sport { font-size: var(--fs-h3); line-height: 35px; }

  /* markets 390×1017: column, gap 20, pad 32/16 */
  .markets__head { flex-direction: column; align-items: stretch; gap: var(--space-20); }
  .markets__head .eyebrow { margin-bottom: var(--space-8); font-size: var(--fs-3xs); line-height: 12px; }
  .markets__head .eyebrow--rule::before { width: 12px; }

  .sport-tabs { flex-wrap: wrap; gap: var(--space-6); padding: var(--space-4); }
  .sport-tabs__btn { padding: 6px 12px; font-size: var(--fs-3xs); line-height: 12px; }

  .markets-list { gap: var(--space-12); margin-top: var(--space-20); }
  .markets-list__head { display: none; }
  /* The board becomes a stack of cards: sport and the extra-markets link share the
     first row, the event sits under them, the three prices fill the last row. */
  .market-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "sport more" "event event" "odds odds";
    gap: var(--space-12); padding: var(--space-12);
    background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .market-row__sport { grid-area: sport; gap: var(--space-6); font-size: var(--fs-3xs); line-height: 12px; }
  .market-row__more { grid-area: more; justify-self: end; font-size: var(--fs-2xs); line-height: 14px; }
  .market-row__event { grid-area: event; font-size: var(--fs-sm); line-height: 16px; }
  .market-row__odds { grid-area: odds; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .market-row .odd { width: auto; padding: 8px 4px; }

  /* racing 390×509: column, gap 24, pad 32/16 */
  .racing { flex-direction: column; gap: var(--space-24); min-height: 0; padding: var(--section-pad-y-m) var(--container-pad-m); }
  .racing__left { width: 100%; padding: 0; gap: var(--space-24); }
  .racing__head { width: 100%; }
  .racing__head .eyebrow { font-size: var(--fs-3xs); line-height: 12px; }
  .racing__head .eyebrow--rule::before { width: 12px; }
  .racing__list { width: 100%; gap: var(--space-8); }
  .race-row { min-height: 58px; padding: var(--space-12); gap: var(--space-12); }
  .race-row__track { font-size: var(--fs-sm); line-height: 16px; white-space: nowrap; }
  .race-row__runners { margin-top: var(--space-4); font-size: var(--fs-2xs); line-height: 14px; }
  /* The 390 frame shortens the action to "FIELDS →" at 8px. */
  .race-row__right { flex-direction: row; align-items: center; gap: var(--space-12); }
  .race-row__time { font-size: var(--fs-sm); line-height: 16px; }
  .race-row__right .link-action { padding: 6px 10px; font-size: 8px; line-height: 10px; }
  .race-row__right .link-action .link-action__long { display: none; }
  .racing__divider { display: none; }
  .racing__right { width: 100%; min-height: 160px; padding: var(--space-16); }
  .racing__overlay { gap: var(--space-6); }
  .racing__overlay .eyebrow { font-size: var(--fs-4xs); line-height: 11px; }
  .racing__claim { font-size: var(--fs-xs); line-height: 16px; }

  /* directory 390×363: grid of 2 × 175, gap 8, items 52 tall */
  .directory__head .eyebrow { font-size: var(--fs-3xs); line-height: 12px; }
  .directory__head .eyebrow--rule::before { width: 12px; }
  .directory__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin-top: var(--space-20); }
  .directory__item { min-height: 52px; padding: var(--space-12); }
  .directory__label { gap: var(--space-8); font-size: var(--fs-2xs); line-height: 14px; }
}