/* ============================================================
   UH article card: the unit used by the homepage Latest grid,
   the author page and every investigation grid.
   ============================================================ */

/* Rows 1-4 are image, title, excerpt, meta. The 1fr on the excerpt row drops
   the meta line to the foot of every card in a stretched grid row. */
.uh-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
}

.uh-card-image {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
}

.uh-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.uh-card-title {
  font: var(--t-headline);
  grid-column: 1 / -1;
  grid-row: 2;
  text-transform: uppercase;
  margin: 0;
}

.uh-card-title a {
  color: var(--text-color);
}

.uh-card-excerpt {
  font: var(--t-dek-sm);
  grid-column: 1 / -1;
  grid-row: 3;
  opacity: var(--t-emph);
  margin: 0;
}

.uh-card-excerpt:empty {
  display: none;
}

.uh-card-date {
  font: var(--t-meta);
  grid-column: 1;
  grid-row: 4;
  justify-self: start;
  align-self: baseline;
  opacity: var(--t-emph-soft);
}

.uh-card-authors {
  font: var(--t-byline);
  grid-column: 2;
  grid-row: 4;
  justify-self: end;
  align-self: baseline;
  opacity: var(--t-emph);
}

/* uh-post-part.hbs supplies the number; an extra row between the image and the
   title shifts the rest of the card down one. */
.uh-card:has(.uh-post-part) {
  grid-template-rows: auto auto auto 1fr auto;
}

.uh-card .uh-post-part {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Optical: a title line box carries blank space above its caps, so without
   this the label reads as further from the title than from the image. */
.uh-card:has(.uh-post-part) .uh-card-title {
  grid-row: 3;
  margin-top: -0.4em;
}

.uh-card:has(.uh-post-part) .uh-card-excerpt {
  grid-row: 4;
}

.uh-card:has(.uh-post-part) .uh-card-date,
.uh-card:has(.uh-post-part) .uh-card-authors {
  grid-row: 5;
}

/* A grid holding any label reserves the row in every card so the titles line
   up. Not worth the empty row on one-column mobile. */
@media (min-width: 992px) {
  .uh-card-grid:has(.uh-post-part) .uh-card,
  .uh-series-grid:has(.uh-post-part) .uh-card {
    grid-template-rows: auto minmax(clamp(12px, 0.85vw, 15px), auto) auto 1fr auto;
  }

  .uh-card-grid:has(.uh-post-part) .uh-card-title,
  .uh-series-grid:has(.uh-post-part) .uh-card-title {
    grid-row: 3;
    margin-top: -0.4em;
  }

  .uh-card-grid:has(.uh-post-part) .uh-card-excerpt,
  .uh-series-grid:has(.uh-post-part) .uh-card-excerpt {
    grid-row: 4;
  }

  .uh-card-grid:has(.uh-post-part) .uh-card-date,
  .uh-card-grid:has(.uh-post-part) .uh-card-authors,
  .uh-series-grid:has(.uh-post-part) .uh-card-date,
  .uh-series-grid:has(.uh-post-part) .uh-card-authors {
    grid-row: 5;
  }
}

.uh-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.6vw, 48px);
}

@media (max-width: 1200px) {
  .uh-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .uh-card-grid {
    grid-template-columns: 1fr;
  }
}