/* The event page in the Montra layout: a full-width band with the race's picture, what and when it is, and the
   sign-up card, then the page's sections. From docs/design/client/b-montra.html; tokens come from theme.css. */

.event-top {
  background: var(--ysi-soft);
  border-bottom: 1px solid var(--ysi-line);
}

.event-top__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 320px;
  gap: 2.5rem;
  align-items: start;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (max-width: 1199px) {
  .event-top__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .signup-card { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .event-top__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; }
}

.event-top__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .875rem;
  background: var(--ysi-line);
}

.event-top__img,
.event-top__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The same stand-in the events home draws for a race with no cover. */
.event-top__placeholder {
  background:
    repeating-linear-gradient(-58deg, transparent 0 22px, rgba(255, 255, 255, .18) 22px 24px),
    linear-gradient(135deg, #00506E, #0b6f8f);
}

.event-top__info .breadcrumb {
  --bs-breadcrumb-margin-bottom: .625rem;
  font-size: .875rem;
}

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

.event-top__competition {
  margin: 0 0 1.25rem;
  color: var(--ysi-cyan-text);
  font-weight: 600;
}

.event-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1.25rem;
  margin: 0 0 1.25rem;
  font-size: .9375rem;
}

.event-facts dt { color: var(--ysi-ink-3); font-weight: 600; }
.event-facts dd { margin: 0; font-weight: 500; }
.event-facts dd::first-letter { text-transform: uppercase; }

.event-top__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .5rem 1rem;
}

.event-top__actions form { margin: 0 !important; }
.event-top__actions .btn-outline-secondary { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .75rem; font-size: .875rem; }

/* The way in */
.signup-card {
  background: #fff;
  border: 1px solid var(--ysi-line);
  border-radius: 1rem;
  padding: 1.375rem;
}

.signup-card__label {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ysi-ink-3);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .375rem;
  margin-bottom: 1rem;
}

.countdown > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .625rem 0 .5rem;
  border-radius: .625rem;
  background: var(--ysi-soft);
}

.countdown span { font-size: 1.375rem; font-weight: 700; line-height: 1; }
.countdown small { font-size: .6875rem; color: var(--ysi-ink-3); margin-top: .25rem; }

.signup-card__places {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ysi-line);
  font-size: .875rem;
  color: var(--ysi-ink-2);
}

.signup-card__places b { font-size: 1.125rem; color: var(--ysi-ink); }

.signup-card__note {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--ysi-ink-3);
}

/* The page's sections */
.event-body > * + * { margin-top: 3.5rem; }
.event-body { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.event-body__heading {
  font-size: 1.5rem;
  letter-spacing: -.02em;
  margin: 0 0 1.125rem;
}

.event-body__lead {
  font-size: 1.125rem;
  color: var(--ysi-ink-2);
  max-width: 44em;
  margin: 0;
  white-space: pre-line;
}

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

.event-table .table > :not(caption) > * > * { padding: .875rem 1rem; }
.event-table .table > tbody > tr:last-child > * { border-bottom: 0; }
.event-table__brackets { min-width: 14rem; font-size: .875rem; }

.phase-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .875rem;
}

.phase-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--ysi-line);
  border-radius: .75rem;
  font-size: .875rem;
  color: var(--ysi-ink-2);
}

.phase-card.is-open { border-color: var(--ysi-cyan); box-shadow: inset 0 0 0 1px var(--ysi-cyan); }
.phase-card__state { font-weight: 700; color: var(--ysi-ink); }
.phase-card.is-open .phase-card__state { color: var(--ysi-cyan-text); }

.event-body__address { color: var(--ysi-ink-2); margin: 0 0 1rem; }

.event-map {
  height: clamp(260px, 32vw, 420px);
  border-radius: .75rem;
  overflow: hidden;
}

.event-body .share-links .btn { margin: 0 .375rem .375rem 0; }

/* Phones */
@media (max-width: 767.98px) {
  .event-top__grid { padding-bottom: 1.75rem; }
  .event-top__title { font-size: 1.875rem; }
  .event-facts { grid-template-columns: 5.5rem 1fr; }
  .signup-card { padding: 1.125rem; }
  .countdown span { font-size: 1.125rem; }
  .event-body > * + * { margin-top: 2.5rem; }
  .event-body__lead { font-size: 1rem; }
  .phase-cards { grid-template-columns: minmax(0, 1fr); }
}