/* Fact: one thing to know beside its tile — the date, the place, how to get
   in. The second line is quieter; a fact that leaves the site (the map)
   carries an outward arrow and nothing louder. */
.fact {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  /* Set here too, so a link or button that inherits its font (fact__link)
     keeps the lines as close as any other fact's */
  line-height: var(--leading-snug);

  &[data-align="start"] {
    align-items: flex-start;
  }
}

.fact__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  line-height: var(--leading-snug);
  min-inline-size: 0;
}

.fact__primary {
  font-weight: var(--weight-semibold);
}

.fact__secondary {
  color: var(--color-muted);
}

/* A link out, or a button that opens a menu of them (directions) */
.fact__link {
  appearance: none;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: start;
  text-decoration: none;

  &:hover .fact__primary {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .icon {
    --icon-color: var(--color-muted);
    --icon-size: 0.875em;
  }
}