/**
 * Blog listing redesign — Gardenar-style two column card grid.
 *
 * SCOPED under `#blog-main.blog-v2` so it only affects the blog listing and
 * never leaks to the other pages that share the older `.blog-main-right`
 * sidebar classes. Purely presentational: the cards are built from the fields
 * the view already provides (image, date, title, body, link) and the sidebar
 * still renders the one Recent Posts block it always did.
 */
#blog-main.blog-v2 {
	--bv2-red: var(--primary_color);
	--bv2-red-soft: #faeeee;
	--bv2-ink: #181818;
	--bv2-muted: #6b7280;
	--bv2-line: #eceef1;
	--bv2-soft: #f7f8fa;
}

/* -- The grid ---------------------------------------------------------- */

#blog-main.blog-v2 .bv2-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

/* -- The card ---------------------------------------------------------- */

#blog-main.blog-v2 .bv2-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bv2-line);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow .35s ease, transform .35s ease;
}

#blog-main.blog-v2 .bv2-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(18, 21, 26, .10);
}

/* The frame fixes the shape, the image fills it. Blog artwork arrives at
   whatever dimensions the author supplied, so object-fit is what stops a
   narrow or short upload leaving white gaps inside the card. */
#blog-main.blog-v2 .bv2-card-media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--bv2-soft);
}

#blog-main.blog-v2 .bv2-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .6s ease;
}

#blog-main.blog-v2 .bv2-card:hover .bv2-card-media img {
	transform: scale(1.06);
}

#blog-main.blog-v2 .bv2-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	padding: 26px 26px 28px;
}

/* -- Card meta, title, excerpt ----------------------------------------- */

#blog-main.blog-v2 .bv2-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--bv2-muted);
	margin-bottom: 12px;
}

#blog-main.blog-v2 .bv2-meta svg {
	width: 15px;
	height: 15px;
	flex: none;
	fill: var(--bv2-red);
	stroke: var(--bv2-red);
}

/* The global `h3, h3 *` rule capitalises every word and pins the size to 20px,
   which rewrites headlines like "The Importance of Scaffold Safety" into title
   case. Both the heading and the link Views nests inside it have to opt out. */
#blog-main.blog-v2 .bv2-card-title,
#blog-main.blog-v2 .bv2-card-title a {
	font-size: 21px;
	line-height: 30px;
	text-transform: none;
}

#blog-main.blog-v2 .bv2-card-title {
	margin-bottom: 12px;
}

/* Headlines are never clipped — a post's full title always shows, however many
   lines it needs. The cards in a row still finish level because the grid
   stretches them and the Read More button is pinned to the bottom. */
#blog-main.blog-v2 .bv2-card-title a {
	color: var(--bv2-ink);
	transition: color .3s ease;
}

#blog-main.blog-v2 .bv2-card:hover .bv2-card-title a,
#blog-main.blog-v2 .bv2-card-title a:hover {
	color: var(--bv2-red);
}

/* The view hands over the whole post body, so the excerpt is capped at three
   lines and ends in an ellipsis. overflow-wrap is the backstop for the pasted
   text: if a stray non-breaking run survives, it wraps instead of running off
   the side of the card. */
#blog-main.blog-v2 .bv2-card-text {
	font-size: 15px;
	line-height: 25px;
	color: var(--bv2-muted);
	margin-bottom: 22px;
	overflow-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -- Read more pill ---------------------------------------------------- */

/* margin-top:auto pins the button to the bottom of the card, so buttons line
   up across a row even when one post has a shorter title or excerpt. */
#blog-main.blog-v2 .bv2-more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--bv2-red-soft);
	color: var(--bv2-red);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	transition: background .3s ease, color .3s ease;
}

#blog-main.blog-v2 .bv2-more svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .3s ease;
}

#blog-main.blog-v2 .bv2-more:hover {
	background: var(--bv2-red);
	color: #fff;
}

#blog-main.blog-v2 .bv2-more:hover svg {
	transform: translateX(4px);
}

