/* knowledge-hub: clone of https://www.dexpose.io/knowledge-hub/
   Centered bold title + small subtitle, then the post grid (live: 3 gradient cards per row,
   0.5rem gap, 2px transparent border -> #007bff on hover). Posts are not imported, so one
   `.empty` block wears the live card style where the grid would be. No CTA on the live page. */
.pg-kh { --kh-m: 4.5rem; --kh-card-grad: linear-gradient(180deg, rgba(50, 114, 255, 0.27) 0%, rgba(125, 125, 125, 0.25) 100%); }
.pg-kh .kh-sec { padding: var(--kh-m) 0; }
.pg-kh p { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.75; }
.pg-kh p:last-child { margin-bottom: 0; }

/* Hero: h1 3rem / 600, centered; subtitle plain text */
.pg-kh .kh-hero { padding-bottom: 3rem; text-align: center; }
.pg-kh .kh-hero h1 { font-size: 3rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 1.4rem; }
.pg-kh .kh-hero p { font-size: 1rem; }

/* Empty state styled like the live post cards (layout_13809 + custom-grid-1) */
.pg-kh .kh-posts { padding-top: 0; }
.pg-kh .empty.kh-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; text-align: left; padding: 10px; border: 2px solid transparent; border-radius: 10px; background: var(--kh-card-grad); box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1), 0 0.07rem 0.2rem rgba(0, 0, 0, 0.1); transition: border-color 0.4s ease-in-out, box-shadow 0.3s; }
.pg-kh .empty.kh-card:hover { border-color: #007bff; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1), 0 0.33rem 1rem rgba(0, 0, 0, 0.15); }
.pg-kh .kh-card__body { padding: 10px 10px 0; }
.pg-kh .kh-card__tax { font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; margin: 0 0 0.6rem; }
.pg-kh .kh-card h2 { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: 0; margin: 0 0 0.5rem; }
.pg-kh .kh-card__body p:last-child { font-size: 14px; }
.pg-kh .kh-card__foot { margin: 1.5rem 10px 0; padding: 12px 4px 0; border-top: 1px solid rgba(219, 215, 219, 0.3); }
.pg-kh .kh-more { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8rem; line-height: 1.2; color: #fff; transition: color 0.3s ease; }
.pg-kh .kh-more .ico { width: 0.9em; height: 0.9em; stroke-width: 2.5; }
.pg-kh .kh-more:hover { color: #279bf3; }

@media (max-width: 760px) {
  .pg-kh { --kh-m: 3rem; }
  .pg-kh .kh-hero h1 { font-size: 2.5rem; }
  .pg-kh .empty.kh-card { min-height: 260px; }
}