/**
 * MSH CPT Posts Widget — Styles
 *
 * Scoped entirely to .msh-cpt-posts so these rules never bleed
 * into the theme's other blog widgets or the AJAX filter.
 *
 * @package subsidy-child
 */

/* =====================================================================
   Classic layout — image LEFT, content RIGHT (horizontal card)
   ===================================================================== */

.msh-cpt-posts.blog-style-classic .blog-inner--horizontal {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
}

/* Image column: fixed width, never shrinks */
.msh-cpt-posts.blog-style-classic .blog-inner--horizontal .post-thumb {
	flex: 0 0 220px;
	width: 220px;
}

.msh-cpt-posts.blog-style-classic .blog-inner--horizontal .post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Content column: fills remaining space */
.msh-cpt-posts.blog-style-classic .blog-inner--horizontal .post-details-outer {
	flex: 1 1 auto;
	min-width: 0; /* prevents long titles from breaking flex layout */
}

/* =====================================================================
   List layout — full-width stacked cards (untouched, just scoped here
   so all widget CSS lives in one place)
   ===================================================================== */

.msh-cpt-posts.blog-style-list .blog-inner {
	display: block;
}

/* =====================================================================
   Responsive — stack image above content on smaller screens
   ===================================================================== */

@media ( max-width: 767px ) {
	.msh-cpt-posts.blog-style-classic .blog-inner--horizontal {
		flex-direction: column;
	}

	.msh-cpt-posts.blog-style-classic .blog-inner--horizontal .post-thumb {
		flex: 0 0 auto;
		width: 100%;
	}
}