/* =============================================================================
  07-blogs.css — the post card grid
  Used by the homepage ("Latest blogs"), Advice & Resources ("Explore all blogs") 
  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)

  A value DECLARED on an element always beats an inherited value.
  The media queries at the bottom DO declare on .blog_cards 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;
	}
}

/* =============================================================================
  blog-post — single.php
  The post header, the post + sidebar layout, and the typography inside the_content().
  Everything in the body section is scoped to .post_content, the wrapper single.php puts around the_content(). 
  KEEP IN SYNC WITH css/admin/editor-style.css, which gives the editor's Visual tab the same scale so staff see what they will publish.
  ============================================================================= */


#blog_post {
	padding-top: 1.875rem;
}

/* --- Post header ----------------------------------------------------------
  The title is still the page's h1, but a blog title sits on white in a text
  column rather than over a banner, so it gets a smaller ceiling than the
  site-wide h1.
   -------------------------------------------------------------------------- */
.post_header {
	max-width: 820px;
	margin-bottom: 2rem;
}

.post_header h1 {
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
	line-height: 1.1;
	margin-bottom: 0.875rem;
}

/* Date and author. Marked up as a <p>, not a heading — it is metadata, and a
   heading would have screen readers announce it as a section of the page. */
.post_meta {
	font-family: var(--js-font);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--js-grey);
	margin: 0;
}

.post_meta_sep {
	padding: 0 0.5rem;
	color: var(--js-grey-tint);
}

.post_author {
	font-family: var(--js-font-bold);
}

/* =============================================================================
  THE POST + SIDEBAR LAYOUT
  minmax(0, 820px) rather than plain 820px: a bare 820px track still refuses
  to shrink below the widest thing inside it, so one long URL or a wide table
  would push the sidebar off the page.
   ============================================================================= */
.post_layout {
	display: grid;
	grid-template-columns: minmax(0, 820px) minmax(260px, 1fr);
	gap: 3rem;
	align-items: start;
}

/* The two overflow-x lines are both needed: `clip` is what allows sticky to
  keep working inside, and `hidden` is the fallback for Safari before 16,
  which ignores the line it does not understand. overflow-y is spelled out
  because the shorthand would set both axes. */
body.single-post main {
	overflow-x: hidden;
	overflow-x: clip;
	overflow-y: visible;
}

.post_aside {
	position: sticky;
	top: 4rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
	margin: 0 0 2rem;
}

.post_aside_heading {
	font-family: var(--js-font-bold);
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--js-beige-tint);
}

/* =============================================================================
  THE POST BODY
  Same clamp() idiom as 02-base.css. Each level is comfortably smaller than
  the one above and comfortably larger than body text, so the structure of a
  post is readable at a glance: roughly 32 / 25 / 20px against 17px body.
  The generous margin-top with a smaller margin-bottom is deliberate — a
  heading should sit closer to the text it introduces than to the text it
  follows, which is what tells a reader where one section ends.
   ============================================================================= */
.post_content {
	/* No max-width: .post_layout's grid column sets the measure, and a
	   max-width on top of it would fight it at in-between widths. */
	min-width: 0;
	font-family: var(--js-font);
	color: var(--js-black);
}

/* Long-form text wants more line-height than the site-wide 1.3. */
.post_content p {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0 0 1.1em;
}

.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.post_content h6 {
	font-family: var(--js-font-bold);
	color: var(--js-black);
}

/* An h1 inside the content duplicates the page title as far as search engines
   and screen readers are concerned — staff should start at Heading 2. It is
   styled as an h2 so that picking Heading 1 out of habit does not break the
   page. */
.post_content h1,
.post_content h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	line-height: 1.2;
	margin: 2em 0 0.5em;
}

.post_content h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
	line-height: 1.25;
	margin: 1.8em 0 0.45em;
}

.post_content h4 {
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	line-height: 1.3;
	margin: 1.6em 0 0.4em;
}

.post_content h5 {
	font-size: 1.0625rem;
	line-height: 1.35;
	margin: 1.5em 0 0.4em;
}

/* h6 is the smallest level, so it earns its emphasis from letter-spacing and
  colour rather than size — at body size and plain it would not read as a
  heading at all. */
.post_content h6 {
	font-size: 0.9375rem;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--js-grey);
	margin: 1.5em 0 0.4em;
}