/* -- Sidebar ----------------------------------------------------------- */

/* Same one Recent Posts block as before, restyled into the reference's soft
   rounded panel. */
#blog-main.blog-v2 .blog-main-right {
	background: var(--bv2-soft);
	border: 1px solid var(--bv2-line);
	border-radius: 16px;
	padding: 28px 26px 30px;
}

#blog-main.blog-v2 .blog-main-right h5 {
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 34px;
}

#blog-main.blog-v2 .blog-main-right h5::before {
	bottom: -16px;
	border-bottom-color: var(--bv2-line);
}

#blog-main.blog-v2 .blog-main-right h5::after {
	bottom: -17px;
	width: 64px;
}

#blog-main.blog-v2 .posts {
	margin-top: 24px;
}

#blog-main.blog-v2 .blog-main-right-inner {
	align-items: flex-start;
	gap: 15px;
	flex-wrap: nowrap;
}

/* The original spacing was hung off :nth-last-of-type(2) and (3), which only
   ever worked for a list of exactly three posts — publish a fourth and the top
   one ends up jammed against the one below it. Space every item after the
   first instead, so the list stays even at any length. */
#blog-main.blog-v2 .blog-main-right-inner:nth-last-of-type(2),
#blog-main.blog-v2 .blog-main-right-inner:nth-last-of-type(3) {
	margin-bottom: 0;
}

#blog-main.blog-v2 .blog-main-right-inner + .blog-main-right-inner {
	margin-top: 24px;
}

#blog-main.blog-v2 .blog-main-right-image {
	margin-right: 0;
	flex: none;
}

#blog-main.blog-v2 .blog-main-right-image img {
	width: 86px;
	height: 86px;
	object-fit: cover;
	border-radius: 12px;
}

#blog-main.blog-v2 .blog-main-right-content {
	flex: 1 1 auto;
	min-width: 0;
}

#blog-main.blog-v2 .blog-main-right h4 a {
	font-size: 16px;
	line-height: 24px;
}

/* -- Pager ------------------------------------------------------------- */

#blog-main.blog-v2 .bv2-pager {
	margin-top: 40px;
}

#blog-main.blog-v2 .bv2-pager .pager__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#blog-main.blog-v2 .bv2-pager .pager__item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bv2-line);
	border-radius: 999px;
	color: var(--bv2-ink);
	font-size: 15px;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

#blog-main.blog-v2 .bv2-pager .pager__item a:hover,
#blog-main.blog-v2 .bv2-pager .pager__item.is-active a {
	background: var(--bv2-red);
	border-color: var(--bv2-red);
	color: #fff;
}

/* -- Responsive -------------------------------------------------------- */

@media all and (max-width: 1199px) {
	#blog-main.blog-v2 .bv2-grid {
		gap: 24px;
	}

	#blog-main.blog-v2 .bv2-card-body {
		padding: 22px 20px 24px;
	}

	#blog-main.blog-v2 .bv2-card-title {
		font-size: 19px;
		line-height: 27px;
	}
}

/* Sticky only from lg up, where the sidebar sits beside the posts. Below that
   it stacks underneath them and sticking it would just park the panel over the
   footer. The offset clears the sticky site header the same way
   .training-prov-sticky does; --wcsb-sticky-top is set in home-redesign.css. */
@media all and (min-width: 992px) {
	#blog-main.blog-v2 .blog-main-right {
		position: sticky;
		top: var(--wcsb-sticky-top, 159px);
		/* If Recent Posts ever outgrows the viewport, scroll inside the panel
		   rather than leaving its bottom permanently out of reach. */
		max-height: calc(100vh - var(--wcsb-sticky-top, 159px) - 20px);
		overflow-y: auto;
	}
}

@media all and (max-width: 991px) {
	#blog-main.blog-v2 .blog-main-right {
		margin-top: 50px;
	}
}

@media all and (max-width: 575px) {
	#blog-main.blog-v2 .bv2-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}