/* ============================================================
   knowledge.css — Knowledge Base Index + Entry Pages
   Converted from Tailwind reference (knowledge.html) to vanilla CSS.
   All values via CSS variables from tokens.css.
   No inline styles, no magic numbers, no !important.
   Desktop-first responsive strategy.
   ============================================================ */


/* ============================================================
   CUSTOM SCROLLBAR — 4px webkit
   ============================================================ */

.knowledge-sidebar::-webkit-scrollbar {
  width: 4px;
}

.knowledge-sidebar::-webkit-scrollbar-track {
  background: var(--color-surface-container);
}

.knowledge-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-primary);
}

.knowledge-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-container);
}


/* ============================================================
   KNOWLEDGE PAGE SHELL
   Two-column: fixed sidebar (18rem) + scrollable main
   ============================================================ */

.knowledge-layout {
  min-height: 100vh;
}

/* ============================================================
   KNOWLEDGE SIDEBAR — Fixed left panel
   ============================================================ */

.knowledge-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--sidebar-width);  /* 18rem */
  z-index: var(--z-sidebar);   /* 40 */
  background-color: var(--color-surface-container-low);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-24); /* compensate for fixed header */
  padding-bottom: var(--space-8);
  box-shadow: 0 25px 50px -12px rgba(41, 93, 85, 0.05);
  overflow-y: auto;
}

/* Sidebar header block */
.knowledge-sidebar__header {
  padding-inline: var(--space-8);
  margin-bottom: var(--space-10);
}

.knowledge-sidebar__label {
  font-family: var(--font-headline);
  font-size: 0.625rem; /* 10px — text-[10px] */
  text-transform: uppercase;
  letter-spacing: 0.2em; /* tracking-[0.2em] */
  color: var(--color-outline);
  margin-bottom: var(--space-2);
  display: block;
}

.knowledge-sidebar__title {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin: 0;
  line-height: var(--leading-snug);
}

/* Sidebar navigation list */
.knowledge-sidebar__nav {
  flex: 1;
  padding-inline: var(--space-4);
}

.knowledge-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.knowledge-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  border-left: 3px solid transparent;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-left-color var(--transition-base);
}

.knowledge-sidebar__link:hover {
  background-color: rgba(41, 93, 85, 0.05);
  color: var(--color-primary);
}

.knowledge-sidebar__link[data-state="active"] {
  background-color: rgba(41, 93, 85, 0.05);
  border-left-color: var(--color-secondary);
  color: var(--color-primary);
}

.knowledge-sidebar__icon {
  font-size: 20px;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Sidebar emergency button */
.knowledge-sidebar__footer {
  padding-inline: var(--space-6);
  margin-top: auto;
  padding-top: var(--space-6);
}

.knowledge-sidebar__emergency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  border: var(--border-width) solid var(--color-secondary);
  color: var(--color-secondary);
  background-color: transparent;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base);
}

.knowledge-sidebar__emergency:hover {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.knowledge-sidebar__emergency .material-symbols-outlined {
  font-size: 18px;
  flex-shrink: 0;
}


/* ============================================================
   KNOWLEDGE MAIN CONTENT — offset by sidebar width
   ============================================================ */

.knowledge-main {
  margin-left: var(--sidebar-width); /* 18rem */
  padding-top: var(--space-32);      /* pt-32 = 8rem, clears header */
  padding-bottom: var(--space-20);
  padding-inline: var(--space-20);   /* px-20 = 5rem */
  max-width: calc(100rem + var(--sidebar-width)); /* max-w-[1600px] relative to full */
}


/* ============================================================
   KNOWLEDGE HERO HEADER
   ============================================================ */

.knowledge-hero {
  margin-bottom: var(--space-20);
}

.knowledge-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .knowledge-hero__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.knowledge-hero__text {
  max-width: 48rem; /* max-w-3xl */
}

.knowledge-hero__eyebrow {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ultra-wide); /* 0.3em */
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
  font-variant: small-caps;
}

.knowledge-hero__heading {
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: 1.1;
  color: var(--color-on-surface);
  margin-bottom: var(--space-8);
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 768px) {
  .knowledge-hero__heading {
    font-size: var(--text-7xl);
  }
}

.knowledge-hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-outline);
  line-height: var(--leading-relaxed);
  max-width: 42rem; /* max-w-2xl */
}

.knowledge-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.knowledge-hero__meta-label {
  font-family: var(--font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-outline);
  margin-bottom: var(--space-1);
  font-variant: small-caps;
}

