/* KI-Akademie — site-local layout on top of the brand layers.
   Only what the brand components don't already give us: the catalog grid, the
   card/tag/filter chrome, and entry-page prose spacing. Tokens only, no hex. */

html { overflow-x: clip; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ak-hero { padding: clamp(48px, 4vw + 32px, 96px) 0 clamp(32px, 3vw, 56px); }
.ak-hero__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-cream);
  margin: 8px 0 16px;
}
.ak-hero__intro {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-cream);
  opacity: 0.82;
  max-width: 60ch;
}

/* vertical rhythm only — NEVER a padding shorthand here: .ak-body sits on a
   .container, whose inline padding a `padding: X 0 Y` shorthand would zero. */
.ak-body { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); }

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.ak-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-bottom: 8px;
  margin-bottom: clamp(28px, 3vw, 44px);
  border-bottom: 1px solid var(--border-divider);
}
.ak-filter-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ak-filter-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-subtle);
  margin: 0 2px 0 8px;
}
.ak-filter-group:first-of-type .ak-filter-label { margin-left: 0; }
/* Filter chips are brand `pill pill--interactive` (hover/is-selected from the
   library) — only the compact size is site-local. */
.ak-filter { font-size: 0.82rem; padding: 4px 13px; }

/* ── Pillar sections + grid ───────────────────────────────────────────────── */
.ak-pillar { margin-bottom: clamp(40px, 5vw, 72px); }
.ak-pillar__title {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-terracotta);
  display: inline-block;
}
.ak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 380px));
  gap: 20px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
/* Box visuals (bg / border / radius / shadow) come from brand `card-light`.
   Site-local: link-card layout, denser padding, hover lift (interactive link). */
.ak-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.ak-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--color-terracotta-tint-strong);
}
.ak-card__pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-terracotta);
}
/* draft marker — brand `badge`, recoloured to warning (local --drafts build only) */
.ak-card__draft {
  color: var(--color-warning);
  background: var(--status-warning-bg);
}
.ak-card.is-draft { border-style: dashed; }
.ak-draftbar {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-warning);
  background: var(--status-warning-bg);
  border-bottom: 1px solid var(--status-warning-fg);
  text-align: center;
  padding: 8px 16px;
}
.ak-draftbar code { font-family: var(--font-mono); font-size: 0.9em; }
.ak-card__title {
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}
.ak-card__thesis {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-body);
  margin: 0;
  flex: 1 0 auto;
}

/* ── Tag chips ────────────────────────────────────────────────────────────── */
/* Tags are brand `pill` (read-only label, no hover) — site-local is only the
   compact density and the facet-key span. */
.ak-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ak-tag {
  align-items: baseline;
  gap: 5px;
  font-size: 0.74rem;
  padding: 3px 10px;
  line-height: 1.4;
}
.ak-tag__k {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-subtle);
}

.ak-empty {
  font-size: 1rem;
  color: var(--color-subtle);
  padding: 24px 0;
}

/* ── Entry page ───────────────────────────────────────────────────────────── */
.ak-entry { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); }
.ak-entry .breadcrumb { margin-bottom: 24px; }
.ak-entry__head { margin-bottom: 28px; }
.ak-entry__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 8px 0 14px;
}
.ak-entry__thesis {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.5;
  color: var(--color-body);
  margin: 0 0 18px;
}
.ak-proof { margin: 4px 0 32px; }

/* Prose body — spacing for the rendered markdown */
.ak-entry__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-doc-text); }
.ak-entry__body h2 {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 40px 0 14px;
}
.ak-entry__body h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 28px 0 10px;
}
.ak-entry__body p { margin: 0 0 16px; }
.ak-entry__body img {
  display: block;
  max-width: min(100%, 480px);
  height: auto;
  margin: 28px auto;
  border-radius: var(--radius-code);
  box-shadow: var(--shadow-card);
}
.ak-entry__body ul { margin: 0 0 18px; padding-left: 4px; }
.ak-entry__body li { margin-bottom: 6px; }
.ak-entry__body blockquote {
  margin: 0 0 20px;
  padding: 12px 18px;
  border-left: 3px solid var(--color-terracotta);
  background: var(--color-terracotta-tint);
  border-radius: 0 var(--radius-code) var(--radius-code) 0;
  font-size: 0.95rem;
  color: var(--color-body);
}
/* Tables are brand `.table` inside `.table-wrap` (emitted by the build) —
   only prose rhythm is site-local. */
.ak-entry__body .table-wrap { margin: 0 0 22px; }
.ak-entry__body .table { font-size: 0.92rem; }
.ak-entry__body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--color-light);
  padding: 1px 5px;
  border-radius: var(--radius-code);
}
.ak-entry__back { margin-top: 40px; }