/* blog/index — the list of posts. Composes only; every value is a token. */

.post-topics {
  margin-top: var(--space-8);
}

.post-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.blog-empty {
  margin-top: var(--space-8);
  color: var(--neutral-500);
  font-style: italic;
}

.post-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

/* The filter sets its own space above the list, so the list's own top margin
   would be added to it rather than replaced. */
.post-topics + .post-list {
  margin-top: var(--space-8);
}

.post-card {
  display: grid;
  gap: var(--space-4);
  height: 100%;
  padding-bottom: var(--space-8);
  border-bottom: var(--border) solid var(--neutral-200);
}

.post-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
}

/* The width and height attributes are unknown here, so the box is set in CSS:
   the reset's max-width would otherwise shrink the width while a height held. */
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}

.post-card:hover .post-card__media img {
  transform: scale(1.03);
}

.post-card__body {
  display: grid;
  gap: var(--space-2);
}

.post-card__date,
.post-card__byline {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--neutral-500);
}

.post-card__date {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.post-card__topic::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--neutral-400);
}

/* The question the post answers. It stands in for a subtitle and is set apart
   from the excerpt below it, because the two would otherwise read as one
   paragraph that repeats itself. */
.post-card__question {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--neutral-800);
}

.post-card__excerpt {
  color: var(--neutral-600);
}

.post-card__title {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-bold);
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--primary-200);
  text-decoration: underline;
}

.post-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border) solid var(--neutral-200);
}

.post-pager__link {
  color: var(--primary-200);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}

.post-pager__link:hover { text-decoration: underline; }

.post-pager__count {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--neutral-500);
  /* Between the two links at every width, including when only one is there. */
  order: 1;
  flex-basis: 100%;
  text-align: center;
}

@media (min-width: 48em) {
  .post-pager__count {
    order: 0;
    flex-basis: auto;
  }

  /* Only a card that HAS an image gets the image column. Without the modifier
     the body would be the first grid item and be squeezed into 18rem, which is
     how a text-only post ends up with its title wrapping every other word. */
  .post-card--illustrated {
    grid-template-columns: 18rem 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  .post-card__media {
    aspect-ratio: 4 / 3;
  }
}

/* The archives render this same template, so two things only they use live here:
   the way back to /blog, and the category nav beneath the topic nav. */
.blog-back {
  margin-top: var(--space-6);
}

.post-topics--categories {
  margin-top: var(--space-4);
}