.knowledge-hero__meta-date {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-on-surface);
}


/* ============================================================
   SEARCH & ALPHABET INDEX STRIP
   ============================================================ */

.knowledge-search-strip {
  margin-bottom: var(--space-16);
}

/* Search box wrapper */
.knowledge-search__box {
  background-color: var(--color-surface-container-high);
  padding: var(--space-1);
}

.knowledge-search__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@media (min-width: 768px) {
  .knowledge-search__row {
    flex-direction: row;
  }
}

/* Search field */
.knowledge-search__field {
  position: relative;
  flex: 1;
}

.knowledge-search__icon {
  position: absolute;
  left: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
  font-size: 20px;
  pointer-events: none;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.knowledge-search__input {
  width: 100%;
  background-color: var(--color-surface);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-16);
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-on-surface);
  transition: background-color var(--transition-base);
  box-sizing: border-box;
}

.knowledge-search__input::placeholder {
  color: var(--color-outline-variant);
}

.knowledge-search__input:focus {
  background-color: var(--color-surface-container-lowest);
}

.knowledge-search__btn {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-6) var(--space-12); /* px-12 py-6 */
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
  white-space: nowrap;
  flex-shrink: 0;
}

.knowledge-search__btn:hover {
  background-color: var(--color-primary-container);
}

/* Alphabet index strip */
.knowledge-alphabet {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: var(--border-width) solid rgba(191, 200, 197, 0.2);
  border-bottom: var(--border-width) solid rgba(191, 200, 197, 0.2);
  align-items: center;
}

.knowledge-alphabet__label {
  font-family: var(--font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-outline);
  margin-right: var(--space-4);
  align-self: center;
  flex-shrink: 0;
  font-variant: small-caps;
}

.knowledge-alphabet__btn {
  width: 2.5rem;  /* w-10 */
  height: 2.5rem; /* h-10 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  background-color: transparent;
  color: var(--color-on-surface);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base),
              color var(--transition-base);
}

.knowledge-alphabet__btn:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.knowledge-alphabet__btn[data-state="active"] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}


/* ============================================================
   CONTENT GRID — 12-column: 8 left + 4 right
   ============================================================ */

.knowledge-content-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  gap: var(--space-16);
}

@media (min-width: 1280px) {
  .knowledge-content-grid {
    grid-template-columns: 8fr 4fr;
    gap: var(--space-16);
  }
}

/* Left column: entries list */
.knowledge-entries-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24); /* space-y-24 */
}

/* Right column: sticky sidebar */
.knowledge-right-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

@media (min-width: 1280px) {
  .knowledge-right-sidebar {
    position: sticky;
    top: var(--space-32); /* top-32 */
    align-self: start;
    max-height: calc(100vh - var(--space-32));
    overflow-y: auto;
  }
}


/* ============================================================
   ENCYCLOPEDIA ENTRY (article)
   ============================================================ */

.knowledge-entry {
  position: relative;
}

/* Entry meta row: ID + divider + category */
.knowledge-entry__meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.knowledge-entry__id {
  font-family: var(--font-headline);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: rgba(41, 93, 85, 0.3); /* text-primary/30 */
  line-height: 1;
  flex-shrink: 0;
}

.knowledge-entry__divider {
  height: 1px;
  flex: 1;
  background-color: rgba(191, 200, 197, 0.3); /* outline-variant/30 */
}

.knowledge-entry__category {
  font-family: var(--font-headline);
  font-size: 0.625rem; /* text-[10px] */
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-secondary);
  flex-shrink: 0;
  font-variant: small-caps;
}

/* Entry heading */
.knowledge-entry__heading {
  font-family: var(--font-headline);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
  margin-bottom: var(--space-8);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.knowledge-entry__heading-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.knowledge-entry__heading-link:hover {
  color: var(--color-primary);
}

/* Entry prose block */
.knowledge-entry__prose {
  font-family: var(--font-body);
  color: rgba(27, 28, 26, 0.8); /* on-surface/80 */
  line-height: 2; /* leading-loose */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.knowledge-entry__definition-lead {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
  line-height: var(--leading-relaxed);
}

.knowledge-entry__body {
  font-size: var(--text-base);
  line-height: 2;
}

/* Two-column editorial text on desktop */
.editorial-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(27, 28, 26, 0.8);
  line-height: var(--leading-relaxed);
}

@media (min-width: 1024px) {
  .editorial-text {
    column-count: 2;
    column-gap: var(--space-8);
  }

  .editorial-text p {
    break-inside: avoid;
  }
}

/* Legal reference box */
.knowledge-entry__legal {
  background-color: var(--color-surface-container-low);
  padding: var(--space-10); /* p-10 */
  border-left: var(--border-width-4) solid var(--color-primary);
  margin-top: var(--space-12);
}

.knowledge-entry__legal-heading {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  font-variant: small-caps;
}

.knowledge-entry__legal-icon {
  font-size: 20px;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  display: block;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.knowledge-entry__legal-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-on-surface-variant);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Entry action links row */
.knowledge-entry__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.knowledge-entry__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base);
}

