/* =============================================================================
   08-blogs.css
   Blog cards and blog list headers - the card grid used by the homepage
   ("Latest blogs"), the Advice & Resources page ("Explore all blogs") and
   anywhere else a list of posts is rendered.

   Owns the COMPONENTS (.blog_cards, .blog_card, .blogs_head and their
   responsive rules). The page sections that wrap them (#home_blogs,
   #all_blogs_section) keep their padding in their own page files, so a page
   can space the list differently without touching the card styling.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
	 
	 
	 
	 

/* --- The card grid --------------------------------------------------------
   Knobs a page can set on its own SECTION, no override selectors needed:
     --blog_cols          columns at desktop width          (default 3)
     --blog_thumb_ratio   image aspect-ratio                (default 3 / 2)
     --blog_body_pad      padding inside the card body      (default 22px 24px 26px)
     --blog_text_lines    excerpt lines before it truncates (default 4)
     --read_more_colour   colour of the "Read more" link    (default: inherits)

   Every one of these is READ with var(), never DECLARED on .blog_cards.

   That is deliberate: a value DECLARED on an element always beats one it
   would have INHERITED, whatever the specificity of the rule it came from.
   So `.blog_cards { --blog_cols: 3 }` here would silently kill
   `#home_blogs { --blog_cols: 4 }`. Defaults go in the var() fallback.

   The media queries at the bottom of this file do declare on .blog_cards,
   and that is the point - the responsive steps are meant to override a
   page's desktop setting. */
.blog_cards {
	display: grid;
	grid-template-columns: repeat(var(--blog_cols, 3), 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: #fff;
	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 {
	background-color: var(--js-beige);
	aspect-ratio: var(--blog_thumb_ratio, 3 / 2);
	overflow: hidden;
}
.blog_thumb img {
	object-position: 50% 35%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.blog_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--blog_body_pad, 22px 24px 26px);
}
.blog_date {
	font-family: "effraregular";
	font-size: 11pt;
	color: var(--js-grey);
}
.blog_body h3 {
	font-family: "effrabold";
	font-size: clamp(0.8rem, 0.8rem + 1.3vw, 1.5rem);
	line-height: 1;
	color: var(--js-grey);
	margin: 8px 0 8px;
}

.blog_body p.blog_text {
	font-size: 13pt;
	line-height: 18pt;
	color: var(--js-grey);
	margin: 0;

	/* Cap the excerpt so a long post cannot stretch the whole row. The row
	   is as tall as its tallest card, so this is what actually controls
	   height once the columns get narrow. */
	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 lives in 17-buttons.css. To restyle it here, use a compound
   selector: `.blog_card .read_more { ... }` - it wins on specificity. */


/* --- Blog list header (heading + "See all posts") ------------------------ */
.blogs_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 35px;
}

.blogs_head .blogs_all {
	font-size: 13pt;
	line-height: 18pt;
	padding: 10px 18px;
	margin-bottom: 0;
	white-space: nowrap;
}


/* --- Blog responsive ------------------------------------------------------
   Moved here from 11-homepage.css so the card grid stays in one file. These
   sit AFTER the base rules above, so they still win at equal specificity -
   that is the only reason the move is safe. */
@media only screen and (max-width: 900px) {
	.blog_cards {
		--blog_cols: 2;
	}
}

/* @media only screen and (max-width: 850px) {
	.blogs_head {
		flex-direction: column;
		align-items: flex-start;
	}
} */

@media only screen and (max-width: 650px) {
	.blog_cards {
		--blog_cols: 1;
		gap: 18px;
	}
}