/* ==============================================================================
   FICHA BLOCK

   A project's fact sheet, drawn like the title block of a drawing (doc/07):
   each fact is a cell under a rule, its label small and grey above its
   value. On a phone the cells become rows, label and value side by side,
   which reads faster than a column of tiny cells.
   ============================================================================== */

.block-ficha > h2 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-xl);
}

.ficha__list {
  display: grid;
  margin: 0;
}

.ficha__item {
  display: grid;
  grid-template-columns: minmax(6rem, 2fr) 3fr;
  gap: var(--spacing-md);
  padding-block: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

.ficha__item:last-child {
  border-bottom: 1px solid var(--border-color);
}

.ficha__item dt {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.ficha__item dd {
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* From a tablet up, one cell per fact across the column, as many as fit
   at 12rem, each with its label above its value. The rule under the
   last row moves to every cell, since any of them can end a row. */
@media (min-width: 48em) {
  .ficha__list {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    column-gap: var(--spacing-lg);
  }

  .ficha__item {
    grid-template-columns: none;
    align-content: start;
    gap: var(--spacing-xs);
    padding-block: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
  }
}