.knowledge-entry__link:hover {
  background-color: var(--color-surface-variant);
}

.knowledge-entry__link .material-symbols-outlined {
  font-size: 18px;
  color: var(--color-primary);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}


/* ============================================================
   RIGHT SIDEBAR CARDS
   ============================================================ */

/* --- Expert Commentary Card (primary bg) --- */
.expert-comment-card {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-12); /* p-12 */
  box-shadow: 0 25px 50px -12px rgba(41, 93, 85, 0.2); /* shadow-2xl shadow-primary/20 */
}

.expert-comment-card__quote-icon {
  font-size: 2.5rem; /* text-4xl */
  color: var(--color-secondary-container);
  display: block;
  margin-bottom: var(--space-6);
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.expert-comment-card__heading {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-on-primary);
  margin-bottom: var(--space-6);
}

.expert-comment-card__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.8); /* on-primary/80 */
  font-style: italic;
  margin-bottom: var(--space-8);
}

.expert-comment-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.expert-comment-card__avatar {
  width: 3rem;  /* w-12 */
  height: 3rem; /* h-12 */
  object-fit: cover;
  background-color: var(--color-primary-container);
  flex-shrink: 0;
  display: block;
}

.expert-comment-card__author-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.expert-comment-card__author-name {
  font-family: var(--font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-bold);
  color: var(--color-on-primary);
  font-variant: small-caps;
}

.expert-comment-card__author-role {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Related Articles Card --- */
.related-articles-card {
  padding: var(--space-10); /* p-10 */
  border: var(--border-width) solid rgba(191, 200, 197, 0.3); /* border-outline-variant/30 */
}

.related-articles-card__heading {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-outline);
  margin-bottom: var(--space-8);
  font-variant: small-caps;
}

.related-articles-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.related-articles-card__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.related-articles-card__item:hover .related-articles-card__title {
  color: var(--color-primary);
}

.related-articles-card__tag {
  display: block;
  font-family: var(--font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
  font-variant: small-caps;
}

.related-articles-card__title {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-on-surface);
  transition: color var(--transition-base);
}

.related-articles-card__thumb {
  margin-top: var(--space-4);
  overflow: hidden;
  aspect-ratio: 21 / 9;
}

.related-articles-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter var(--transition-slow);
}

.related-articles-card__item:hover .related-articles-card__thumb-img {
  filter: grayscale(0%);
}

/* --- Category Cloud Card --- */
.category-cloud-card {
  padding: var(--space-10); /* p-10 */
  background-color: var(--color-surface-container-low);
}

.category-cloud-card__heading {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-outline);
  margin-bottom: var(--space-6);
  font-variant: small-caps;
}

.category-cloud-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.category-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-surface);
  border: var(--border-width) solid rgba(191, 200, 197, 0.2);
  font-family: var(--font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-outline);
  cursor: pointer;
  transition: background-color var(--transition-base),
              color var(--transition-base);
  text-decoration: none;
}

.category-tag:hover {
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface);
}


/* ============================================================
   FEATURED BENTO GRID — FAQ Section
   ============================================================ */

.knowledge-faq {
  margin-top: var(--space-32);
}

.knowledge-faq__heading {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
  margin-bottom: var(--space-12);
}

/* 3-column bento grid */
.knowledge-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .knowledge-bento {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Bento card base */
.bento-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-12); /* p-12 */
  min-height: 20rem;
  overflow: hidden;
  position: relative;
}

/* Card 1 — Large FAQ (spans 2 columns) */
.bento-card[data-variant="faq-featured"] {
  grid-column: span 1;
  background-color: var(--color-surface-container-low);
  transition: background-color var(--transition-slow),
              color var(--transition-slow);
}

@media (min-width: 768px) {
  .bento-card[data-variant="faq-featured"] {
    grid-column: span 2;
    min-height: 25rem; /* min-h-[400px] */
  }
}

