/**
 * Blog index and category archives.
 *
 * Deliberately plain. The page this replaces used 63 gradients and 19 emoji; a technical blog earns
 * trust by looking like a reference, so the only colour here is one accent on the category label
 * and the active filter. Structure and spacing do the work instead of decoration.
 *
 * Typography comes from cvg-type.css — nothing sets a font-family again.
 */

.cvg-blog {
	padding: 32px 0 72px;
}

.cvg-blog__shell {
	max-width: 56rem;          /* Wider than an article: this is a list to scan, not prose to read. */
	margin: 0 auto;
	padding: 0 20px;
}

/* ── Head ───────────────────────────────────────────────────────────────────── */

.cvg-blog__head {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid #e8edf1;
}

.cvg-blog__title { margin: 0 0 8px; }

.cvg-blog__intro {
	margin: 0 0 20px;
	max-width: 46rem;
	color: var(--cvg-ink-muted);
	font-size: var(--cvg-text-base);
}

.cvg-blog__search { display: flex; gap: 8px; max-width: 30rem; }

.cvg-blog__search input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 2px solid #d8dde2;
	border-radius: 6px;
	font-size: var(--cvg-text-sm);
	background: #fff;
}

.cvg-blog__search input:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 3px rgba( 0, 115, 170, .15 );
}

.cvg-blog__search button {
	padding: 10px 18px;
	border: none;
	border-radius: 6px;
	background: var(--cvg-ink);
	color: #fff;
	font-size: var(--cvg-text-sm);
	font-weight: 600;
	cursor: pointer;
}
.cvg-blog__search button:hover { background: #163461; }

/* ── Topic filter ───────────────────────────────────────────────────────────── */

.cvg-blog__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.cvg-blog__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border: 1px solid #dde3e9;
	border-radius: 16px;
	background: #fff;
	color: var(--cvg-ink);
	font-size: var(--cvg-text-xs);
	font-weight: 600;
	text-decoration: none;
}
.cvg-blog__chip:hover { border-color: var(--cvg-accent); color: var(--cvg-accent); }
.cvg-blog__chip.is-active { background: var(--cvg-ink); border-color: var(--cvg-ink); color: #fff; }
.cvg-blog__chip-n { font-weight: 400; opacity: .6; }

/* ── The list ─────────────────────────────────────────────────────────────────
 *
 * A list, not a card grid. Rows scan faster than tiles when the titles are long — and these titles
 * are long, because they name the actual problem being solved.
 */
.cvg-blog__list { display: grid; gap: 4px; }

.cvg-blog__item {
	display: grid;
	grid-template-columns: 200px minmax( 0, 1fr );
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid #eef1f4;
}

.cvg-blog__item:first-child { padding-top: 4px; }

/* No thumbnail: the text takes the full width rather than leaving a hole. */
.cvg-blog__item:not(:has(.cvg-blog__thumb)) { grid-template-columns: minmax( 0, 1fr ); }

.cvg-blog__thumb {
	display: block;
	/* Fixed ratio reserves the space before the image loads, so a list of mixed-size images does not
	   reflow as each one arrives. */
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 8px;
	background: #f2f5f7;
}
.cvg-blog__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cvg-blog__cat {
	display: inline-block;
	margin-bottom: 6px;
	font-size: var(--cvg-text-xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cvg-accent);
	text-decoration: none;
}
.cvg-blog__cat:hover { text-decoration: underline; }

.cvg-blog__item-title {
	margin: 0 0 8px;
	font-size: 1.3rem;
	line-height: 1.25;
}
.cvg-blog__item-title a { color: var(--cvg-ink); text-decoration: none; }
.cvg-blog__item-title a:hover { color: var(--cvg-accent); }

.cvg-blog__excerpt {
	margin: 0 0 10px;
	font-size: var(--cvg-text-sm);
	line-height: 1.65;
	color: var(--cvg-ink-muted);
}

.cvg-blog__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: var(--cvg-text-xs);
	color: #8a94a3;
}

/* ── Pagination ─────────────────────────────────────────────────────────────── */

.cvg-blog__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 36px;
}
.cvg-blog__pagination .page-numbers {
	padding: 8px 13px;
	border: 1px solid #dde3e9;
	border-radius: 6px;
	color: var(--cvg-ink);
	font-size: var(--cvg-text-sm);
	text-decoration: none;
}
.cvg-blog__pagination .page-numbers:hover { border-color: var(--cvg-accent); color: var(--cvg-accent); }
.cvg-blog__pagination .page-numbers.current {
	background: var(--cvg-ink);
	border-color: var(--cvg-ink);
	color: #fff;
}

.cvg-blog__empty {
	padding: 40px 0;
	color: var(--cvg-ink-muted);
}
.cvg-blog__empty a { color: #0b6aa2; }

@media ( max-width: 640px ) {
	/* Image above the text on a phone: a 200px thumbnail column leaves the title too narrow to read. */
	.cvg-blog__item { grid-template-columns: minmax( 0, 1fr ); gap: 12px; }
	.cvg-blog__thumb { aspect-ratio: 16 / 9; }
	.cvg-blog__item-title { font-size: 1.15rem; }
}