:root {
  --primary: #6366f1;
  --accent: #22d3ee;
  --bg: #0f172a;
  --surface: #1e293b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --radius: 12px;
}

/* ---------- article ---------- */
.post .cover {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  margin: 0 0 24px;
}
.post .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 22px;
}
.post .meta .tag {
  display: inline-block;
  background: color-mix(in srgb, var(--primary) 25%, transparent);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
}
.code-block { position: relative; }
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.copy-btn:hover { opacity: 1; }

/* ---------- language switcher ---------- */
.lang-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lang-switch a {
  color: var(--accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.8rem;
}
.lang-switch a:hover { background: color-mix(in srgb, var(--primary) 25%, transparent); }

/* ---------- blog index (card grid) ---------- */
.index-meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 8px; }
.month-group { margin-top: 32px; }
.month-group h2 {
  font-size: 1.05rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  padding-bottom: 8px;
  margin: 0 0 18px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.card .thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.card .card-body { padding: 14px 16px 16px; }
.card .date { color: var(--muted); font-size: 0.78rem; }
.card h3 { margin: 6px 0 8px; font-size: 1rem; line-height: 1.4; color: var(--text, inherit); }
.card:hover h3 { color: var(--accent); }

.badge {
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--bg);
  background: var(--accent);
}
.badge.draft { background: var(--muted); }
.badge.needs_review { background: #f59e0b; }
.badge.ready { background: #10b981; }

/* ---------- blog index layout (month page + archive sidebar) ---------- */
/* The index is one page per month, so each page gets an archive sidebar on the
   right that links the other months. Single column on narrow screens, archive
   beside the cards from 820px up. */
.blog-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.blog-index-main { min-width: 0; }
@media (min-width: 820px) {
  .blog-index {
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: start;
  }
  .month-nav { position: sticky; top: 80px; }
}
.month-nav-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.month-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.month-nav-list a {
  display: block;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text, inherit);
  text-decoration: none;
  font-size: 0.9rem;
}
.month-nav-list a:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}
.month-nav-list a[aria-current="page"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  font-weight: 600;
}

/* ---------- EU AI Act label ---------- */
.ai-end {
  display: block;
  margin: 28px 0 0 auto;
  width: 110px;
  height: auto;
  opacity: 0.85;
}
.ai-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}
.ai-footer img {
  width: 110px;
  height: auto;
  display: block;
  margin-left: auto;
  opacity: 0.85;
}