/*
 * Librarium Militaris: the digest.
 *
 * The archive's standing account of a listing's subject, set under the results
 * as an endnote. Deliberately quiet: a reader came for the games and met them
 * first, and this is the small print they drop to only if they want it.
 *
 * It is only ever rendered inside <main class="archive">, which already carries
 * the shell width and the gutter, so it states neither.
 */

@layer components {
  .digest {
    margin-top: var(--space-40);
    padding-top: var(--space-32);
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-20);
    color: var(--color-ink-dim);
    font-size: var(--text-14);
    line-height: var(--leading-digest);

    /* Wide enough for the prose and the figures to stand side by side. Its own
       breakpoint: it is the one thing on the page that reflows here. */
    @media (min-width: 900px) {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-48);
      align-items: start;
    }
  }

  .digest__heading {
    grid-column: 1 / -1;
    font-family: var(--font-heading);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-4xl);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  /* The prose names reports, armies, channels and pairings, and links every one
     of them. Set to stay prose: no colour of their own, and an underline that
     only shows up when the eye is already on the word. A dozen accent-coloured
     names in a paragraph reads as a list of links rather than as a sentence. */
  .digest__body {
    max-width: 44rem;

    & a {
      color: var(--color-ink-soft);
      text-decoration: underline;
      text-decoration-color: var(--color-border);
      text-underline-offset: 0.2em;
    }

    & a:hover {
      color: var(--color-accent);
      text-decoration-color: currentColor;
    }
  }

  .digest__text + .digest__text {
    margin-top: var(--space-10);
  }

  /* The written note on the army, where one exists: the only part here a reader
     is likely to want, so it is the only part allowed to be brighter. */
  .digest__brief {
    margin-top: var(--space-16);
    padding-left: var(--space-14);
    border-left: 1px solid var(--color-border);
    color: var(--color-ink-soft);
  }

  /* Where an event's dates and venue came from. Set quietly: it is a citation,
     not a call to leave. */
  .digest__source {
    margin-top: var(--space-14);
    font-size: var(--text-13);

    & a {
      color: var(--color-ink-dim);
      text-decoration: none;
      border-bottom: 1px solid var(--color-border);
    }

    & a:hover { color: var(--color-accent); }
  }

  /* A row of figures rather than a plate of them: same information, a third of
     the room. */
  .digest__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-28);
  }

  .digest__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-7);
    white-space: nowrap;
  }

  .digest__stat-label {
    font-family: var(--font-heading);
    font-size: var(--text-10);
    letter-spacing: var(--tracking-3xl);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .digest__stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-soft);
  }
}