/* Sports page — numbers from gen.js on sports (9:4) and sports-mobile (41:5). */

/* ── hero ─────────────────────────────────────────────────────────────── */
.shero { display: flex; gap: 40px; padding: 64px; background: var(--color-dark); color: var(--color-cream); overflow: hidden; }
.shero__plaque {
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px; flex: 1; min-width: 0;
  padding: 48px; border-radius: 20px; background: var(--color-dark-2); box-shadow: inset 0 0 0 1px var(--tint-white-15);
}
.shero__labels { display: flex; align-items: center; gap: 12px; }
.shero__eyebrow { font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.shero__eyebrow--brand { color: var(--color-brand); }
.shero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); }
.shero__title { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-family: var(--font-display); text-transform: uppercase; }
.shero__l1 { font-size: 72px; line-height: 68px; color: var(--color-brand); }
.shero__l2 { font-size: 56px; line-height: 56px; padding: 8px 20px; border-radius: 8px; background: var(--color-brand); color: var(--color-ink); }
.shero__text { font-size: 16px; line-height: 26px; }
.shero__cta { padding: 16px 28px; border-color: transparent; font-size: 15px; line-height: 20px; }
.shero__media { position: relative; width: 480px; height: 480px; flex: none; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--tint-white-15); }
.shero__img { width: 480px; height: 480px; object-fit: cover; }
.shero__plate {
  position: absolute; left: 24px; top: 24px; padding: 8px 16px; border-radius: 6px; background: var(--color-dark-2); color: var(--color-brand);
  font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.shero__wm { position: absolute; right: 0; bottom: -20px; font-family: var(--font-display); font-size: 180px; line-height: 271px; color: var(--color-brand); opacity: .06; }

/* ── popular markets ──────────────────────────────────────────────────── */
.smarkets { display: flex; flex-direction: column; gap: 32px; padding: 64px; background: var(--color-bg); color: var(--color-ink); }
.smarkets__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 94px; }
.smarkets__heading { display: flex; flex-direction: column; gap: 8px; }
.eyebrow--sm { font-size: 11px; line-height: 14px; letter-spacing: .12em; }
.smarkets__title { font-family: var(--font-display); font-size: 48px; line-height: 72px; text-transform: uppercase; }
.smarkets__desc { width: 320px; font-size: 13px; line-height: 20px; opacity: .7; }
.smarkets__body { display: flex; gap: 32px; align-items: flex-start; }
.smarkets__body .board { flex: 1; min-width: 0; }

/* ── featured competition ─────────────────────────────────────────────── */
.featured {
  display: flex; gap: 40px; padding: 78px 64px; background: var(--color-brand); color: var(--color-ink);
  border-top: 2px solid var(--color-dark-2); border-bottom: 2px solid var(--color-dark-2);
}
.featured__content { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; }
.featured__heading { display: flex; flex-direction: column; gap: 24px; }
.featured__title { font-family: var(--font-display); font-size: 96px; line-height: 86px; text-transform: uppercase; }
.featured__sub { font-size: 15px; line-height: 20px; font-weight: 700; opacity: .7; }
.featured__athletes { display: flex; flex-direction: column; gap: 4px; }
.featured__name { font-family: var(--font-display); font-size: 36px; line-height: 54px; text-transform: uppercase; }
.featured__vs { font-size: 14px; line-height: 18px; font-weight: 800; opacity: .65; }   /* mockup .4 = 2.5:1; .65 keeps the fade and passes AA */
.featured__when { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.featured__time { font-size: 14px; line-height: 18px; font-weight: 700; }
.featured__plate {
  padding: 8px 16px; border-radius: 6px; background: var(--color-dark); color: var(--color-brand);
  font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.featured__pic { flex: none; }
.featured__img { width: 640px; height: 480px; object-fit: cover; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--color-dark-2); }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .shero { flex-direction: column; gap: 24px; padding: 24px 16px 32px; }
  .shero__plaque { gap: 24px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .shero__labels { gap: 8px; }
  .shero__eyebrow { font-size: 10px; line-height: 13px; letter-spacing: .08em; }
  .shero__dot { width: 4px; height: 4px; }
  .shero__title { gap: 8px; }
  .shero__l1 { font-size: 50px; line-height: 47.5px; color: var(--color-bg); }
  .shero__l2 { font-size: 36px; line-height: 36px; padding: 6px 12px; border-radius: 4px; }
  .shero__text { font-size: 14px; line-height: 21px; color: var(--color-bg); }
  .shero__cta { width: 100%; min-height: 46px; padding: 13px 20px; font-size: 14px; line-height: 18px; }
  .shero__media { width: 100%; height: 240px; box-shadow: none; }
  .shero__img { width: 100%; height: 240px; }
  .shero__plate { left: 12px; top: 12px; padding: 12px 16px; font-size: 10px; line-height: 13px; }
  .shero__wm { display: none; }

  .smarkets { gap: 24px; padding: 32px 16px; }
  .smarkets__head { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; }
  .smarkets__heading .eyebrow { color: var(--color-dark-2); }
  .smarkets__title { font-size: 38px; line-height: 38px; }
  .smarkets__desc { width: auto; font-size: 13px; line-height: 18px; opacity: 1; color: var(--color-dark-2); }
  .smarkets__body { flex-direction: column; align-items: stretch; gap: 0; }
  .smarkets__body .slip { margin: 44px 0 -8px; width: auto; }   /* the frame's bet-slip-section: 12px above, 24px below */
  .slip__place { min-height: 48px; padding-block: 0; border-color: transparent; }

  .featured { flex-direction: column; gap: 20px; padding: 32px 16px; background: var(--color-dark); color: var(--color-brand); border: 0; }
  .featured__content { gap: 20px; }
  .featured__heading { gap: 8px; }
  .featured__eyebrow { color: var(--color-brand); }
  .featured__title { font-size: 38px; line-height: 38px; }
  .featured__sub { font-size: 13px; line-height: 18px; font-weight: 400; opacity: 1; color: var(--color-cream); }
  .featured__athletes { gap: 6px; }
  .featured__name { font-size: 28px; line-height: 42px; }
  .featured__when { flex-direction: row; align-items: center; gap: 8px; }
  .featured__time { color: var(--color-bg); }
  .featured__plate { padding: 6px 12px; background: var(--color-dark-2); font-size: 10px; line-height: 13px; }
  .featured__img { width: 100%; height: 220px; border-radius: 12px; box-shadow: none; }
}