/* Race-day type and the interactive, illustrative course preview. */
body.ir-site {
  font-family: var(--font);
}

body.ir-site :is(h1, h2, h3),
body.ir-site .hero-event-brand b,
body.ir-site .brand-event-wordmark b {
  font-family: var(--display-font);
  font-weight: 800;
}

body.ir-site :is(button, input, select, textarea) { font-family: var(--font); }

body.ir-site main#mainContent > .race-journey {
  background: #e8f0eb !important;
  color: #123d36;
}

body.ir-site .race-journey > * { max-width: 1240px; }

.journey-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 27px;
}

body.ir-site .journey-heading .section-label {
  margin: 0 0 12px;
  color: #087f89 !important;
}

body.ir-site .journey-heading h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px) !important;
  line-height: .94 !important;
}

body.ir-site .journey-heading > p {
  max-width: 335px;
  margin: 0 0 3px;
  color: #3e6055;
  font-size: 15px;
}

.journey-modes {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid #b7cbc0;
}

.journey-modes button {
  position: relative;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 9px 19px;
  border: 0;
  background: transparent;
  color: #375a50;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.journey-modes button:first-child { padding-left: 0; }
.journey-modes button span { color: #6c8a79; font-size: 11px; }
.journey-modes button strong { color: inherit; font-size: 14px; }
.journey-modes button:hover { color: #063f43; background: #dae9de; }
.journey-modes button.active { color: #0b665f; }
.journey-modes button.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: #dd5346;
  content: "";
}

.journey-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(295px, .8fr);
  min-height: 445px;
}

.journey-route {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 26px 30px 19px;
  background: #123d36;
  color: #fff;
}

.journey-route::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(220, 239, 224, .035) 46px 47px);
  content: "";
  pointer-events: none;
}

.journey-route-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #b8d8ca;
  font-size: 11px;
  font-weight: 800;
}

