/* Space Above/Below — Spacing Scale step from Design Tokens (--dp-space-above/
   --dp-space-below, set inline on the block only when a step is chosen);
   falls back to the theme's default responsive clamp otherwise, same
   convention as Display Grid's Space Above/Below (group_display_grid_block.json). */
.block.displayPosts
{
	padding-top:    var(--dp-space-above, clamp(40px, 6vw, 100px));
	padding-bottom: var(--dp-space-below, clamp(40px, 6vw, 100px));
}

/* ── Header ────────────────────────────────────────────────── */

.block.displayPosts .dp-header
{
	text-align:    center;
	max-width:     42rem;
	margin-left:   auto;
	margin-right:  auto;
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

/* Type Role — always applies, whether or not a role is chosen on the
   block: --dp-title-* only exists when a role is picked (set inline via
   shew_type_role_css_vars()), so with no role picked every var() here
   falls through to the sitewide Default Type Role (--text-role-default-*)
   instead of the theme's hardcoded H2 tokens — this block's baseline is
   "Default", not H2. Needs the #SD ID prefix to out-specificity the
   sitewide "#SD H2 { font-size: var(--h2Size); }" rule in SDstandards.css
   — a bare class selector loses to that ID selector regardless of the
   var() chain. */
#SD .block.displayPosts .dp-title
{
	margin-top:     0;
	margin-bottom:  0;
	font-family:    var(--dp-title-family, var(--text-role-default-family, inherit));
	font-weight:    var(--dp-title-weight, var(--text-role-default-weight, inherit));
	font-style:     var(--dp-title-style, var(--text-role-default-style, normal));
	font-size:      var(--dp-title-size, var(--text-role-default-size, inherit));
	line-height:    var(--dp-title-line-height, var(--text-role-default-line-height, normal));
	letter-spacing: var(--dp-title-letter-spacing, var(--text-role-default-letter-spacing, normal));
	text-transform: var(--dp-title-text-transform, var(--text-role-default-text-transform, none));
	color:          var(--dp-title-color, var(--text-role-default-color, inherit));
}

#SD .block.displayPosts .dp-subhead
{
	margin-top:     0.75rem;
	margin-bottom:  0;
	font-family:    var(--dp-subhead-family, var(--text-role-default-family, inherit));
	font-weight:    var(--dp-subhead-weight, var(--text-role-default-weight, inherit));
	font-style:     var(--dp-subhead-style, var(--text-role-default-style, normal));
	font-size:      var(--dp-subhead-size, var(--text-role-default-size, inherit));
	line-height:    var(--dp-subhead-line-height, var(--text-role-default-line-height, normal));
	letter-spacing: var(--dp-subhead-letter-spacing, var(--text-role-default-letter-spacing, normal));
	text-transform: var(--dp-subhead-text-transform, var(--text-role-default-text-transform, none));
	color:          var(--dp-subhead-color, var(--text-role-default-color, inherit));
}

.block.displayPosts .posts
{
	display: grid;
	grid-template-columns: repeat(calc(var(--dp-cols-d, 3) * 2), 1fr);
	grid-gap: calc(var(--defaultInterval)*1);
	padding-right: calc(var(--defaultInterval)*1);
	margin-top: calc(var(--defaultInterval)*1);
	margin-bottom: calc(var(--defaultInterval)*1);
}
@media (max-width: 1024px) and (min-width: 601px)
{
	.block.displayPosts .posts
	{
		grid-template-columns: repeat(calc(var(--dp-cols-t, 2) * 2), 1fr);
	}
}
@media (max-width: 600px)
{
	.block.displayPosts .posts
	{
		grid-template-columns: repeat(calc(var(--dp-cols-m, 1) * 2), 1fr);
	}
}
.block.displayPosts .posts > a
{
	grid-column: span 2;
}
.block.displayPosts .posts .post
{
	margin-bottom: calc(var(--defaultInterval)*.5);
}

/* Center a trailing incomplete row without affecting full rows above it.
   Each <a> spans 2 of (cols*2) tracks, so a full row fills every track
   exactly as a plain N-column grid would. When the last row is short,
   nudge the leftover item(s) inward by half a track-pair so they land
   centered instead of flush left. Covers the desktop (3-col) and tablet
   (2-col) defaults used across this site's displayPosts blocks. */
.block.displayPosts .posts:has(> a:nth-child(3n+1):last-child) > a:last-child
{
	grid-column: 3 / span 2;
}
.block.displayPosts .posts:has(> a:nth-child(3n+2):last-child) > a:nth-last-child(2)
{
	grid-column: 2 / span 2;
}
@media (max-width: 1024px) and (min-width: 601px)
{
	.block.displayPosts .posts:has(> a:nth-child(2n+1):last-child) > a:last-child
	{
		grid-column: 2 / span 2;
	}
}
.block.displayPosts .featuredImage.wrapper
{
	position: relative;
	height: clamp(100px, 10vw, 200px);
	text-shadow: 0 0;
	margin-bottom: calc(var(--defaultInterval)*.5);
	overflow: hidden;
	background: var(--colorLightGrey, #eee);
}
.block.displayPosts .post .title
{
	line-height: 1.2;
}
.block.displayPosts .featuredImage .image
{
	height: 100%;
	background-position: center;
	background-size: cover;
	position: absolute;
	width: 100%;
	transition: var(--defaultTransition);
}
.block.displayPosts .featuredImage.hasLottie .dpLottie
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.block.displayPosts a:hover .wrapper .image
{
	transform: scale(1.2);
}
.block.displayPosts .post .meta
{
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--defaultInterval)*.25);
	font-size: .85em;
	opacity: .7;
	margin-top: calc(var(--defaultInterval)*.25);
}
.block.displayPosts .post .meta span:not(:last-child)::after
{
	content: "\2022";
	margin-left: calc(var(--defaultInterval)*.25);
}