/* Resource grid — C17.
 *
 * The same hairline grid and the same water hover as the range cards, because
 * a document card and a range card are the same gesture: a rectangle you can
 * click. What differs is only what is inside it.
 */

.pl-resources__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-4);
}

.pl-resources__title {
  font-size: var(--step-2);
  letter-spacing: var(--track-tight);
  max-width: 20ch;
  margin: 0;
}

.pl-resources__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition);
}

.pl-resources__card:hover,
.pl-resources__card:focus-visible {
  background: var(--c-water);
  /* Navy on sky is 7.8:1. On a dark section the card's text is paper, which
   * would fail on sky, so it is pinned back to navy — the same correction the
   * range cards make. */
  color: var(--pl-navy);
}

.pl-resources__card:hover .pl-muted,
.pl-resources__card:focus-visible .pl-muted {
  color: var(--pl-navy);
}

.pl-resources__meta {
  font-size: 0.75rem;
}

.pl-resources__name {
  font-size: 1.1875rem;
}

.pl-resources__note {
  font-size: 0.9375rem;
  line-height: 1.5;
  /* Pushed to the bottom so the names of four cards sit on one line however
   * long their notes are. */
  margin-top: auto;
}