/* Blog listing (home.php, static Posts page) + category/tag/date/author
   archives (archive.php) — same wide-width, single-column visual system as
   search.php (image is full-width on mobile, half-width on desktop — see
   the min-width:1000px rule below). Title/excerpt/"more" button/category+
   tags meta come from GeneratePress's own content.php loop, untouched here. */

.post-list-wrap
{
	max-width: var(--wideWidth);
	margin-left: auto;
	margin-right: auto;
}

/* Beats the legacy #SD.archive .posts { max-width:var(--maxWidth); }
   rule in assets/css/global/components/hero.css (still relied on for
   .entry-header margin resets) — one extra class in the selector chain
   out-specificities it without touching that file. */
#SD.archive .post-list-wrap .posts,
#SD.blog .post-list-wrap
{
	max-width: var(--wideWidth);
}

.post-list-wrap article
{
	margin-bottom: calc(var(--defaultInterval) * 2);
}

/* First-page-only intro content (home.php's .blog-archive-intro,
   archive.php's .author-archive-intro) — both just the "Posts page"/author
   profile's own entry-content with no spacing rule of its own, so it sat
   flush against .post-list-wrap's first card below it. Matches the same
   gap .page-header already uses below the plain-text title
   (margin-bottom: var(--defaultInterval) above) so the spacing reads the
   same whether the intro or the plain title is what's above the grid. */
#SD .blog-archive-intro,
#SD .author-archive-intro,
#SD .taxonomy-archive-intro
{
	margin-bottom: calc(var(--defaultInterval) * 2);
}

/* Featured image renders at the 'full' registered size with no width cap
   (GeneratePress's generate_post_image(), .post-image > a > img) — this is
   what was blowing the layout out edge-to-edge. */
.post-list-wrap .post-image img
{
	width: 100%;
	height: auto;
	display: block;
}

/* Container for the hover-zoom effect below — clips the scaled-up img so
   it doesn't spill past the image's own edges. */
.post-list-wrap .post-image
{
	overflow: hidden;
}

.post-list-wrap .post-image img
{
	transition: transform .35s ease;
}

/* Matches the hero image hover-zoom on the home page (displayGrid.css,
   .dg-item--linked:hover .dg-img) — same scale amount and timing. */
.post-list-wrap .post-image a:hover img
{
	transform: scale(1.06);
}

/* Desktop only — half the width of the previous full-width image, left
   aligned above the title/excerpt (mobile stays full-width). */
@media only screen and (min-width: 1000px)
{
	.post-list-wrap .post-image img
	{
		width: 50%;
	}
}

.post-list-wrap .entry-header
{
	margin-top: 0;
}

/* Blog listing (/posts/) + category/tag/date/author archive page titles —
   both now render identical markup (<header class="page-header"><h1
   class="page-title">, same as search.php) so they share this rule and
   inherit the exact same font/size from the sitewide bare "#SD H1" rule
   (var(--h1Size)) — no per-template font-size override needed. Before this,
   archive.php emitted H2.title sized off the unrelated --titleSizeSmall
   variable, which is why the two titles didn't match.
   GeneratePress's own .page-header wrapper has no top margin by default,
   so without this the title sits flush under the logo (mobile: risks
   overlapping it) — same margin-top formula as search.css's
   .search-results-header. */
#SD.blog .page-header,
#SD.archive .page-header
{
	max-width: var(--wideWidth);
	margin-top: clamp(calc(var(--defaultInterval) * 1), 12vw, 100px);
	margin-bottom: var(--defaultInterval);
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

@media only screen and (max-width: 999px)
{
	#SD.blog .page-header,
	#SD.archive .page-header
	{
		margin-top: max(clamp(calc(var(--defaultInterval) * 1), 12vw, 100px), var(--breadcrumb-mobile-clearance));
	}
}

/* Pagination ("Older posts" / numbered links) renders as a sibling after
   .post-list-wrap, outside it — so it doesn't inherit the wrap's centered
   max-width. Match it here so the "1 2 3 Next" row lines up with the
   content's left edge instead of GP's default full-width padding. */
#SD.blog .paging-navigation,
#SD.archive .paging-navigation
{
	max-width: var(--wideWidth);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Individual post titles within the listing (H2.entry-title, one per
   article — e.g. "telling your color story") — a different element from
   the page title above. Reads from Design Tokens → Post List → "Post
   Title — Type Role" (inc/post-list-tokens.php), which defaults to
   Portfolio Cards → Default → Title Type Role so these match search
   result card titles (.wpg-card-name) without any extra setup. Fallback
   values on the right of each var() reproduce today's plain "#SD H2"
   sitewide look exactly, so nothing shifts until a role is actually
   configured. #SD prefix needed — a bare ".post-list-wrap .entry-title"
   (2 classes) loses to the sitewide "#SD H2" id-scoped rule. */
#SD .post-list-wrap .entry-title,
#SD .post-list-wrap .entry-title a
{
	font-family: var(--post-list-title-family, inherit);
	font-weight: var(--post-list-title-weight, bold);
	font-size: var(--post-list-title-size, var(--h2Size));
	line-height: var(--post-list-title-line-height, 1);
	letter-spacing: var(--post-list-title-letter-spacing, normal);
	text-transform: var(--post-list-title-text-transform, none);
	color: var(--post-list-title-color, var(--colA));
	text-decoration: none;
}

/* Hover state — blue title turns orange on hover (site color library:
   --colA blue, --colC orange). Only the linked title, not the bare H2 on
   single post templates that might reuse this same rule elsewhere. */
#SD .post-list-wrap .entry-title a:hover
{
	color: var(--colC);
}