/* =============================================================================
   BLOG ARCHIVE (/blog/) -- ported from the live site.
   Layout base in sidebar-layout.css.
   ============================================================================= */

.blog-archive {
	padding-top: var(--section-y-md);
	padding-bottom: var(--section-y);
}

.blog-archive .sidebar-layout__main {
	flex:                  1 0 0;
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-row-gap:          var(--space-xl);
	grid-column-gap:       25px;
}

/* Category archives (category.php) carry a visible heading above the cards;
   it spans every column of the card grid. */
.blog-archive__header {
	grid-column: 1 / -1;
}

.blog-archive__header h1 {
	margin-bottom: var(--space-xs);
}

.blog-archive__description {
	max-width: 800px;
	color:     var(--color-text-secondary);
}

/* Live relied on Oxygen's flex column link; declared explicitly here, and
   the no-underline hover keeps the excerpt clean (only the h2 underlines). */
.blog-archive__post a {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	text-align:     left;
	color:          var(--color-text-primary);
}

.blog-archive__post a:hover {
	text-decoration: none;
}

.blog-archive__post a:hover img {
	box-shadow: var(--shadow-card);
}

.blog-archive__post a:hover h2 {
	text-decoration: underline;
}

.blog-archive__post img {
	margin-bottom: var(--space-m);
	border:        1px solid var(--color-border-subtle);
	border-radius: var(--radius-m);
	transition:    box-shadow var(--duration-fast) ease;
}

.blog-archive__post h2 {
	font-size: var(--text-h5);
	margin-bottom: var(--space-2xs);
}

.blog-archive__post-excerpt {
	line-height: var(--leading-slim);
}