/**
 * Blog archive shortcode — filters, pagination, image placeholder.
 * Card styles come from single-post.css (.ke-related__grid .custom-blog-card).
 */

.ke-blog-cards {
	max-width: var(--ke-content-max, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.ke-blog-cards__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 32px;
}

.ke-blog-cards__filter {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	font-family: var(--ke-font-body, 'Inter', sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ke-text, #2d3748);
	background: var(--ke-white, #fff);
	border: 1px solid var(--ke-border, #e2e8f0);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.ke-blog-cards__filter:hover {
	border-color: var(--ke-orange, #ec5221);
	color: var(--ke-orange, #ec5221);
	transform: translateY(-1px);
}

.ke-blog-cards__filter.is-active {
	background: var(--ke-green, #24ad61);
	border-color: var(--ke-green, #24ad61);
	color: #fff;
}

.ke-blog-cards__filter.is-active:hover {
	color: #fff;
	border-color: var(--ke-green-dark, #1c874b);
	background: var(--ke-green-dark, #1c874b);
}

.ke-blog-cards .card-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background: linear-gradient(135deg, #e2e8f0 0%, #f8fafc 100%);
}

.ke-blog-cards__empty {
	text-align: center;
	font-family: var(--ke-font-body, 'Inter', sans-serif);
	color: var(--ke-text-muted, #94a3b8);
	padding: 2rem 1rem;
}

.ke-blog-cards__pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}

.ke-blog-cards__pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.ke-blog-cards__pagination .page-numbers li {
	margin: 0;
}

.ke-blog-cards__pagination .page-numbers a,
.ke-blog-cards__pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	font-family: var(--ke-font-heading, 'Poppins', sans-serif);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	border: 1px solid var(--ke-border, #e2e8f0);
	background: var(--ke-white, #fff);
	color: var(--ke-navy, #1a1f36);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ke-blog-cards__pagination .page-numbers a:hover {
	border-color: var(--ke-orange, #ec5221);
	color: var(--ke-orange, #ec5221);
}

.ke-blog-cards__pagination .page-numbers span.current {
	background: var(--ke-green, #24ad61);
	border-color: var(--ke-green, #24ad61);
	color: #fff;
}

.ke-blog-cards__pagination .page-numbers .dots {
	border: none;
	background: transparent;
	min-width: auto;
}

@media (max-width: 782px) {
	.ke-blog-cards__grid.ke-related__grid {
		grid-template-columns: 1fr;
	}
}