/* Racing catalogue pages: corridas, páreo, programa, ao vivo, resultados,
 * rateios, estatísticas, grandes prêmios, modalidades. Mockup language:
 * italic serif numbers, hairlines, the marquise curve on panels. */

.js .js-hide { display: none; }
.source-note { margin-top: var(--space-32); font-size: 13px; color: var(--color-muted); }

/* ── meeting blocks ───────────────────────────────────────────────────── */
.meeting + .meeting { margin-top: var(--space-72); }
.meeting__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-16); flex-wrap: wrap; padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-text); }
.meeting__title { display: flex; align-items: baseline; gap: 14px; font: 400 34px/1.05 var(--font-display); }
.meeting__title::first-letter { text-transform: uppercase; }
.meeting__title span { font: italic 400 56px/1 var(--font-display); color: var(--color-brand); }
.meeting__meta { font-size: var(--fs-small); color: var(--color-text-2); }

/* ── race card (row) ──────────────────────────────────────────────────── */
.race-card {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 90px 140px; gap: 18px; align-items: center;
  padding: 18px 4px; border-bottom: 1px solid var(--color-border);
  transition: background var(--dur-fast) var(--ease);
}
.race-card:hover { background: var(--color-surface); }
.race-card__title { font: 600 18px/1.3 var(--font-body); }
.race-card__title a { text-decoration: none; }
.race-card__title a::after { content: ""; position: absolute; inset: 0; }
.race-card__title a:hover { color: var(--color-brand); }
.race-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); color: var(--color-text-2); margin-top: 4px; }
.race-card__time { font: 400 28px/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.race-card .status { justify-self: end; }
.race-card[data-status="done"] .race-no { color: var(--color-faint); }
.race-no--xl { font-size: 1.05em; margin-right: .12em; }

/* ── single páreo ─────────────────────────────────────────────────────── */
.res-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-48); align-items: start; }
.res-grid > * { min-width: 0; }
.race-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin-top: var(--space-16); border-top: 1px solid var(--color-text); }
.race-strip a { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; text-decoration: none; border-right: 1px solid var(--color-border); transition: background var(--dur-fast) var(--ease); }
.race-strip li:last-child a { border-right: 0; }
.race-strip a:hover { background: var(--color-bg); }
.race-strip b { font: italic 400 34px/1 var(--font-display); color: var(--color-brand); }
.race-strip span { font-size: var(--fs-small); color: var(--color-text-2); }
.race-strip a[aria-current="page"] { background: var(--color-text); color: #fff; }
.race-strip a[aria-current="page"] b, .race-strip a[aria-current="page"] span { color: #fff; }

/* ── programa ─────────────────────────────────────────────────────────── */
.prog-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-72); align-items: start; }
.prog-layout > * { min-width: 0; }
.prog-aside { position: sticky; top: 96px; display: grid; gap: var(--space-24); }
.prog-aside .ticket { padding: 36px 24px 24px; }
.archive { border-top: 1px solid var(--color-text); }
.archive a { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; font-size: var(--fs-small); transition: color var(--dur-fast) var(--ease), padding var(--dur-base) var(--ease); }
.archive a:hover { color: var(--color-brand); padding-left: 6px; }
.archive a[aria-current="page"] { color: var(--color-brand); font-weight: 600; }
.archive small { color: var(--color-muted); }
.prog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-24); }
.prog-head .h3 i { color: var(--color-brand); }

/* ── ao vivo ──────────────────────────────────────────────────────────── */
.live-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
.live-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: 40px 28px 28px; border-top-left-radius: var(--curve-md); }
.live-card--now { background: var(--color-text); color: var(--color-on-dark); border-color: var(--color-text); }
.live-card .status { margin-bottom: 14px; }
.live-card--now .status--live { color: #6FD3A3; border-color: rgba(111,211,163,.45); }
.live-card h2 { font: 400 40px/1.05 var(--font-display); }
.live-card__time { font: 400 64px/1 var(--font-display); margin-top: 18px; font-variant-numeric: tabular-nums; }
.live-card__time small { font: 400 var(--fs-small)/1.3 var(--font-body); display: block; margin-top: 6px; opacity: .8; }
.live-card .specs { border-color: currentColor; }
.live-card--now .specs, .live-card--now .specs > div + div { border-color: rgba(233,229,222,.25); }
.live-card--now .specs dt { color: rgba(233,229,222,.7); }

/* ── statistics tabs ──────────────────────────────────────────────────── */
.tabbar { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-24); overflow-x: auto; scrollbar-width: none; }
.tabbar [role="tab"] {
  padding: 14px 20px 12px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 400 26px/1 var(--font-display); color: var(--color-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tabbar [role="tab"]:first-child { padding-left: 0; }
.tabbar [role="tab"]:hover { color: var(--color-text); }
.tabbar [role="tab"][aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-brand); }
.data .cell-pos { font: italic 400 24px/1 var(--font-display); color: var(--color-brand); width: 56px; }
.bar-cell { display: flex; align-items: center; gap: 10px; }
.bar-cell i { display: block; height: 4px; background: var(--color-brand); border-radius: 2px; min-width: 4px; }

/* ── grandes prêmios ─────────────────────────────────────────────────── */
.gp-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-72); align-items: start; }
.gp-feature > * { min-width: 0; }

