/* Equal-height, evenly-flowing cards on the Blog Archive page (blog.html).
   Scoped to .blog-grid only, so it can't affect the two-column layout
   used on individual post pages. */

.blog-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; /* every card in a row stretches to the tallest one */
	row-gap: 30px; /* vertical space between rows only; horizontal gutters are untouched */
}

/* Foundation's float/width rules on .columns still set each card's width;
   flex just takes over the box layout, so floats no longer cause the
   uneven "staircase" rows. */
.blog-grid > .columns {
	display: flex;
}

.blog-grid .boxblog {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

/* Push the "Continue reading / Watch Now" button to the bottom of every
   card, regardless of how long the title or teaser text runs. */
.blog-grid .boxblog > p:last-child {
	margin-top: auto;
	padding-top: 10px;
}

/* Keep thumbnails a consistent size so text doesn't wrap unpredictably
   around taller or shorter images. Adjust the height to taste. */
.blog-grid .boxblog .thumb {
	width: 100px;
	height: 75px;
	object-fit: cover;
}