/**********************************************************
// Block >> Home >> Featured Posts
// NOTES >> This file is intentionally minimal. It only sets
// up the grid mechanics (columns + gap) so the block works
// out of the box. Visual styling (colors, spacing, fonts,
// hover states, etc.) should be added per-site via a code
// snippet hooked to wp_head, targeting the classes below:
//
//   .Block-Home-Featured-Posts
//   .Block-Home-Featured-Posts-Grid
//
// Column counts are controlled from the block's ACF fields
// and exposed as CSS custom properties on the grid element:
//
//   --Cols-Desktop
//   --Cols-Mobile
//
// A snippet can override the breakpoint or column math
// entirely by redeclaring grid-template-columns on
// .Block-Home-Featured-Posts-Grid (and inside the same
// media query below, if a different breakpoint is desired).
**********************************************************/
.Block-Home-Featured-Posts {
	padding: 50px 20px 60px 20px;
	text-align: center;
	}



.Block-Home-Featured-Posts-Grid {
	margin: 2px auto 0 auto;
	width: 100%;
	max-width: 1280px;
	display: grid;
	grid-template-columns: repeat( var( --Cols-Mobile, 2 ), 1fr );
	gap: 30px 20px;
	text-align: left;
	}

.Block-Home-Featured-Posts-Grid .Excerpt-SM {
	margin: 0;
	width: 100%;
	max-width: none;
	}

/**********************************************************
// Excerpt-SM-Thumb normally has a fixed 250px height, which
// only reads as portrait because its usual home (Home-Cats)
// keeps it in a narrow column. Here the column width varies
// with the chosen column count, so pin a fixed ratio instead
// of a fixed height to keep crops consistent. Override this
// ratio via a code snippet if a site wants a different crop.
**********************************************************/
.Block-Home-Featured-Posts-Grid .Excerpt-SM-Thumb {
	height: auto;
	aspect-ratio: 2 / 3;
	}

.Block-Home-Featured-Posts-Grid .Excerpt-SM-Thumb:after {
	content: none;
	display: none;
	}

/**********************************************************
// Media Queries
**********************************************************/
@media
all and (min-width: 769px)
{
	.Block-Home-Featured-Posts-Grid {
		grid-template-columns: repeat( var( --Cols-Desktop, 4 ), 1fr );
		}
}

@media
all and (max-width: 768px),
all and (max-device-width: 768px)
{
	.Block-Home-Featured-Posts { padding: 30px 20px; }
}