/* ── bet builder ─────────────────────────────────────────────────────── */
.builder { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-48); align-items: start; }
.builder > * { min-width: 0; }
.builder__steps { display: grid; gap: var(--space-32); }
.builder__step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding-top: var(--space-24); border-top: 1px solid var(--color-text); }
.builder__step > b { font: italic 400 34px/1 var(--font-display); color: var(--color-brand); }
.builder__step h3 { font: 600 18px/1.3 var(--font-body); margin-bottom: 12px; }
.builder__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.pick {
  position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pick:hover { border-color: var(--color-text); }
.pick[aria-pressed="true"] { border-color: var(--color-brand); background: var(--color-brand-tint); }
.pick__no { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-text); display: grid; place-items: center; font: 400 18px/1 var(--font-display); }
.pick[aria-pressed="true"] .pick__no { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.pick__name { font-weight: 600; font-size: var(--fs-small); line-height: 1.3; }
.pick__name small { display: block; font-weight: 400; color: var(--color-muted); font-size: 12px; }
.pick__ord { font: italic 400 20px/1 var(--font-display); color: var(--color-brand); }
.builder__summary { position: sticky; top: 96px; background: var(--color-surface); border: 1px solid var(--color-border); padding: 40px 28px 28px; border-top-left-radius: var(--curve-md); }
.builder__summary dl { margin-top: 16px; border-top: 1px solid var(--color-text); }
.builder__summary dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-small); }
.builder__summary dt { color: var(--color-muted); }
.builder__summary dd { margin: 0; font-weight: 600; }
.builder__summary .btn { width: 100%; margin-top: 20px; }
.builder__nojs { padding: 16px; border: 1px dashed var(--color-border); border-radius: 12px; font-size: var(--fs-small); color: var(--color-text-2); }
.js .builder__nojs { display: none; }
.builder:not(.is-ready) [data-builder-needs-js] { display: none; }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .res-grid, .prog-layout, .gp-feature, .builder { grid-template-columns: 1fr; gap: var(--space-48); }
  .prog-aside, .builder__summary { position: static; }
  .race-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .race-strip li:nth-child(4) a { border-right: 0; }
  .race-strip li:nth-child(n+5) a { border-top: 1px solid var(--color-border); }
}
@media (max-width: 640px) {
  .race-card { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; }
  .race-card .race-no { grid-row: 1 / span 2; font-size: 30px; }
  .race-card__time { font-size: 22px; }
  .race-card .status { grid-column: 2 / -1; justify-self: start; }
  .meeting__title { font-size: 26px; }
  .meeting__title span { font-size: 42px; }
  .live-board { grid-template-columns: 1fr; }
  .live-card { padding: 32px 20px 22px; border-top-left-radius: var(--curve-sm); }
  .live-card h2 { font-size: 32px; }
  .builder__row { grid-template-columns: 1fr; }
  .builder__step { grid-template-columns: 1fr; gap: 6px; }
  .builder__summary { padding: 32px 18px 20px; border-top-left-radius: var(--curve-sm); }
  .tabbar [role="tab"] { font-size: 21px; padding-inline: 14px; }
}
.filters--stack { flex-direction: column; align-items: stretch; margin-bottom: 0; }
.filters--stack .field { max-width: none; flex: none; }
.prog-head .h3 { margin-top: 12px; }
.prog-head__meta { margin-top: 8px; }

/* ── resultados / rateios ─────────────────────────────────────────────── */
.result { padding: var(--space-32) 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: 96px; }
.result__head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: start; margin-bottom: var(--space-16); }
.result__title { font: 400 30px/1.1 var(--font-display); }
.result__title a { text-decoration: none; }
.result__title a:hover { color: var(--color-brand); }
.result__media { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: flex-end; font-size: var(--fs-small); }
.result__media .icon { width: 16px; height: 16px; }
.data--rateios tr.is-first td { border-top-color: var(--color-text); }
.data--rateios td a { font-weight: 600; }
.rateio-explain { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-72); margin-top: var(--space-72); padding-top: var(--space-48); border-top: 1px solid var(--color-text); }
.rateio-explain .h3 { margin-top: 12px; }
@media (max-width: 1080px) { .rateio-explain { grid-template-columns: 1fr; gap: var(--space-24); } }
@media (max-width: 640px) {
  .result__head { grid-template-columns: 40px minmax(0, 1fr); }
  .result__head .race-no { font-size: 30px; }
  .result__media { grid-column: 1 / -1; justify-content: flex-start; }
  .result__title { font-size: 24px; }
}
.builder__summary [data-incomplete="true"] { background: var(--color-text-2); }
.live-card--now .status:not(.status--live) { color: var(--color-on-dark); border-color: rgba(233,229,222,.35); }
.builder__reset { width: 100%; margin-top: 8px; }

.picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .picks { grid-template-columns: 1fr; } }
.builder__flow { margin-bottom: var(--space-48); }