.journey-route-top strong { color: #d4ed94; font-size: 13px; }

.journey-route-graphic {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 275px;
  flex: 1 1 auto;
  place-items: center;
}

.journey-route-graphic svg {
  display: block;
  width: 100%;
  max-height: 310px;
  overflow: visible;
}

.journey-lane { fill: none; }
.journey-lane-outer { stroke: rgba(205, 236, 211, .23); stroke-width: 52; }
.journey-lane-inner { stroke: rgba(250, 255, 250, .68); stroke-width: 2; stroke-dasharray: 13 13; }
.journey-lane-progress { stroke: #d5ed8b; stroke-width: 10; stroke-linecap: round; }
.journey-route-marker { fill: #e65e4d; stroke: #fff; stroke-width: 4; }
.journey-route-marker-core { fill: #fff; }

.journey-route-centre {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate(-50%, -54%);
}

.journey-route-centre small { color: #cde6ae; font-size: 10px; font-weight: 800; }
.journey-route-centre strong {
  margin: 5px 0 2px;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(32px, 4vw, 49px);
  font-weight: 800;
  line-height: .9;
}
.journey-route-centre span { color: #c4d8cc; font-size: 11px; }

.journey-route-control {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 5px;
  font-size: 12px;
}

.journey-route-control label { color: #e9f3ed; font-weight: 700; }
.journey-route-control output { min-width: 92px; color: #d5ed8b; text-align: right; }
.journey-route-control input {
  width: 100%;
  min-height: 28px;
  margin: 0;
  accent-color: #d5ed8b;
  cursor: pointer;
}

body.ir-site .journey-route-note {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  color: #a8c7b7;
  font-size: 10px;
  line-height: 1.35 !important;
}

.journey-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 31px 0 31px 36px;
  border-top: 1px solid #b7cbc0;
}

.journey-distance { display: flex; width: 100%; justify-content: space-between; align-items: start; }
.journey-distance > span { color: #567167; font-size: 10px; font-weight: 800; }
.journey-distance > strong {
  color: #0b716f;
  font-family: var(--display-font);
  font-size: 82px;
  line-height: .8;
}
.journey-distance small { font-size: 28px; }
body.ir-site .journey-details h3 { margin: 11px 0 9px; font-size: 34px; line-height: 1 !important; }
body.ir-site .journey-details > p { margin: 0 0 19px; color: #49665b; font-size: 14px; }

.journey-facts { width: 100%; margin: auto 0 23px; }
.journey-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #bbcec3;
  font-size: 13px;
}
.journey-facts dt { color: #587267; }
.journey-facts dd { margin: 0; color: #153d35; font-weight: 700; text-align: right; }

.journey-register {
  display: flex;
  width: 100%;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 17px;
  background: #dd5346;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: background-color 180ms ease, transform 180ms ease;
}
.journey-register:hover { background: #bf4237; transform: translateY(-2px); }

.journey-waypoints {
  padding: 28px 0 22px;
  border-bottom: 1px solid #bbcec3;
}
.journey-waypoints[hidden] { display: none; }
.journey-waypoints-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 16px;
}
.journey-waypoints-heading span { color: #0b807c; font-size: 10px; font-weight: 800; }
body.ir-site .journey-waypoints-heading h3 { margin: 3px 0 0; font-size: 32px; line-height: 1 !important; }
body.ir-site .journey-waypoints-heading p { max-width: 365px; margin: 0; color: #587267; font-size: 12px; }
.journey-waypoints ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 23px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: waypoint;
}
.journey-waypoints li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: start;
  gap: 1px 7px;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid #bbcec3;
  counter-increment: waypoint;
}
.journey-waypoints li::before {
  grid-row: 1 / 3;
  color: #0b807c;
  content: counter(waypoint, decimal-leading-zero);
  font-family: var(--display-font);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
}
.journey-waypoints li strong { color: #173d37; font-size: 13px; line-height: 1.2; }
.journey-waypoints li small { color: #5b776b; font-size: 11px; line-height: 1.25; }

.journey-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-top: 20px;
}
.journey-steps > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: start;
  gap: 2px 8px;
  padding: 0 14px;
  border-right: 1px solid #bbcec3;
}
.journey-steps > div:first-child { padding-left: 0; }
.journey-steps > div:last-child { border: 0; }
.journey-steps span { grid-row: 1 / 3; color: #0b807c; font-family: var(--display-font); font-size: 25px; font-weight: 800; line-height: 1; }
.journey-steps strong { font-size: 13px; line-height: 1.1; }
.journey-steps small { color: #5b776b; font-size: 11px; line-height: 1.25; }

@media (max-width: 900px) {
  .journey-layout { grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); }
  .journey-route { padding-inline: 20px; }
  .journey-details { padding-left: 24px; }
  .journey-waypoints ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .journey-heading { display: block; }
  body.ir-site .journey-heading > p { margin-top: 14px; }
  .journey-layout { display: block; }
  .journey-route { min-height: 360px; padding: 19px 17px 16px; }
  .journey-route-graphic { min-height: 220px; }
  .journey-route-graphic svg { max-height: 245px; }
  .journey-details { min-height: 320px; padding: 24px 0 28px; border-top: 0; }
  .journey-distance > strong { font-size: 70px; }
  .journey-facts { margin-top: 12px; }
  .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 0; padding-top: 0; }
  .journey-steps > div:nth-child(3) { padding-left: 0; }
  .journey-steps > div:nth-child(2) { border: 0; }
  .journey-waypoints-heading { display: block; }
  body.ir-site .journey-waypoints-heading p { margin-top: 7px; }
  .journey-waypoints ol { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .journey-modes button { flex: 1 1 0; flex-wrap: wrap; gap: 2px 7px; padding: 7px 8px; font-size: 12px; }
  .journey-modes button:first-child { padding-left: 2px; }
  .journey-modes button strong { width: 100%; padding-left: 20px; font-size: 12px; }
  .journey-route-centre strong { font-size: 27px; }
  .journey-route-centre small { font-size: 8px; }
  .journey-route-centre span { font-size: 9px; }
  .journey-route-control { grid-template-columns: 1fr auto; gap: 1px 8px; }
  .journey-route-control input { grid-column: 1 / -1; grid-row: 2; }
  .journey-route-control output { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-modes button, .journey-register { transition: none; }
  .journey-register:hover { transform: none; }
}