.bento-card[data-variant="faq-featured"]:hover {
  background-color: var(--color-primary);
}

.bento-card[data-variant="faq-featured"]:hover .bento-card__icon {
  color: var(--color-on-primary);
}

.bento-card[data-variant="faq-featured"]:hover .bento-card__heading {
  color: var(--color-on-primary);
}

.bento-card[data-variant="faq-featured"]:hover .bento-card__link {
  color: var(--color-on-primary);
}

/* Card 2 — CTA Accent (secondary bg) */
.bento-card[data-variant="cta-accent"] {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

/* Card 3 — Info bordered (surface-container-high, border-top primary) */
.bento-card[data-variant="info-bordered"] {
  background-color: var(--color-surface-container-high);
  border-top: 4px solid var(--color-primary);
}

/* Card 4 — Dark featured (full width on mobile, 2 cols on md) */
.bento-card[data-variant="dark-featured"] {
  grid-column: span 1;
  background-color: var(--color-dark-bg);
  color: var(--color-on-primary);
  overflow: hidden;
}

@media (min-width: 768px) {
  .bento-card[data-variant="dark-featured"] {
    grid-column: span 2;
  }
}

/* Bento card internals */
.bento-card__icon {
  font-size: 2.5rem; /* text-4xl */
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-8);
  transition: color var(--transition-slow);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.bento-card__heading {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
  line-height: var(--leading-tight);
  transition: color var(--transition-slow);
}

.bento-card[data-variant="cta-accent"] .bento-card__heading {
  font-size: var(--text-xl);
  color: var(--color-on-secondary);
}

.bento-card[data-variant="info-bordered"] .bento-card__heading {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-on-surface);
}

.bento-card[data-variant="dark-featured"] .bento-card__heading {
  font-size: var(--text-2xl);
  color: var(--color-on-primary);
}

.bento-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
  line-height: var(--leading-relaxed);
}

.bento-card[data-variant="cta-accent"] .bento-card__excerpt {
  color: rgba(255, 255, 255, 0.8);
}

.bento-card[data-variant="info-bordered"] .bento-card__excerpt {
  color: var(--color-outline);
}

.bento-card[data-variant="dark-featured"] .bento-card__excerpt {
  color: rgba(255, 255, 255, 0.6);
  max-width: 28rem;
}

/* Links and CTAs inside bento cards */
.bento-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-slow);
}

.bento-card[data-variant="info-bordered"] .bento-card__link {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  text-decoration-thickness: 2px;
  letter-spacing: 0;
  text-transform: none;
}

.bento-card__link .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* CTA button inside bento card */
.bento-card__cta {
  display: inline-block;
  margin-top: var(--space-8);
  border: var(--border-width) solid rgba(255, 255, 255, 0.3);
  color: var(--color-on-secondary);
  background-color: transparent;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base);
}

.bento-card__cta:hover {
  background-color: var(--color-on-secondary);
  color: var(--color-secondary);
}

/* Dark card body + decorative image */
.bento-card__body-wrap {
  position: relative;
  z-index: 1;
}

.bento-card__deco-image {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.2;
  filter: grayscale(100%);
  transform: scale(1.1);
  transition: transform var(--transition-slower);
}

.bento-card[data-variant="dark-featured"]:hover .bento-card__deco-image {
  transform: scale(1);
}

.bento-card__deco-image img {
  display: block;
  max-width: 20rem;
  height: auto;
}


/* ============================================================
   KNOWLEDGE ENTRY — Single Entry Page (_entry.twig)
   ============================================================ */

/* Breadcrumb */
.knowledge-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-outline);
}

.knowledge-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.knowledge-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.knowledge-breadcrumb__item:not(:last-child)::after {
  content: '/';
  color: var(--color-outline-variant);
}

.knowledge-breadcrumb__link {
  color: var(--color-outline);
  text-decoration: none;
  transition: color var(--transition-base);
}

.knowledge-breadcrumb__link:hover {
  color: var(--color-primary);
}

.knowledge-breadcrumb__current {
  color: var(--color-on-surface);
  font-weight: var(--weight-medium);
}

/* Entry page header */
.knowledge-entry-header {
  margin-bottom: var(--space-16);
  padding-top: var(--space-32);
  padding-bottom: var(--space-12);
  border-bottom: var(--border-width) solid rgba(191, 200, 197, 0.3);
}

/* Definition block */
.knowledge-definition-block {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
  line-height: var(--leading-relaxed);
  padding: var(--space-8);
  background-color: var(--color-surface-container-low);
  border-left: var(--border-width-4) solid var(--color-primary);
}

/* Section subheadings */
.knowledge-section-heading {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-outline);
  margin-bottom: var(--space-6);
  margin-top: var(--space-12);
  font-variant: small-caps;
}

/* Entry nav card */
.entry-nav-card {
  padding: var(--space-8);
  border: var(--border-width) solid rgba(191, 200, 197, 0.3);
}

.entry-nav-card__heading {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-outline);
  margin-bottom: var(--space-6);
  font-variant: small-caps;
}

.entry-nav-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.entry-nav-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base);
}

.entry-nav-card__link:hover {
  background-color: rgba(41, 93, 85, 0.05);
  color: var(--color-primary);
}

.entry-nav-card__link .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-primary);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* CTA section for single entry */
.knowledge-cta {
  margin-top: var(--space-32);
  padding: var(--space-20);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  text-align: center;
}

.knowledge-cta__heading {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-on-primary);
  margin-bottom: var(--space-6);
}

.knowledge-cta__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--leading-relaxed);
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.knowledge-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

.knowledge-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-10);
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
  cursor: pointer;
  border: none;
}

.knowledge-cta__btn[data-variant="primary-inverse"] {
  background-color: var(--color-on-primary);
  color: var(--color-primary);
}

.knowledge-cta__btn[data-variant="primary-inverse"]:hover {
  background-color: var(--color-surface-container-high);
}

.knowledge-cta__btn[data-variant="outline-inverse"] {
  background-color: transparent;
  color: var(--color-on-primary);
  border: var(--border-width) solid rgba(255, 255, 255, 0.4);
}

.knowledge-cta__btn[data-variant="outline-inverse"]:hover {
  background-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   HIDDEN — used by JS filter to hide non-matching entries
   ============================================================ */

.knowledge-entry[data-hidden] {
  display: none;
}

.knowledge-entry[data-hidden="true"] {
  display: none;
}


/* ============================================================
   VISUALLY HIDDEN — accessibility utility
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   RESPONSIVE — Desktop-first breakpoints
   ============================================================ */

/* --- Tablet (max 1279px): sidebar hidden, main full-width --- */
@media (max-width: 1279px) {
  .knowledge-sidebar {
    display: none;
  }

  .knowledge-main {
    margin-left: 0;
    padding-inline: var(--space-12);
  }
}

/* --- Large desktop (min 1280px): sidebar + offset --- */
@media (min-width: 1280px) {
  .knowledge-sidebar {
    display: flex;
  }

  .knowledge-main {
    margin-left: var(--sidebar-width);
  }
}

/* --- Tablet (max 1023px): content grid stacks --- */
@media (max-width: 1023px) {
  .knowledge-content-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-right-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .knowledge-main {
    padding-inline: var(--space-8);
  }

  .editorial-text {
    column-count: 1;
  }
}

/* --- Mobile (max 767px): simplified layout --- */
@media (max-width: 767px) {
  .knowledge-main {
    padding-top: var(--space-24);
    padding-inline: var(--space-4);
    padding-bottom: var(--space-12);
  }

  .knowledge-hero__heading {
    font-size: var(--text-4xl);
  }

  .knowledge-entry__id {
    font-size: var(--text-2xl);
  }

  .knowledge-entry__heading {
    font-size: var(--text-2xl);
  }

  .knowledge-bento {
    grid-template-columns: 1fr;
  }

  .bento-card[data-variant="faq-featured"],
  .bento-card[data-variant="dark-featured"] {
    grid-column: span 1;
  }

  .knowledge-faq {
    margin-top: var(--space-16);
  }

  .knowledge-search__btn {
    padding: var(--space-4) var(--space-8);
  }

  .knowledge-hero__meta {
    align-items: flex-start;
  }

  .knowledge-alphabet {
    gap: var(--space-1);
  }

  .knowledge-alphabet__btn {
    width: 2rem;
    height: 2rem;
    font-size: 0.625rem;
  }

  .expert-comment-card {
    padding: var(--space-8);
  }

  .bento-card {
    padding: var(--space-8);
    min-height: 15rem;
  }
}

/* --- Between 768px and 1023px --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .knowledge-main {
    padding-inline: var(--space-12);
  }

  .knowledge-hero__heading {
    font-size: var(--text-5xl);
  }
}