/**
 * Custom Blog Widget & Blog Archive Page - Equal Height Blog Cards Override
 *
 * Ensures that all blog posts in both the homepage carousel and the main blog grid
 * have identical heights, even with varying title lengths or category counts.
 * Pushes the "Continue reading" link to the bottom of the card.
 */

/* ==========================================================================
   1. Carousel Specific Rules
   ========================================================================== */

/* Make the flex container stretch items to match heights */
.wd-blog-element .wd-carousel-wrap {
	align-items: stretch !important;
}

/* Stretch the carousel item/slide wrapper */
.wd-blog-element .wd-carousel-item {
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
}

/* ==========================================================================
   2. Shared Card Stretching Rules (Carousel & Grid)
   ========================================================================== */

/* Stretch the main article wrapper */
.wd-blog-element .wd-carousel-item > article.wd-post,
.wd-posts.wd-blog-holder article.wd-post {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
}

/* Stretch the inner content container */
.wd-blog-element .wd-carousel-item > article.wd-post .wd-post-inner,
.wd-posts.wd-blog-holder article.wd-post .wd-post-inner {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
}

/* Make the content section a flexbox and expand to fill space */
.wd-blog-element .wd-carousel-item > article.wd-post .wd-post-content,
.wd-posts.wd-blog-holder article.wd-post .wd-post-content {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
}

/* Push the read more link to the absolute bottom of the card */
.wd-blog-element .wd-carousel-item > article.wd-post .wd-post-read-more,
.wd-posts.wd-blog-holder article.wd-post .wd-post-read-more {
	margin-top: auto !important;
	padding-top: 15px !important;
}