/* Card styling lives in public/alt/alt-article-card.css, shared with the blog
   index. Only the section's own header and grid are here. */

.alt-blogposts { background: var(--alt-bp-bg); }

.alt-blogposts__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}
.alt-blogposts__header--center { align-items: center; text-align: center; }
.alt-blogposts__header--left { align-items: flex-start; }
.alt-blogposts__header--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.alt-blogposts__sub { margin-top: 10px; max-width: 62ch; }
.alt-blogposts__empty { text-align: center; }

.alt-blogposts__grid {
  display: grid;
  grid-template-columns: repeat(var(--alt-bp-cols-d), minmax(0, 1fr));
  column-gap: var(--alt-bp-gap);
  row-gap: var(--alt-bp-gap-row, var(--alt-bp-gap));
}

/* The heading is sized on the section rather than by the global scale: the
   reference uses a smaller one on the blog index than on the home page. */
.alt-blogposts__header .alt-h2 { font-size: var(--alt-bp-heading-size, var(--alt-h2)); }

.alt-blogposts__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 60px;
}

.alt-blogposts .alt-article-card__media { aspect-ratio: var(--alt-bp-ratio); }

@media (max-width: 1279px) {
  .alt-blogposts__grid { grid-template-columns: repeat(var(--alt-bp-cols-t), minmax(0, 1fr)); }
  .alt-blogposts__header { margin-bottom: 30px; }
  .alt-blogposts__actions { margin-top: 40px; }
}

@media (max-width: 767px) {
  .alt-blogposts__grid { grid-template-columns: repeat(var(--alt-bp-cols-m), minmax(0, 1fr)); }
  .alt-blogposts__header { margin-bottom: 24px; }
  .alt-blogposts__header--split { flex-direction: column; align-items: flex-start; }
  .alt-blogposts__actions { margin-top: 30px; }
}