/*
 * What a card lists, one entry per row.
 *
 * Not a table: most of these listings hold a single row, and three column
 * headings above one row weigh more than what they announce. The name takes the
 * room that is left; what qualifies it and what leads from it hold the right.
 */
.entry-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;

  /* The negative margins of the card footer, so hover and rules go edge to
     edge like the one separating the footer from the title. */
  margin: 0 -2rem;
  padding: 0.75rem 2rem;
}

/*
 * A rule separates what is not together, and only that: between two independent
 * entries, and between two groups. Inside a group, nothing — neither under its
 * heading nor between its entries, which belong together and read as such.
 *
 * Never above the first either: the card footer already has one.
 */
.entry:not(.entry--grouped) + .entry,
.entry + .entry__group {
  border-top: 1px solid var(--border-default-grey);
}

/*
 * The flex basis is wider than the box will often be: the name then goes alone
 * on its row and what follows wraps underneath, instead of packing into narrow
 * columns beside it.
 */
.entry__name {
  flex: 1 1 24rem;
  font-weight: 500;
}

/*
 * What qualifies an entry — a MIME type, a short identifier — as `code` rather
 * than `fr-badge`: the DSFR tag upcases its content, and « APPLICATION/PDF » is
 * no longer what the directory published.
 */
.entry__tag {
  font-size: 0.75rem;
  color: var(--text-mention-grey);
  background-color: var(--background-alt-grey);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

.entry__action {
  margin-left: auto;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* The DSFR icon classes fix 1.5 rem, which towers over a 0.875 link. */
.entry__action .fr-icon-arrow-right-line::before {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125rem;
}

/* A Semantic Repository address does not fit on a shared row: it goes under
   the name rather than fight it for the room. */
.entry__detail {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--text-mention-grey);
  word-break: break-all;
}

/*
 * A group is not an entry but what gathers the ones that follow: it announces
 * itself set back, and what it gathers is indented under it, failing which
 * nothing would say where one stops and the next begins.
 */
.entry__group {
  margin: 0 -2rem;
  padding: 0.75rem 2rem 0.25rem;
  font-size: 0.875rem;
  color: var(--text-mention-grey);
}

.entry--grouped {
  padding-left: 3rem;
}

/*
 * A listing whose every row leads somewhere, without wrapping the row in a
 * link: the link stays the one carrying the text — a single one, which the
 * keyboard and a screen reader reach — and a pseudo-element stretches it across
 * the row. Hence the modifier: a row carrying two links cannot.
 */
.entry-list--clickable .entry {
  position: relative;
}

.entry-list--clickable .entry:hover {
  background-color: var(--background-alt-blue-france);
}

.entry-list--clickable .entry__action::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* The entry the chain settled on, and which decides the next step. */
.entry--current {
  box-shadow: inset 0.25rem 0 0 0 var(--border-action-high-blue-france);
}