/* The blog (/blog/, written by the server from server/templates/errand-post.html):
   what the home, technicals and errands styles do not already cover. */

.blog-date {
  margin: 0 0 var(--space-sm);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: 650;
}

/* A post reads as one column; the clip sits in it, centred. */
.blog-clip {
  margin: var(--space-xl) auto;
}

.blog-post .tasks-ask {
  margin-top: var(--space-lg);
}

.blog-post .tasks-copy-row {
  margin-top: var(--space-md);
}

.blog-post .tasks-copy-row[hidden] {
  display: none;
}

.blog-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.blog-list {
  display: grid;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-entry {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}

/* An entry without a clip keeps its text in the second column. */
.blog-entry > div:only-child {
  grid-column: 2;
}

/* A post's title is a link in a list, not a section heading: it runs the
   column's width. */
.blog-entry h2 {
  max-width: none;
  margin: 0 0 var(--space-xs);
  font-size: 1.3rem;
}

.blog-entry p {
  margin: 0;
}

.blog-poster {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-ocean-dark);
}

@media (max-width: 30rem) {
  .blog-entry {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
}