/**
 *  @package michael-travels-theme
 *
 *  The facts about a trip, a day or a visit.
 *
 *  Laid out as a run of small labelled figures rather than a table: the point
 *  is that a reader takes it in at a glance, not that they read down it.
 */

.travels-facts-heading {
  margin-bottom: var(--mt-space-5);
}

/**
 *  Each run is its own line: when the record happened, then what it holds.
 *
 *  Laid out with flex rather than an even grid so a date range takes the room
 *  it needs and "19 days" takes only what it needs. An even grid stretched two
 *  facts across the full width and left them looking stranded.
 */
.travels-facts-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-5) var(--mt-space-7);
  margin: 0;
}

.travels-facts-list + .travels-facts-list {
  margin-top: var(--mt-space-5);
}

.travels-fact {
  min-width: 0;
}

.travels-fact-label {
  margin: 0 0 var(--mt-space-1);
  color: var(--mt-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.travels-fact-value {
  margin: 0;
  font-family: var(--mt-font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.2;
}

.travels-fact-value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--mt-line);
}

.travels-fact-value a:hover,
.travels-fact-value a:focus-visible {
  color: var(--mt-accent);
  border-bottom-color: currentColor;
}

.background-dark .travels-fact-label {
  color: var(--mt-on-dark-muted);
}




/*  ----------  The terms it is filed under  ----------  */

.travels-facts-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-6);
  margin-top: var(--mt-space-6);
  padding-top: var(--mt-space-5);
  border-top: 1px solid var(--mt-line);
}

.background-dark .travels-facts-terms {
  border-top-color: var(--mt-line-dark);
}

.travels-term-label {
  margin-bottom: var(--mt-space-2);
}

.travels-term-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.travels-term {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  color: var(--mt-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}