/*
 * Blog listing grid.
 *
 * The listing cards carry GeneratePress's grid-33 / tablet-grid-50 /
 * mobile-grid-100 classes, but this build ships no CSS for them — on the
 * original site JS Masonry positioned every card with inline styles, which is
 * why the rows never lined up. Masonry has been removed from these pages, so
 * the columns are laid out with flexbox here instead.
 *
 * Loaded only by the seven blog listing pages, so .generate-columns-container
 * is safe to target unscoped.
 */

.generate-columns-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* the heading and the pagination are full-width rows, not columns */
.generate-columns-container > .page-header,
.generate-columns-container > .paging-navigation {
  width: 100%;
}

.generate-columns-container > .generate-columns {
  width: 33.3333%;
}

/* stretch the painted card box to the row height so rows read as even */
.generate-columns-container > .generate-columns > .inside-article {
  height: 100%;
}

/* card internals: image, then a small category line, then a small title */
.generate-columns-container .post-image {
  margin-bottom: 0;
}

/*
 * Thumbnails are normalised to 16:9 and cropped to fill.
 *
 * The source images are the original WordPress uploads and their aspect ratios
 * vary a lot (1600x900, 1024x681, 1248x841, 1024x810, 512x341). Left at their
 * natural ratios the image heights differ within a row, which pushes the
 * category line and title of each card to a different height - the live site
 * has exactly this problem from its second row down. Fixing the ratio makes
 * every card identical in structure so the text lines up across the row.
 */
.generate-columns-container .post-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.generate-columns-container .taxonomy-category {
  box-sizing: border-box;
  padding-top: 1.2em;
}

.generate-columns-container .taxonomy-category .wp-block-post-terms__separator {
  white-space: pre-wrap;
}

@media (max-width: 1024px) {
  .generate-columns-container > .tablet-grid-50 {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .generate-columns-container > .mobile-grid-100 {
    width: 100%;
  }
}