/**
 * Blog — posts index (home.php) and single post (single.php).
 *
 * Auto-enqueued by inc/assets.php on is_home() and is_singular( 'post' ).
 * Mobile-first; every value is a token. Shared vocabulary (.cc-section-head,
 * .cc-eyebrow, .cc-prose) comes from base/components; only blog-specific
 * rules live here, under cc-blog-* classes.
 *
 * @package CreativeCanvas
 */

/* ---------------------------------------------------------------------------
 * Index — text-led editorial list.
 * ------------------------------------------------------------------------ */

/* Page titles follow the base h1 — one step on every page (2026-09-23). */

.cc-blog-index__lead {
	font-size: var(--cc-text-base);
	color: var(--cc-color-muted);
	max-width: var(--cc-prose-max);
}

.cc-blog-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--cc-prose-max);
}

/* Each post an open frame, the block gap apart so no two hairlines meet
 * (2026-10-02; framed since owner 2026-10-15, bead spo). */
.cc-blog-list__item + .cc-blog-list__item {
	margin-block-start: var(--cc-block-gap);
}

.cc-blog-entry {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	padding: var(--cc-space-6);
	/* No fill, a hairline on all four sides, square corners, as the home
	 * page's framed blocks (owner 2026-10-15, bead spo; was Surface at 8px). */
	background-color: transparent;
	border: var(--cc-border);
	border-radius: 0;
}

.cc-blog-entry__meta {
	font-size: var(--cc-text-footnote);
	color: var(--cc-color-muted);
	line-height: var(--cc-leading-tight);
}

.cc-blog-entry__title {
	font-size: var(--cc-text-xxl);
	line-height: var(--cc-leading-snug);
}

/* Titles carry the hover-underline affordance (the list pattern used by nav
 * and footer links); the meta line beside them signals the entry is a link. */
.cc-blog-entry__title a {
	text-decoration: none;
}

.cc-blog-entry__title a:hover,
.cc-blog-entry__title a:focus-visible {
	color: var(--cc-color-ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cc-blog-entry__excerpt {
	font-size: var(--cc-text-small);
	line-height: var(--cc-leading-relaxed);
}

.cc-blog-index__empty {
	color: var(--cc-color-muted);
	max-width: var(--cc-prose-max);
}

/* ---------------------------------------------------------------------------
 * Pagination — WordPress core markup (the_posts_pagination), styled to the
 * token contract: no fills except the current page's ink reverse.
 * ------------------------------------------------------------------------ */

.cc-blog-index .cc-blog-pagination {
	margin-block-start: var(--cc-space-8);
}

.cc-blog-index .cc-blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-2);
}

.cc-blog-index .cc-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--cc-space-3);
	border: var(--cc-border);
	border-radius: var(--cc-radius-pill);
	font-size: var(--cc-text-small);
	color: var(--cc-color-ink);
	text-decoration: none;
}

.cc-blog-index .cc-blog-pagination a.page-numbers:hover,
.cc-blog-index .cc-blog-pagination a.page-numbers:focus-visible {
	color: var(--cc-color-ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cc-blog-index .cc-blog-pagination .page-numbers.current {
	border-color: var(--cc-color-action);
	background-color: var(--cc-color-action);
	color: var(--cc-color-ground);
}

.cc-blog-index .cc-blog-pagination .page-numbers.dots {
	color: var(--cc-color-muted);
}

/* ---------------------------------------------------------------------------
 * Single post.
 * ------------------------------------------------------------------------ */

.cc-blog-post__header {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
	max-width: var(--cc-prose-max);
	margin-block-end: var(--cc-space-8);
}

.cc-blog-post__meta {
	display: flex;
	align-items: baseline;
	gap: var(--cc-space-2);
}

.cc-blog-post__footer {
	max-width: var(--cc-prose-max);
	margin-block-start: var(--cc-space-8);
	padding-block-start: var(--cc-space-6);
	border-block-start: var(--cc-border);
}

.cc-blog-post__back {
	display: inline-flex;
	align-items: baseline;
	gap: var(--cc-space-2);
	font-size: var(--cc-text-ui);
}