/* Home — hero from the mockup + new Race Centre sections in its language. */

/* ── hero (mockup: full-bleed + ticket) ───────────────────────────────── */
.hero { position: relative; min-height: min(900px, 100svh); display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.hero > picture { position: absolute; inset: 0; z-index: -2; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-hero); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: end; }
.hero__copy { padding-bottom: 64px; padding-top: 140px; }
.hero .cap { color: rgba(255,255,255,.82); }
.hero .cap::before { background: var(--color-dusk); }
.hero__title { font: 400 var(--fs-h1)/.95 var(--font-display); letter-spacing: -.02em; margin-top: 22px; max-width: 12ch; }
.hero__title i { color: var(--color-dusk); }
.hero__lead { max-width: 46ch; margin-top: 22px; color: rgba(255,255,255,.88); font-size: var(--fs-lead); }
.hero__credit {
  position: absolute; right: 32px; top: 110px; font-size: 11px; color: rgba(255,255,255,.72);
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* ── próximas reuniões ───────────────────────────────────────────────── */
.meets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-text); }
.meet + .meet { border-left: 1px solid var(--color-border); }
.meet__link {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; height: 100%;
  padding: 22px 22px 22px 0; text-decoration: none; color: inherit;
  transition: background var(--dur-base) var(--ease);
}
.meet + .meet .meet__link { padding-left: 22px; }
.meet__link:hover { background: var(--color-surface); }
.meet__day { font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.meet--today .meet__day { color: var(--color-brand); }
.meet__date { font: 400 72px/.9 var(--font-display); letter-spacing: -.02em; }
.meet__date small { font: italic 400 26px/1 var(--font-display); margin-left: 6px; color: var(--color-brand); }
.meet__info { font-size: var(--fs-small); color: var(--color-text-2); }
.meet__classic { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); font-weight: 600; padding-top: 12px; border-top: 1px solid var(--color-border); }
.meet__classic .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--color-brand); }

.prog__done { padding-top: 18px; }
.h2--narrow { max-width: 18ch; }

/* ── results pair ─────────────────────────────────────────────────────── */
.res-pair { display: grid; gap: var(--space-48); }
.res-pair .h4 { margin-bottom: 10px; }

/* ── ao vivo band ─────────────────────────────────────────────────────── */
.live__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-72); align-items: center; }
.live__now { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid rgba(233,229,222,.18); }
.live__now:first-of-type { margin-top: var(--space-32); border-top: 1px solid rgba(233,229,222,.18); }
.live__now .status { justify-self: start; }
.live__now .status--live { color: #6FD3A3; border-color: rgba(111,211,163,.45); }
.live__now b { display: block; font: 400 26px/1.15 var(--font-display); color: #fff; margin-bottom: 4px; }
.live__now p { font-size: var(--fs-small); color: color-mix(in srgb, var(--color-on-dark) 80%, transparent); }
.live__note { margin-top: 14px; color: color-mix(in srgb, var(--color-on-dark) 70%, transparent); }
.live .figure figcaption { color: color-mix(in srgb, var(--color-on-dark) 70%, transparent); }

/* ── grandes prêmios ─────────────────────────────────────────────────── */

/* how-to band keeps the flow + mods */
#apostar .flow { margin-top: 36px; }
#apostar .mods { margin-top: 34px; }

/* ── jogo responsável ────────────────────────────────────────────────── */
.jr-home { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: var(--space-48); align-items: center; border-top: 1px solid var(--color-text); padding-top: var(--space-32); }
.jr-home__list { display: grid; gap: 10px; color: var(--color-text-2); }
.jr-home__list b { color: var(--color-text); font-weight: 600; }

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__copy { padding-bottom: 36px; }
  .hero .ticket { margin: 0 calc(-1 * var(--container-pad)); border-top-left-radius: 120px 44px; }
  .hero__credit { display: none; }
  .meets { grid-template-columns: 1fr 1fr; }
  .meet:nth-child(3) { border-left: 0; }
  .meet:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .meet:nth-child(3) .meet__link { padding-left: 0; }
  .live__inner, .gp-home { grid-template-columns: 1fr; gap: var(--space-48); }
  .jr-home { grid-template-columns: 1fr; gap: var(--space-24); }
}
@media (max-width: 640px) {
  .hero { min-height: auto; }
  .hero::before { background: var(--overlay-hero-m); }
  .hero__copy { padding-top: 110px; }
  .hero__title { font-size: 46px; }
  .hero__lead { font-size: 16px; }
  .hero .cta .btn { flex: 1 1 auto; }
  .hero .ticket { border-top-left-radius: var(--curve-sm); }
  .meets { grid-template-columns: 1fr; }
  .meet + .meet { border-left: 0; border-top: 1px solid var(--color-border); }
  .meet + .meet .meet__link, .meet:nth-child(3) .meet__link { padding-left: 0; }
  .meet__link { grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; column-gap: 18px; padding: 18px 0; }
  .meet__date { grid-row: 1 / span 2; font-size: 56px; }
  .meet__classic { grid-column: 1 / -1; }
  .live__now { grid-template-columns: 1fr; gap: 10px; }
}

/* the ticket keeps its own ink inside the white-on-photo hero */
.hero .ticket .cap { color: var(--color-brand); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards--4 { grid-template-columns: 1fr; } }

/* photo hero on inner pages (Tarumã) */
.hero--page { min-height: min(760px, 92svh); }
.crumbs--light { color: rgba(255,255,255,.8); }
.crumbs--light li + li::before { color: rgba(255,255,255,.5); }
.crumbs--light a:hover { color: #fff; }
/* dark fallback under the photo: text stays legible while the image loads (and for contrast checks) */
.hero { background-color: #2A2C2E; }
.res-pair > * { min-width: 0; }
.hero__credit { background-color: rgba(20,22,24,.72); color: rgba(255,255,255,.86); padding: 8px 4px; border-radius: 4px; }