/**
 * Blog surfaces: the guides index (home.php) and single posts (single.php).
 *
 * Loads on top of app.css and leans on its tokens and .cvgen-page framing; this file
 * only adds what long-form articles need (list/quote/table typography, post cards).
 */

/* ---- Guides index ---- */

.cvgen-post-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	max-width: var(--prose-max);
	margin: 0 auto;
}

.cvgen-post-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.5rem 1.6rem;
	box-shadow: var(--shadow-sm);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.cvgen-post-card:hover {
	border-color: var(--accent-ring);
	box-shadow: 0 4px 18px var(--accent-glow);
}

.cvgen-post-card-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 0 0.45rem;
}

.cvgen-post-card-title a {
	color: var(--ink);
	text-decoration: none;
}

.cvgen-post-card-title a:hover { color: var(--accent); }

.cvgen-post-card-excerpt {
	color: var(--ink-soft);
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0 0 0.75rem;
}

.cvgen-post-card-meta,
.cvgen-article-meta {
	color: var(--ink-faint);
	font-size: 0.88rem;
	margin: 0;
}

.cvgen-post-pagination {
	max-width: var(--prose-max);
	margin: 2rem auto 0;
	text-align: center;
}

.cvgen-post-pagination a,
.cvgen-post-pagination span.current {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	border-radius: 8px;
	color: var(--ink-soft);
	text-decoration: none;
}

.cvgen-post-pagination a:hover { color: var(--accent); background: var(--accent-soft); }
.cvgen-post-pagination span.current { color: var(--ink); background: var(--surface-2); }

/* ---- Single article ---- */

.cvgen-article-head { margin-bottom: 2.2rem; }

.cvgen-article-back {
	text-decoration: none;
	cursor: pointer;
}

.cvgen-article-back:hover { color: var(--accent); }

.cvgen-article-meta { margin-top: 0.2rem; }

/* The byline. The author's name is the one part of the meta line worth reading, so it takes
   the text colour while the dates stay faint, rather than the whole line reading as chrome.
   The credential after it stays soft: it qualifies the name, it does not compete with it. */
.cvgen-article-byline { color: var(--ink-soft); }
.cvgen-article-credit { color: var(--ink-soft); }

.cvgen-article-byline a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--line-strong);
}

.cvgen-article-byline a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* Article typography beyond the h2/p that .cvgen-page-body already styles. */

.cvgen-article-body {
	max-width: var(--prose-max);
	font-size: 1.02rem;
	line-height: 1.65;
}

.cvgen-article-body h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	margin: 1.8rem 0 0.6rem;
}

.cvgen-article-body ul,
.cvgen-article-body ol {
	color: var(--ink-soft);
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.cvgen-article-body li { margin: 0 0 0.45rem; }

.cvgen-article-body a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-color: var(--accent-ring);
	text-underline-offset: 2px;
}

.cvgen-article-body a:hover { text-decoration-color: var(--accent); }

.cvgen-article-body blockquote {
	border-left: 3px solid var(--accent);
	background: var(--accent-soft);
	border-radius: 0 var(--radius) var(--radius) 0;
	margin: 1.4rem 0;
	padding: 0.9rem 1.2rem;
}

.cvgen-article-body blockquote p:last-child { margin-bottom: 0; }

.cvgen-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--line);
}

.cvgen-article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4rem 0;
	font-size: 0.96rem;
}

.cvgen-article-body th,
.cvgen-article-body td {
	border: 1px solid var(--line);
	padding: 0.55rem 0.75rem;
	text-align: left;
	color: var(--ink-soft);
}

.cvgen-article-body th {
	background: var(--surface-2);
	color: var(--ink);
	font-weight: 600;
}