/* The results list and one race's results in the Montra layout. From docs/design/client/b-montra.html;
   tokens come from theme.css. */

/* The list */
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 1.5rem 0 2.25rem;
}

.results-head__title { font-size: clamp(2rem, 3.6vw, 2.75rem); margin: 0; }
.results-head__count { margin: .375rem 0 0; color: var(--ysi-ink-3); font-size: .875rem; }

.results-search {
  display: flex;
  gap: .5rem;
  width: min(100%, 26rem);
}

.results-search .form-control { border-radius: 999px; padding-inline: 1.125rem; }

/* One race: the picture, then what the sheet is of */
.results-photo {
  height: clamp(200px, 26vw, 360px);
  background: var(--ysi-line) center 40% / cover no-repeat;
}

.results-top {
  background: var(--ysi-soft);
  border-bottom: 1px solid var(--ysi-line);
  padding: 2rem 0 2.25rem;
}

.results-top .breadcrumb { font-size: .875rem; --bs-breadcrumb-margin-bottom: .5rem; }

.results-top__title {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  margin: 0 0 .5rem;
}

.results-top__meta,
.results-top__links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0 0 .375rem;
  color: var(--ysi-ink-2);
}

.results-top__meta span::first-letter { text-transform: uppercase; }
.results-top__meta a, .results-top__links a { font-weight: 600; }
.results-top__links { font-size: .9375rem; }

/* Whether the numbers can still change: a neutral note with the state in ink, outlined in cyan once final. */
.publication {
  margin-top: 1.25rem;
  padding: .875rem 1.125rem;
  background: #fff;
  border: 1px solid var(--ysi-line);
  border-left: 4px solid var(--ysi-ink-3);
  border-radius: .625rem;
  font-size: .9375rem;
}

.publication.is-final { border-left-color: var(--ysi-cyan); }
.publication__explanation { display: block; margin-top: .125rem; font-size: .875rem; color: var(--ysi-ink-2); }

.podium {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 991px) { .podium { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }

.podium__place {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--ysi-line);
  border-radius: .875rem;
}

.podium__place:first-child { border-top: 3px solid var(--ysi-cyan); }

.podium__position {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ysi-soft);
  font-weight: 700;
}

.podium__place:first-child .podium__position { background: var(--ysi-cyan); color: #fff; }

.podium__who { min-width: 0; }
.podium__who b { display: block; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__who span { display: block; font-size: .8125rem; color: var(--ysi-ink-2); }
.podium__time { font-size: 1.25rem; font-weight: 700; }

/* The sheet */
.results-filters { margin-top: 1.5rem; }
.results-filters .form-control,
.results-filters .form-select { border-radius: 999px; padding-inline: 1rem; }

.results-count { color: var(--ysi-ink-3); font-size: .875rem; }

.results-table {
  border: 1px solid var(--ysi-line);
  border-radius: .75rem;
}

.results-table .table > :not(caption) > * > * { padding: .75rem 1rem; white-space: nowrap; }
.results-table .table > tbody > tr:last-child > * { border-bottom: 0; }
.results-table [data-testid="result-time"] { font-weight: 700; }

.position {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  font-weight: 600;
}

.position--medal {
  border-radius: 50%;
  border: 1.5px solid var(--ysi-ink);
  font-weight: 700;
}

.position--first { background: var(--ysi-ink); color: #fff; }

.results-section { margin-top: 3.5rem; }
.results-section__heading { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 1rem; }

/* Phones */
@media (max-width: 767.98px) {
  .results-head { margin: .75rem 0 1.5rem; }
  .results-search { width: 100%; }
  .results-top { padding: 1.5rem 0 1.75rem; }
  .results-top__title { font-size: 1.875rem; }
  .podium__place { padding: .75rem 1rem; }
  .podium__time { font-size: 1.0625rem; }
  .results-section { margin-top: 2.5rem; }
}