/* Calnzee Post List */
.cpl-archive, .cpl-list, .cpl-controls {
	--cpl-ink: #1c2333;
	--cpl-muted: #5f6b7e;
	--cpl-line: #e3e7ee;
	--cpl-accent: #2456d6;
	--cpl-accent-soft: #e8eefc;
	--cpl-tag-soft: #f1f3f7;
}

.cpl-header { margin: 0 0 1.25rem; }
.cpl-heading { margin: 0 0 .25rem; font-size: 1.9rem; line-height: 1.2; color: var(--cpl-ink); }
.cpl-count { margin: 0; color: var(--cpl-muted); font-size: .9rem; }
.cpl-desc { color: var(--cpl-muted); margin-bottom: .5rem; }

/* Controls: filter + sort */
.cpl-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 .75rem; }
.cpl-sortform { margin: 0; display: flex; align-items: center; gap: .5rem; }
.cpl-sortlabel { font-size: .85rem; color: var(--cpl-muted); }
.cpl-sort { padding: .45rem .6rem; border: 1px solid var(--cpl-line); border-radius: 6px; background: #fff; color: var(--cpl-ink); font-size: .9rem; }
.cpl-sort:focus { outline: 2px solid var(--cpl-accent); outline-offset: 1px; }
.cpl-views { font-size: .85rem; color: var(--cpl-muted); font-variant-numeric: tabular-nums; text-align: right; }
.cpl-head span:last-child { }

/* Filter */
.cpl-filter {
	flex: 1 1 220px; max-width: 360px; box-sizing: border-box;
	padding: .55rem .8rem; border: 1px solid var(--cpl-line); border-radius: 6px;
	font-size: .95rem; background: #fff; color: var(--cpl-ink);
}
.cpl-filter:focus { outline: 2px solid var(--cpl-accent); outline-offset: 1px; }

/* List */
.cpl-list { border-top: 2px solid var(--cpl-ink); }

.cpl-head,
.cpl-row {
	display: grid;
	grid-template-columns: var(--cpl-cols);
	column-gap: 1rem;
	align-items: start;
}

.cpl-head {
	padding: .6rem .25rem;
	font-size: .8rem; font-weight: 600; color: var(--cpl-muted);
	border-bottom: 1px solid var(--cpl-line);
}

.cpl-row { padding: .9rem .25rem; border-bottom: 1px solid var(--cpl-line); }
.cpl-row:hover { background: #fafbfd; }
.cpl-row[hidden] { display: none; }

.cpl-thumb { display: block; width: 64px; height: 48px; overflow: hidden; border-radius: 4px; background: var(--cpl-tag-soft); }
.cpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border: 0; padding: 0; }
.cpl-noimg { display: block; width: 100%; height: 100%; }

.cpl-title { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 600; }
.cpl-title a { color: var(--cpl-ink); text-decoration: none; }
.cpl-title a:hover, .cpl-title a:focus { color: var(--cpl-accent); text-decoration: underline; }
.cpl-excerpt { margin: .3rem 0 0; color: var(--cpl-muted); font-size: .9rem; line-height: 1.5; }
.cpl-by { display: block; margin-top: .25rem; font-size: .8rem; color: var(--cpl-muted); }

.cpl-cats, .cpl-tags { display: flex; flex-wrap: wrap; gap: .3rem; }

.cpl-chip {
	display: inline-block; padding: .15rem .55rem; border-radius: 999px;
	font-size: .78rem; line-height: 1.5; text-decoration: none; white-space: nowrap;
}
.cpl-chip--cat { background: var(--cpl-accent-soft); color: var(--cpl-accent); font-weight: 600; }
.cpl-chip--tag { background: var(--cpl-tag-soft); color: var(--cpl-muted); }
.cpl-chip:hover, .cpl-chip:focus { text-decoration: underline; }

.cpl-date { font-size: .85rem; color: var(--cpl-muted); white-space: nowrap; }

.cpl-empty { color: var(--cpl-muted); }

/* Pagination */
.cpl-pagination { margin: 1.5rem 0; }
.cpl-pagination .nav-links, .cpl-pagination { display: flex; flex-wrap: wrap; gap: .35rem; }
.cpl-pagination .page-numbers {
	padding: .3rem .7rem; border: 1px solid var(--cpl-line); border-radius: 4px;
	text-decoration: none; color: var(--cpl-ink);
}
.cpl-pagination .page-numbers.current { background: var(--cpl-accent); border-color: var(--cpl-accent); color: #fff; }
.cpl-pagination .screen-reader-text { position: absolute; left: -9999px; }

/* Mobile: stack each row */
@media (max-width: 720px) {
	.cpl-head { display: none; }
	.cpl-row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
	.cpl-thumb { flex: 0 0 64px; }
	.cpl-main { flex: 1 1 calc(100% - 80px); min-width: 0; }
	.cpl-cats, .cpl-tags { flex: 1 1 100%; }
	.cpl-date, .cpl-views { flex: 0 0 auto; }
	.cpl-views::after { content: ' views'; }
}