/* Articles index layout */
/* This is different to kk-article.css as this is for the /Articles.php index page, not the articles themselves */
.kk-articles { max-width: 980px; margin: 0 auto; }

/* Header block (optional avatar/logo above the list) */
.kk-header { text-align: center; margin: 22px 0 26px; }
.kk-header img {
  width: 120px; height: 120px; border-radius: 16px;
  box-shadow: 0 8px 20px rgba(90,68,120,.25);
}

/* Article card list */
.kk-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  border: 1px solid #eee;
}
.kk-card + .kk-card { margin-top: 18px; }

.kk-thumb {
  width: 120px; height: 90px; object-fit: cover;
  border-radius: 8px; background: #f3f3f3;
}

.kk-card h2 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.2; }

/* Optional small badge after the title (e.g., “NEW”, “Guide”) */
.kk-badge {
  display: inline-block; margin-left: .5rem; font-size: .8rem;
  padding: 2px 6px; border-radius: 999px;
  background: #e6e0ef; color: #5A4478; vertical-align: middle;
}

.kk-date { margin: 0 0 10px; color: #111; font-weight: 400; font-size: .95rem; }
.kk-card p { margin: 0; }

.kk-readmore { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

/* Pagination */
.kk-pagination {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin: 28px 0 12px; flex-wrap: wrap;
}
.kk-page {
  padding: 8px 12px; border: 1px solid #e5e5e5; border-radius: 8px; text-decoration: none;
}
.kk-page[aria-current="page"] {
  background: #5A4478; color: #fff; border-color: #5A4478; pointer-events: none;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .kk-card { grid-template-columns: 1fr; }
  .kk-thumb { width: 100%; height: 180px; }
}