/* Events and past events pages. The race weather modal styles are in weather.css. */
/* Past events: quieter than the upcoming ones (grey dates and titles, a Completed tag, grouped by year), so the two lists cannot be mistaken for each other. */
.year-head { margin: 3.2rem 0 1rem; font: 800 clamp(1.6rem, 3vw, 2.2rem)/1 var(--display); letter-spacing: .14em; color: var(--mute); }
.year-head:first-of-type { margin-top: 0; }
.rows-past .row small { color: var(--mute); }
.rows-past .row h3 { color: var(--mute); transition: color .25s; }
.rows-past .row:hover h3 { color: var(--paper); }
.rows-past .done { display: inline-block; margin-left: .8rem; padding: .28rem .5rem; vertical-align: middle; font: 700 .66rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); }

/* Year-round sessions (Easy Laps, Intro2Speed): regular things, so quieter than the events above. */
.regular { margin-top: 4.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.regular-head { font: 700 .8rem/1 var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--mute); }
.regular-note { margin-top: .5rem; color: #6d7887; font-size: .95rem; }
.regular-list { margin-top: 1.2rem; }
.regular-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.regular-item h4 { font: 700 1.05rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.regular-item p { margin-top: .3rem; max-width: 42rem; color: var(--mute); font-size: .95rem; }
.regular-link { font: 700 .8rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.regular-link:hover { color: var(--paper); }

/* Easy Laps page */
.easy-facts { margin-top: 0; }
.easy-note { margin-top: 1rem; color: var(--mute); }
.easy-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .15em; }
.easy-cols { display: grid; gap: 2.5rem; margin-top: 4rem; }
@media (min-width: 800px) { .easy-cols { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.easy-cols h3 { margin-bottom: 1rem; font: 800 1.5rem/1.05 var(--display); text-transform: uppercase; }
.easy-list { list-style: none; padding: 0; }
.easy-list li { position: relative; padding: .6rem 0 .6rem 1.6rem; border-bottom: 1px solid var(--line); color: #B9C2CE; }
.easy-list li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: .7rem; height: .7rem; background: var(--accent); }

/* All past events page, and the link to it from the events page. */
.all-past { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.all-past span { color: var(--mute); font-size: .95rem; }
.crumb { display: inline-flex; margin-bottom: 2rem; font: 700 .85rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text); }
.crumb:hover { color: var(--paper); }
.stat-strip { display: flex; flex-wrap: wrap; gap: 1.4rem 3.5rem; margin: 0 0 2.5rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.stat-strip dt { font: 700 .72rem/1 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--accent-text); }
.stat-strip dd { margin: .45rem 0 0; font: 800 2.4rem/1 var(--display); }
.past-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.5rem; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); }
.view-toggle a { padding: .7rem 1.2rem; font: 700 .8rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.view-toggle a:hover { color: var(--paper); }
.view-toggle a.on { background: var(--accent); color: #fff; }
.year-jump { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.year-jump a { font: 700 .9rem/1 var(--display); letter-spacing: .16em; color: var(--mute); }
.year-jump a:hover { color: var(--paper); }
.year-jump a span { margin-left: .25rem; font-size: .75rem; color: #5f6b7a; }
.year-head small { margin-left: .8rem; font: 700 .75rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: #5f6b7a; }
.past-list { border-top: 1px solid var(--line); }
.past-row { display: grid; grid-template-columns: 15rem 1fr 14rem 5rem; gap: .3rem 1.2rem; align-items: baseline; padding: .8rem .3rem; border-bottom: 1px solid var(--line); }
.past-row:hover { background: var(--ink-2); }
.past-row .p-when { color: var(--mute); font-size: .92rem; white-space: nowrap; }
.past-row .p-name { font: 700 1.05rem/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.past-row .p-venue { color: var(--mute); font-size: .92rem; }
.past-row .p-res { text-align: right; font: 700 .7rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.row-venue { font: 700 .75rem/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #6d7887; }
@media (max-width: 52rem) {
  .past-row { grid-template-columns: 1fr auto; }
  .past-row .p-when { grid-column: 1 / -1; }
  .past-row .p-venue { grid-column: 1; }
}

/* Legacy events: a title and a link to results held on another site */
.legacy-note { margin: -.4rem 0 1.2rem; color: var(--mute); max-width: 46rem; }
.legacy-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.2rem; align-items: baseline; padding: .8rem .3rem; border-bottom: 1px solid var(--line); }
.legacy-row .p-name { font: 700 1.05rem/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.legacy-row .p-link { font: 700 .75rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.legacy-row .p-link:hover { text-decoration: underline; }
.legacy-row .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }