@charset "UTF-8";
/* =============================================================================
   BAZA WIEDZY — archiwum wpisów
   Figma 3585:6419 (desktop 1440) / 3585:7569 (mobile 390)

   DOM (templates/cpt/post/main/template.php):
     section.kb-hero          ← eyebrow + nagłówek dwukolorowy + lead
     .kb-wedge--up            ← podwójny klin wchodzący w sekcję listy
     section.kb-list
       > nav.kb-categories    ← filtr kategorii (na mobile rozwijany)
       > .kb-grid > article.kb-card
       > nav.kb-pagination
     .kb-wedge--down          ← klin wychodzący do sekcji CTA
   ========================================================================== */
/* Header leży na hero — jak w projekcie. */
body.blog,
body.archive,
body.category {
  background: var(--color-silver);
}
body.blog > header,
body.archive > header,
body.category > header {
  background: transparent;
}

/* ---------- HERO ---------- */
.kb-hero {
  position: relative;
  background: var(--color-silver);
  padding-block: var(--space-96) var(--space-48);
  overflow: hidden;
  isolation: isolate;
}
.kb-hero__shape {
  position: absolute;
  left: -167px;
  top: 40px;
  width: 302px;
  height: 293px;
  background: var(--color-bright-snow);
  opacity: 0.4;
  transform: rotate(71.48deg);
  clip-path: polygon(50% 0, 0 38.21%, 19.1% 100%, 80.93% 100%, 100% 38.41%);
  pointer-events: none;
  z-index: -1;
}
.kb-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-48);
}
.kb-hero__headings {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 629px;
}
.kb-hero__eyebrow {
  margin: 0;
  color: var(--heading-color);
  letter-spacing: 1.2px;
}
.kb-hero__title {
  margin: 0;
  color: var(--text-primary);
}
.kb-hero__title .is-accent {
  color: var(--heading-color);
}
.kb-hero__lead {
  margin: 0;
  flex: 0 1 522px;
  color: var(--text-secondary);
}

/* ---------- KLINY MIĘDZY SEKCJAMI ----------
   Proporcje z projektu: 93/1440 = 6.458%, 72/1440 = 5%. Wysokości w vw,
   więc nachylenie jest identyczne na każdej szerokości ekranu. */
.kb-wedge {
  position: relative;
  pointer-events: none;
}
.kb-wedge--up {
  height: 6.458vw;
  /* ciemniejsza krawędź (grey-olive/200) — wychodzi wyżej z lewej */
}
.kb-wedge--up::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-grey-olive-200);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.kb-wedge--up {
  /* wypełnienie sekcji listy */
}
.kb-wedge--up::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5vw;
  background: var(--color-grey-olive-100);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.kb-wedge--down {
  height: 5vw;
}
.kb-wedge--down::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-grey-olive-100);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- SEKCJA LISTY ---------- */
.kb-list {
  background: var(--color-grey-olive-100);
  padding-bottom: var(--space-48);
}

/* ---------- FILTR KATEGORII ---------- */
.kb-categories {
  position: relative;
}
.kb-categories__toggle {
  display: none;
}
.kb-categories__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) 68px;
}
.kb-categories__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
.kb-categories__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--duration-base) var(--ease-out);
}
.kb-categories__link:hover, .kb-categories__link.is-active {
  color: var(--link-button-hover);
}
.kb-categories__link:hover::after, .kb-categories__link.is-active::after {
  width: 100%;
}

/* Siatka i karty wpisów → assets/css/design-system/post-card.css
   (używane też pod pojedynczym wpisem). */
.kb-empty {
  margin: var(--space-48) 0 0;
  color: var(--text-secondary);
}

/* ---------- PAGINACJA ---------- */
.kb-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: var(--space-48);
}
.kb-pagination__nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  font-family: var(--font-button-secondary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.06;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--link-button-default);
  text-decoration: none;
}
.kb-pagination__nav .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.kb-pagination__nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--duration-base) var(--ease-out);
}
.kb-pagination__nav:hover::after {
  width: 100%;
}
.kb-pagination__nav.is-disabled {
  color: var(--link-disabled-text);
  pointer-events: none;
}
.kb-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.kb-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-family: var(--font-button-secondary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.06;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--link-button-default);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.kb-pagination .page-numbers:hover {
  background: var(--color-grey-olive-200);
}
.kb-pagination .page-numbers.current {
  background: var(--link-button-default);
  color: var(--text-on-accent);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.342px;
  text-transform: none;
}
.kb-pagination .page-numbers.dots {
  width: auto;
  pointer-events: none;
}

/* ---------- MOBILE (Figma 3585:7569) ---------- */
@media (max-width: 991px) {
  .kb-hero {
    padding-block: var(--space-48) var(--space-32);
  }
  .kb-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }
  .kb-hero__headings {
    max-width: none;
  }
  .kb-hero__lead {
    flex: none;
  }
  .kb-hero__shape {
    left: -142px;
    top: 100px;
  }
  .kb-list {
    padding-bottom: var(--space-32);
  }
  /* Kategorie jako rozwijana lista */
  .kb-categories__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    height: 42px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid currentColor;
    background: none;
    color: var(--link-button-hover);
    cursor: pointer;
  }
  .kb-categories__toggle .icon {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-base) var(--ease-out);
  }
  .kb-categories__toggle[aria-expanded=true] .icon {
    transform: rotate(180deg);
  }
  .kb-categories__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: var(--space-12);
  }
  .kb-categories.is-open .kb-categories__list {
    display: flex;
  }
  /* Mobile (Figma 3585:7602): kolejno „Poprzednia strona" → numery →
     „Następna strona", wszystko wyśrodkowane, odstęp 20px. */
  .kb-pagination {
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);
  }
  .kb-pagination__pages {
    justify-content: center;
  }
}