/* =============================================================================
   07-blog-cards.css — the post card grid
   Used by the homepage ("Latest blogs"), Advice & Resources ("Explore all
   blogs") and anywhere else a list of posts is rendered.

   A section tunes the grid by setting these on ITSELF, not on .blog_cards:
     --blog_cols         columns at desktop width        (default 4)
     --blog_thumb_ratio  thumbnail aspect-ratio          (default 3 / 2)
     --blog_body_pad     padding inside the card body    (default 22px 24px 26px)
     --blog_text_lines   excerpt lines before truncating (default 4)
     --read_more_colour  colour of the "Read more" link  (default: inherits)

   Why on the section: a value DECLARED on an element always beats one it would
   have INHERITED, whatever the specificity of the rule it came from. So a
   `.blog_cards { --blog_cols: 3 }` here would silently kill a page's
   `#home_blogs { --blog_cols: 4 }`. Defaults belong in the var() fallback.
   The media queries at the bottom DO declare on .blog_cards — that is the
   point, the responsive steps are meant to beat a page's desktop setting.
   ============================================================================= */

.blog_cards {
	display: grid;
	grid-template-columns: repeat(var(--blog_cols, 4), minmax(0, 1fr));
	gap: 1rem;
}

.blog_card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e4e0d9;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	background-color: var(--js-white);
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.blog_card:hover,
.blog_card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
}

.blog_thumb {
	aspect-ratio: var(--blog_thumb_ratio, 3 / 2);
	overflow: hidden;
	background-color: var(--js-beige);
}

/* object-position 50% 35% crops towards the top of the image — faces and
   headlines survive the crop more often than the middle does. */
.blog_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.blog_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--blog_body_pad, 22px 24px 26px);
}

.blog_date {
	font-family: var(--js-font);
	font-size: 0.9375rem;
	color: var(--js-grey);
}

.blog_body h3 {
	font-size: clamp(0.8rem, 0.8rem + 1.3vw, 1.5rem);
	line-height: 1;
	color: var(--js-grey);
	margin: 0.5rem 0;
}

.blog_body p.blog_text {
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--js-grey);
	margin: 0;

	/* Cap the excerpt: a grid row is as tall as its tallest card, so without
	   this one long post stretches the whole row. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--blog_text_lines, 4);
	line-clamp: var(--blog_text_lines, 4);
	overflow: hidden;
}

/* .read_more is in 04-buttons.css. To restyle it just for a card, use a
   compound selector: `.blog_card .read_more { … }` wins on specificity. */

/* --- List header: heading on the left, "See all posts" on the right ------- */
.blogs_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: 2.1875rem;
}

.blogs_head .blogs_all {
	font-size: 1.125rem;
	line-height: 1.4;
	padding: 0.625rem 1.125rem;
	margin-bottom: 0;
	white-space: nowrap;
}

/* =============================================================================
   RESPONSIVE
   The card grid steps down on its own ladder (900 / 600 / 400px) rather than
   the theme's 1000 / 750 / 500. Column count is driven by how narrow a CARD
   gets, not by device class, and four cards are still readable at 900px.
   ============================================================================= */

@media (max-width: 900px) {
	.blog_cards {
		--blog_cols: 3;
	}
}

@media (max-width: 600px) {
	.blog_cards {
		--blog_cols: 2;
		gap: 1.125rem;
	}

	.blogs_head {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 400px) {
	.blog_cards {
		--blog_cols: 1;
	}
}