/* The first heading in a post should not push a gap below the header. */
.post_content > :first-child {
	margin-top: 0;
}

/* Note: the em margins above are intentional — 2em means "twice THIS
  heading's own size", so the space above a heading scales with it. rem would
  give every level the same gap. */

/* --- Lists, quotes, images, links and tables ------------------------------ */
.post_content ul,
.post_content ol {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

.post_content li {
	margin-bottom: 0.5em;
}

.post_content li > ul,
.post_content li > ol {
	margin: 0.5em 0 0;
}

/* Effra has no true bold weight file, so "bold" is a separate family. */
.post_content strong,
.post_content b {
	font-family: var(--js-font-bold);
	font-weight: 400;
}

.post_content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--js-blue);
	background: none;
}

.post_content blockquote p {
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--js-grey);
}

.post_content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* --js-blue is only ~2.6:1 on white, under the 4.5:1 WCAG AA asks of body
   text, so links use the darkened ink. See 01-variables.css. */
.post_content a {
	color: var(--js-blue-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.post_content a:hover,
.post_content a:focus-visible {
	text-decoration-thickness: 2px;
}

.post_content hr {
	border: none;
	border-top: 1px solid var(--js-grey-tint);
	margin: 2.4em 0;
}

/* A table pasted in from elsewhere should at least not overflow the column. */
.post_content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 1rem;
}

.post_content th,
.post_content td {
	border: 1px solid var(--js-grey-tint);
	padding: 8px 10px;
	text-align: left;
}

.post_content th {
	background-color: var(--js-beige);
	font-family: var(--js-font-bold);
}

/* WordPress's own caption and alignment classes. The editor adds these when
   staff insert an image; without styling here they do nothing. */
.post_content .wp-caption {
	max-width: 100%;
	margin-bottom: 1.4em;
}

.post_content .wp-caption-text {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--js-grey);
	margin-top: 6px;
}

.post_content .alignleft {
	float: left;
	margin: 0.3em 1.4em 1em 0;
}

.post_content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.4em;
}

.post_content .aligncenter {
	display: block;
	margin: 0 auto 1.4em;
}

/* =============================================================================
   RELATED BLOG CARDS (sidebar)
   A compact horizontal card — thumbnail left, text right — rather than the
   .blog_card grid used on the homepage. A card built for four-across looks
   lost in a 330px column.
   ============================================================================= */
.related_blogs {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.related_blog {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 0.875rem;
	align-items: center;
	padding: 0.625rem;
	border: 1px solid #e4e0d9;
	border-radius: 10px;
	background-color: var(--js-white);
	text-decoration: none;
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.related_blog:hover,
.related_blog:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.related_blog_thumb {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--js-beige);
}

.related_blog_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.related_blog_body {
	display: block;
	min-width: 0;
}

.related_blog_date {
	display: block;
	font-family: var(--js-font);
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--js-grey);
	margin-bottom: 4px;
}

.related_blog_title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-family: var(--js-font-bold);
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--js-grey);
}

/* --- Resource rows in the sidebar ----------------------------------------
   .resource_list / .resource_item / .resource_link are defined in
   15-advice-resources.css as plain class selectors, so the sidebar reuses
   them as they are. Only the narrower column needs adjusting, and this file
   loads later so these win without !important.
   -------------------------------------------------------------------------- */
.post_aside .resource_link {
	padding: 0.75rem 0.875rem;
}

.post_aside .resource_label {
	font-size: 0.9375rem;
	line-height: 1.35;
}

/* ============================================================================= */

/* One column at the theme's desktop-to-tablet step. A sidebar narrower than
   about 260px stops being readable, and stacking puts the related content at
   the end of the post — where someone who has finished reading is looking. */
@media (max-width: 1000px) {
	.post_layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.post_aside {
		/* Stacked, a sticky sidebar would pin itself to the top of the screen
		   and let the post scroll past underneath it. */
		position: static;
		max-width: 820px;
		padding-top: 2rem;
		border-top: 1px solid var(--js-grey-tint);
	}
}

@media (max-width: 750px) {
	.post_header {
		margin-bottom: 1.5rem;
	}

	/* A floated image in a single-column phone layout leaves an unreadable
	   sliver of text beside it. */
	.post_content .alignleft,
	.post_content .alignright {
		float: none;
		display: block;
		margin: 0 auto 1.4em;
	}
}