/* ===== Home page ===== */

/* Hero */
.hero--home { padding: 80px 0; border-bottom: 1px solid var(--c-line); }
.hero--home .hero__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.hero--home .hero__title { display: flex; flex-direction: column; gap: 4px; text-align: center; width: 100%; }
.hero--home .display__line { font-size: 88px; line-height: 84px; }
.hero--home .hero__title-accent { font-size: 104px; line-height: 94px; }
.hero--home .hero__text { font: 400 16px/26px var(--f-plex); color: var(--c-gray); text-align: center; }
.hero--home .hero__ctas { display: flex; gap: 16px; }

/* Hero photo block */
.hero-photo { padding: 0; }
.hero-photo__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-photo__frame { width: 100%; height: 520px; }
.hero-photo__caption { font: 400 12px/1.3 var(--f-plex); color: var(--c-gray-2); text-align: center; }

/* Upcoming markets */
.markets { background: var(--c-paper); color: var(--c-ink); padding: 50px 0; }
.markets__inner { display: flex; flex-direction: column; gap: 48px; }
.markets__title { color: var(--c-orange); }
.markets__sub { color: var(--c-gray-2); }
.markets__grid { display: flex; align-items: flex-start; gap: 32px; }
.markets__board { flex: 1; min-width: 0; }

/* Photo strip */
.strip { background: var(--c-bg); }
.strip__frame { display: block; height: 180px; --shade: .1; }
.strip__frame:hover .photo__img { transform: scale(1.02); }

/* Next to jump */
.ntj { padding: 50px 0; border-bottom: 1px solid var(--c-line); }
.ntj__inner { display: flex; flex-direction: column; gap: 40px; }
.ntj__head-left { gap: 8px; }
.ntj__title { color: var(--c-paper); }
.ntj__body { display: flex; align-items: flex-start; gap: 40px; }
.ntj__media { width: 480px; height: 368px; flex: none; --shade: 0; }
.ntj__list { flex: 1; min-width: 0; }

.race-row { display: flex; align-items: center; padding: 17px 0 18px; border-top: 1px solid var(--c-line); }
.race-row:last-child { border-bottom: 1px solid var(--c-line); }
.race-row__num { width: 44px; flex: none; font: 700 24px/var(--lh-osw) var(--f-osw); color: var(--c-orange); }
.race-row__meta { width: 150px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.race-row__race { font: 700 18px/var(--lh-osw) var(--f-osw); color: var(--c-paper); }
.race-row__type { font: 600 11px/1.3 var(--f-plex); letter-spacing: 1px; color: var(--c-gray); }
.race-row__venue { flex: 1; min-width: 0; font: 700 20px/var(--lh-osw) var(--f-osw); color: var(--c-paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-row__right { display: contents; }
.race-row__time { width: 120px; flex: none; text-align: right; font: 700 18px/var(--lh-osw) var(--f-osw); color: var(--c-orange); }
.race-row__link { width: 120px; flex: none; text-align: right; font: 700 13px/var(--lh-osw) var(--f-osw); letter-spacing: .5px; color: var(--c-paper); transition: color var(--t-fast); }
.race-row__link:hover { color: var(--c-orange); }
.race-row__link-short { display: none; }

@media (max-width: 1099px) {
  .hero--home .display__line { font-size: 64px; line-height: 60px; }
  .hero--home .hero__title-accent { font-size: 76px; line-height: 70px; }
  .hero-photo__frame { height: 400px; }
  .markets__grid { flex-direction: column; align-items: stretch; }
  .markets__board { width: 100%; }
  .markets__slip { width: 100%; position: static; }
  .ntj__media { width: 320px; height: 260px; }
  .race-row__meta { width: 110px; }
  .race-row__time { width: 90px; }
  .race-row__link { width: 100px; }
}
@media (max-width: 899px) {
  .ntj__body { flex-direction: column; }
  .ntj__media { width: 100%; height: 320px; }
}

@media (max-width: 767px) {
  .hero--home { padding: 40px 0 32px; border-bottom: 0; }
  .hero--home .hero__inner { align-items: stretch; gap: 20px; }
  .hero--home .hero__title { text-align: left; gap: 2px; }
  .hero--home .display__line { font-size: 48px; line-height: 44px; }
  .hero--home .hero__title-accent { font-size: 54px; line-height: 50px; }
  .hero--home .hero__text { font-size: 13px; line-height: 20px; text-align: left; }
  .hero--home .hero__ctas { flex-direction: column; gap: 8px; }
  .hero--home .hero__cta { padding: 12px 0; font-size: 15px; width: 100%; }
  .hero-photo { padding-bottom: 24px; }
  .hero-photo__inner { align-items: stretch; gap: 8px; }
  .hero-photo__frame { height: 240px; --shade: .15; }
  .hero-photo__caption { font-size: 11px; text-align: left; }

  .markets { padding: 32px 0; }
  .markets__inner { gap: 24px; }
  .markets__head .sec-head__left { gap: 8px; }
  .markets__title { font-size: 36px; line-height: 38px; letter-spacing: .5px; color: #000; }
  .markets__sub { font: 600 12px/1.3 var(--f-plex); letter-spacing: 1px; color: var(--c-gray-2); }
  .markets__grid { gap: 24px; }

  .strip { padding-bottom: 24px; }
  .strip__frame { height: 120px; }

  .ntj { padding: 32px 0; border-bottom: 0; }
  .ntj__inner { gap: 24px; }
  .ntj__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ntj__title { font-size: 36px; letter-spacing: 0; }
  .ntj__sub { font: 600 11px/1.3 var(--f-plex); letter-spacing: .5px; }
  .ntj__all { font-size: 13px; letter-spacing: .5px; }
  .ntj__body { flex-direction: column; gap: 24px; }
  .ntj__media { width: 100%; height: 180px; }
  .race-row { padding: 11px 0 12px; }
  .race-row__num { width: 32px; font-size: 20px; }
  .race-row__meta { width: 130px; }
  .race-row__race { font-size: 15px; }
  .race-row__type { font-size: 9px; letter-spacing: .5px; }
  .race-row__venue { font-size: 16px; }
  .race-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: 90px; flex: none; }
  .race-row__time { width: auto; font-size: 15px; }
  .race-row__link { width: auto; font: 600 11px/var(--lh-osw) var(--f-osw); letter-spacing: 0; }
  .race-row__link-full { display: none; }
  .race-row__link-short { display: inline; }
}