/* ku-posts.css */

.ku-posts {
	/* Grid and Row spacing custom properties defaults */
	--ku-posts-col-gap: 30px;
	--ku-posts-row-gap: 30px;
}

/* Grid Wrapper layout */
.ku-posts__wrapper--grid {
	display: grid;
	grid-template-columns: repeat(var(--ku-posts-columns-desktop, 3), 1fr);
	column-gap: var(--ku-posts-col-gap);
	row-gap: var(--ku-posts-row-gap);
}

@media (max-width: 1024px) {
	.ku-posts__wrapper--grid {
		grid-template-columns: repeat(var(--ku-posts-columns-tablet, 2), 1fr);
	}
}

@media (max-width: 767px) {
	.ku-posts__wrapper--grid {
		grid-template-columns: repeat(var(--ku-posts-columns-mobile, 1), 1fr);
	}
}

/* List Layout (Flex column list) */
.ku-posts__wrapper--list {
	display: flex;
	flex-direction: column;
	gap: var(--ku-posts-row-gap);
}

/* Row Layout (Flex column rows) */
.ku-posts__wrapper--row {
	display: flex;
	flex-direction: column;
	gap: var(--ku-posts-row-gap);
}

/* Pagination container styling */
.ku-posts__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 48px;
}

/* Base pagination button style */
.ku-posts__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background-color: #ffffff;
	color: var(--base-muted, #7A8B9B);
	border-radius: 12px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

/* Active and Hover pagination items */
.ku-posts__pagination .page-numbers.current,
.ku-posts__pagination .page-numbers:hover:not(.current) {
	background-color: var(--primary, #EC008C);
	border-color: var(--primary, #EC008C);
	color: #ffffff;
	box-shadow: 0 10px 15px -3px rgba(236, 0, 140, 0.15);
	transform: translateY(-2px);
}

/* Ellipsis pagination dots */
.ku-posts__pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	cursor: default;
	pointer-events: none;
}

/* Empty message styles */
.ku-posts-empty {
	text-align: center;
	padding: 40px;
	font-size: 16px;
	color: var(--base-muted, #7A8B9B);
	background: rgba(0, 0, 0, 0.02);
	border-radius: 16px;
	border: 1px dashed rgba(0, 0, 0, 0.1);
}