/* ==========================================================================
   JALON THAILAND — KNOWLEDGE HUB (WordPress blog archive)
   Page-specific only; load after jalon-shell.css.

   1. Layout        2. Post card        3. Category nav        4. Responsive

   The sidebar nav and the "Get in touch" card are shared components and live
   in jalon-shell.css (.sidebar-nav / .sidebar-contact).
   ========================================================================== */

/* 1. Layout ---------------------------------------------------------------
   .fig columns on the 1280 container: 904 post grid + 66 gutter + 309 sidebar.
   The post grid is two 444px cards with a 16px gap. */
.knowledge { padding: 100px 0 var(--sp-96); }
.knowledge__title { font-size: var(--fs-h2); font-weight: 700; text-align: center; }
.knowledge__grid {
  display: grid; grid-template-columns: minmax(0, 904px) 309px; gap: 66px;
  align-items: start; margin-top: var(--sp-48);
}

/* 2. Post cards ----------------------------------------------------------
   The card itself is .article-card, shared with the homepage (jalon-shell.css).
   Only the archive-specific bits live here: a category link in the meta line,
   and clamping so cards stay level whatever length WordPress hands over. */
.article-card__category { color: var(--gold); text-decoration: underline; }
.article-card__meta-sep { margin: 0 6px; color: #C9C9C9; }
.article-card__title a { color: inherit; }
.article-card:hover .article-card__title a { color: var(--gold-deep); }
.knowledge .article-grid { row-gap: var(--sp-48); }
.knowledge .article-card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.knowledge .article-card__excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* Pagination: the .fig's plain numerals, not the product archive's pills */
.post-pagination { display: flex; gap: 14px; margin-top: var(--sp-48); font-size: var(--fs-body); }
.post-pagination a { color: var(--ink-soft); }
.post-pagination a:hover { color: var(--gold); }
.post-pagination [aria-current="page"] { font-weight: 700; color: var(--ink); text-decoration: underline; }

/* 3. Category nav ---------------------------------------------------------
   Same component as the application sidebar, in the .fig's tinted gold box. */
.category-nav { background: rgba(238,179,13,.1); padding: 30px 30px 34px; }
.category-nav__heading {
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.05em; color: var(--gold);
}

/* 4. Responsive ----------------------------------------------------------- */
@media (max-width: 1279px) {
  .knowledge__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-32); }
}
@media (max-width: 1024px) {
  .knowledge { padding: 72px 0 var(--sp-64); }
  /* Sidebar drops below the listing — the posts are what the page is for */
  .knowledge__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }
  .knowledge__sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); align-items: start; }
  .sidebar-contact { margin-top: 0; }
}
@media (max-width: 768px) {
  .knowledge__sidebar { grid-template-columns: 1fr; max-width: 460px; }
  .knowledge .article-grid { row-gap: var(--sp-32); }
}
@media (max-width: 560px) {
  .knowledge .article-grid { max-width: 460px; margin: 0 auto; }
}