/* participe.jockeypr.co — blocks of the landing, built from the main site's tokens
 * and components (ticket, specs, flow, cards, cap, marquise curve). Loaded after
 * style.css; header and footer rules are not touched here. */

/* ── 01 · hero ─────────────────────────────────────────────────────────── */
.phero {
  background: var(--color-surface);
  border-bottom-right-radius: var(--curve-xl);
  padding: var(--space-48) 0 var(--space-112);
}
.phero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-72); align-items: center; }
.phero__title { font: 400 clamp(48px, 5.6vw, 88px)/.96 var(--font-display); letter-spacing: -.02em; margin-top: 22px; max-width: 13ch; }
.phero__title i { color: var(--color-brand); }
.phero__lead { margin-top: 22px; max-width: 50ch; font-size: var(--fs-lead); color: var(--color-text-2); }

.phero__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-48);
  border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-border);
}
.phero__facts > div { padding: 16px 0; }
.phero__facts > div + div { padding-left: 16px; border-left: 1px solid var(--color-border); }
.phero__facts dt { font-size: 12px; color: var(--color-muted); }
.phero__facts dd { margin: 4px 0 0; font: 400 40px/1 var(--font-display); font-variant-numeric: tabular-nums; }

.phero__media { position: relative; }
.phero__photo picture, .phero__photo img { display: block; width: 100%; }
.phero__photo img {
  height: auto; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: 30% 50%;
  border-top-left-radius: var(--curve-xl); background-color: #2A2C2E;
}
.phero__media figcaption { font-size: 12px; color: var(--color-muted); margin-top: 10px; text-align: right; }
/* the ticket overlaps the photo's lower-left corner */
.phero__media .phero__ticket { position: absolute; left: -64px; bottom: 56px; width: min(400px, 82%); }
.phero__ticket .ticket__title { font-size: 30px; }
.phero__addr { margin-top: 6px; font-size: var(--fs-small); color: var(--color-text-2); }

/* ── 02 · portal index ─────────────────────────────────────────────────── */
.h2--narrow { max-width: 18ch; }
.portal__intro { max-width: 42ch; color: var(--color-text-2); }
.portal {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-72);
  border-top: 1px solid var(--color-text);
}
.portal__item { border-bottom: 1px solid var(--color-border); }
.portal__link {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; gap: 18px; align-items: start;
  padding: 24px 4px; text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.portal__link:hover { background: rgba(255,255,255,.55); }
.portal__no { font: italic 400 44px/1 var(--font-display); color: var(--color-brand); }
.portal__title { display: block; font: 400 32px/1.05 var(--font-display); transition: color var(--dur-fast) var(--ease); }
.portal__text { display: block; margin-top: 8px; font-size: var(--fs-ui); color: var(--color-text-2); }
.portal__arrow { width: 20px; height: 20px; margin-top: 8px; color: var(--color-faint); transition: transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease); }
.portal__link:hover .portal__title { color: var(--color-brand); }
.portal__link:hover .portal__arrow { color: var(--color-brand); transform: translate(3px, -3px); }

/* ── 03 · como apostar ─────────────────────────────────────────────────── */
#como-apostar .flow { margin-top: 0; }
.channels { margin-top: var(--space-48); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.channels .card { background: var(--color-bg); }

/* ── 04 · closing CTA + Jogo Responsável ───────────────────────────────── */
.final { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-24); align-items: stretch; }
.final__cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; min-height: 560px; padding: var(--space-72) var(--space-48) var(--space-48);
  background-color: #2A2C2E; color: #fff; border-top-left-radius: var(--curve-xl);
}
.final__cta > picture { position: absolute; inset: 0; z-index: -2; }
.final__cta .final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.final__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(20,22,24,.92) 0%, rgba(20,22,24,.78) 45%, rgba(20,22,24,.25) 100%);
}
.final__copy { max-width: 36rem; }
.final__cta .cap { color: rgba(255,255,255,.82); }
.final__cta .cap::before { background: var(--color-dusk); }
.final__cta .h2 { color: #fff; }
.final__cta .h2 i { color: var(--color-dusk); }
.final__copy > p:not(.cap) { margin-top: 18px; color: rgba(255,255,255,.88); max-width: 48ch; }
.final__credit {
  position: absolute; top: 18px; right: 20px; max-width: 70%;
  font-size: 11px; line-height: 1.4; text-align: right; color: rgba(255,255,255,.86);
  background-color: rgba(20,22,24,.72); padding: 4px 8px; border-radius: 4px;
}

.final__rg {
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top-left-radius: var(--curve-md); padding: var(--space-48) var(--space-32) var(--space-32);
}
.final__mark { font: 400 72px/1 var(--font-display); color: var(--color-brand); }
.final__rg > p { color: var(--color-text-2); }
.final__list { display: grid; gap: 10px; color: var(--color-text-2); font-size: var(--fs-ui); }
.final__list li { position: relative; padding-left: 22px; }
.final__list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--color-brand); }
.final__list b { color: var(--color-text); font-weight: 600; }
.final__rg .btn { margin-top: auto; }

/* ── tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .phero { padding-bottom: var(--space-72); }
  .phero__inner { grid-template-columns: 1fr; gap: var(--space-48); }
  .phero__media .phero__ticket { position: relative; left: auto; bottom: auto; width: auto; margin: -96px 0 0 var(--space-24); max-width: 420px; }
  .portal { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr 1fr; }
  .final { grid-template-columns: 1fr; }
}

/* ── mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .phero { padding: var(--space-32) 0 var(--space-48); }
  .phero__title { font-size: 46px; }
  .phero__lead { font-size: 16px; }
  .phero .cta .btn { flex: 1 1 auto; }
  .phero__facts dd { font-size: 32px; }
  .phero__photo img { aspect-ratio: 4 / 3; border-top-left-radius: var(--curve-lg); }
  .phero__media .phero__ticket { margin: -48px 12px 0; max-width: none; border-top-left-radius: var(--curve-sm); }
  .phero__ticket .ticket__title { font-size: 26px; }
  .phero__media figcaption { text-align: left; }
  .portal__link { grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 12px; padding: 20px 0; }
  .portal__no { font-size: 32px; }
  .portal__title { font-size: 26px; }
  .channels { grid-template-columns: 1fr; }
  .final__cta { min-height: 520px; padding: var(--space-72) 20px 28px; border-top-left-radius: var(--curve-lg); }
  .final__cta .cta .btn { flex: 1 1 auto; }
  .final__cta { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .final__credit { position: static; order: 2; align-self: flex-start; margin-top: 24px; max-width: none; text-align: left; }
  .final__rg { padding: var(--space-48) 20px 24px; border-top-left-radius: var(--curve-sm); }
}