/* ------------------------------------------------------------------ *
 * Post grid cards — Query Loop blocks (homepage sections, archives,
 * related posts) + Kadence's "Similar Posts" carousel. White card with
 * square cover image flush to top, hidden category terms, bold title.
 * ------------------------------------------------------------------ */

/* Query Loop post grids: render 2 columns on phones instead of core's 1-column
   default below 600px. Targets the homepage "Latest Patterns" and "Free Pattern
   Library" sections, which were stacking 8 and 4 full-width cards.
   `!important` is required: core block layout injects per-block inline
   <style> rules keyed on `wp-container-core-post-template-is-layout-<hash>`,
   which beats unscoped class selectors. */
@media (max-width: 600px) {
	.entry-content .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 0.75em !important;
	}
}

/* Query Loop card style: white card, square cover image flush to top,
   hidden category terms, bold title with padding. Applies globally to any
   Query Loop on the site (homepage sections, archives, related posts). */
.wp-block-post-template > .wp-block-post {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
}

.wp-block-post-template > .wp-block-post > * {
	margin: 0;
}

.wp-block-post-template > .wp-block-post .wp-block-post-featured-image {
	line-height: 0;
	aspect-ratio: 4 / 5 !important;
	overflow: hidden;
}

.wp-block-post-template > .wp-block-post .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.wp-block-post-template > .wp-block-post .wp-block-post-terms {
	display: none;
}

.wp-block-post-template > .wp-block-post .wp-block-post-title {
	padding: 1rem 1.25rem 1.5rem;
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.25;
}

.wp-block-post-template > .wp-block-post .wp-block-post-title a {
	color: var(--global-palette1);
	text-decoration: none;
}

.wp-block-post-template > .wp-block-post .wp-block-post-title a:hover {
	color: var(--global-palette2);
	text-decoration: underline;
}

/* Kadence "Similar Posts" carousel cards (entry-related-carousel) use a
   different markup tree from Query Loop blocks, so the rules above don't
   apply. Match the same visual language so cards feel consistent across
   the homepage, archives, and the bottom of every single post. */
.entry-related-carousel .loop-entry {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.entry-related-carousel .loop-entry .post-thumbnail {
	margin: 0;
	aspect-ratio: 4 / 5 !important;
	overflow: hidden;
}

.entry-related-carousel .loop-entry .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.entry-related-carousel .loop-entry .entry-content-wrap {
	padding: 1rem 1.25rem 1.5rem !important;
}

.entry-related-carousel .loop-entry .entry-meta,
.entry-related-carousel .loop-entry .entry-taxonomies,
.entry-related-carousel .loop-entry .entry-footer,
.entry-related-carousel .loop-entry .read-more,
.entry-related-carousel .loop-entry .more-link {
	display: none;
}

.entry-related-carousel .loop-entry .entry-title {
	font-size: 1.125rem;
	line-height: 1.25;
	margin: 0;
}

.entry-related-carousel .loop-entry .entry-title a {
	color: var(--global-palette1);
	text-decoration: none;
}

.entry-related-carousel .loop-entry .entry-title a:hover {
	color: var(--global-palette2);
	text-decoration: underline;
}
