/* =====================================================================
   BLOG — tobiasganster.de
   ---------------------------------------------------------------------
   Reuses the DOS/pixel chrome from hub.css (nav, footer, dos-window,
   sections, reveal, CRT overlay). This file adds the blog index list,
   post cards and — importantly — a READABLE article typography layer
   (Inter/mono at real reading sizes) that overrides the global pixel body.
   ===================================================================== */

/* ---- BLOG HERO (kompakter als der Hub-Hero) ---- */
.blog-hero {
  position: relative;
  padding: calc(56px + var(--vl-space-8)) var(--vl-space-4) var(--vl-space-7);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--vl-border-subtle);
}
.blog-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(6, 182, 212, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 60%, rgba(249, 115, 22, 0.07) 0%, transparent 55%);
}
.blog-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
.blog-hero__inner { position: relative; z-index: 1; }
.blog-hero__pre {
  font-family: var(--vl-font-pixel);
  font-size: 8px;
  color: var(--vl-accent);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: var(--vl-space-4);
}
.blog-hero__title {
  font-family: var(--vl-font-pixel);
  font-size: clamp(16px, 4vw, 30px);
  color: var(--vl-brand);
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.4), 0 0 60px rgba(6, 182, 212, 0.15);
  letter-spacing: 4px;
  line-height: 1.6;
  margin-bottom: var(--vl-space-3);
}
.blog-hero__tagline {
  font-family: var(--vl-font-pixel);
  font-size: 8px;
  color: var(--vl-text-secondary);
  letter-spacing: 2px;
}

/* ---- BLOG INDEX LIST ---- */
.blog-list {
  max-width: var(--vl-container-md);
  margin: 0 auto;
  padding: var(--vl-space-8) var(--vl-space-4) var(--vl-space-9);
  display: flex;
  flex-direction: column;
  gap: var(--vl-space-5);
}

/* Post card = DOS window */
.blog-card { text-decoration: none; display: block; }
.blog-card .dos-window { margin-bottom: 0; transition: border-color 0.1s step-end, box-shadow 0.1s step-end, transform 0.1s step-end; }
.blog-card:hover .dos-window {
  border-color: var(--vl-brand);
  box-shadow: 0 0 22px rgba(6, 182, 212, 0.16), 6px 6px 0 rgba(6, 182, 212, 0.14);
  transform: translate(-2px, -2px);
}
.blog-card__cat {
  font-family: var(--vl-font-pixel);
  font-size: 6px;
  letter-spacing: 1px;
}
.blog-card__meta {
  display: flex;
  gap: var(--vl-space-4);
  flex-wrap: wrap;
  font-family: var(--vl-font-pixel);
  font-size: 6px;
  color: var(--vl-accent);
  letter-spacing: 1px;
  margin-bottom: var(--vl-space-3);
}
.blog-card__title {
  font-family: var(--vl-font-pixel);
  font-size: 11px;
  color: var(--vl-text-primary);
  line-height: 2;
  letter-spacing: 1px;
  margin-bottom: var(--vl-space-3);
}
.blog-card:hover .blog-card__title { color: var(--vl-brand); }
.blog-card__excerpt {
  font-family: var(--vl-font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--vl-text-secondary);
  letter-spacing: 0;
  margin-bottom: var(--vl-space-4);
}
.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vl-space-3);
  flex-wrap: wrap;
}
.blog-card__tags { display: flex; flex-wrap: wrap; gap: var(--vl-space-2); }
.blog-card__tags .vl-badge {
  font-family: var(--vl-font-pixel);
  font-size: 6px;
  letter-spacing: 1px;
  border-radius: 0;
  border: 1px solid;
}
.blog-card__more {
  font-family: var(--vl-font-pixel);
  font-size: 7px;
  color: var(--vl-brand);
  letter-spacing: 1px;
  white-space: nowrap;
}
.blog-card:hover .blog-card__more { text-shadow: 0 0 8px rgba(6, 182, 212, 0.5); }

/* =====================================================================
   ARTICLE — readable long-form typography
   ===================================================================== */
.article {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(56px + var(--vl-space-7)) var(--vl-space-5) var(--vl-space-9);
}
.article__back {
  display: inline-block;
  font-family: var(--vl-font-pixel);
  font-size: 7px;
  color: var(--vl-text-tertiary);
  letter-spacing: 1px;
  text-decoration: none;
  margin-bottom: var(--vl-space-6);
  transition: color 0.1s step-end;
}
.article__back:hover { color: var(--vl-brand); }
.article__header {
  padding-bottom: var(--vl-space-5);
  margin-bottom: var(--vl-space-6);
  border-bottom: 1px dashed var(--vl-border-strong);
}
.article__meta {
  display: flex;
  gap: var(--vl-space-4);
  flex-wrap: wrap;
  font-family: var(--vl-font-pixel);
  font-size: 6px;
  color: var(--vl-accent);
  letter-spacing: 1px;
  margin-bottom: var(--vl-space-4);
}
.article__title {
  font-family: var(--vl-font-pixel);
  font-size: clamp(14px, 3.4vw, 22px);
  color: var(--vl-brand);
  text-shadow: 0 0 18px rgba(6, 182, 212, 0.35);
  line-height: 1.8;
  letter-spacing: 2px;
}
.article__lead {
  font-family: var(--vl-font-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--vl-text-secondary);
  margin-top: var(--vl-space-4);
}

/* --- Readable body prose (overrides global pixel body) --- */
.article__body {
  font-family: var(--vl-font-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--vl-text-secondary);
}
.article__body > * + * { margin-top: var(--vl-space-5); }
.article__body h2 {
  font-family: var(--vl-font-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--vl-text-primary);
  letter-spacing: 0.5px;
  margin-top: var(--vl-space-7);
}
.article__body h2::before {
  content: "// ";
  color: var(--vl-accent);
}
.article__body h3 {
  font-family: var(--vl-font-display);
  font-size: 17px;
  color: var(--vl-text-primary);
  margin-top: var(--vl-space-6);
}
.article__body p { color: var(--vl-text-secondary); }
.article__body strong { color: var(--vl-text-primary); font-weight: var(--vl-weight-semibold); }
.article__body a {
  color: var(--vl-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--vl-brand-border);
}
.article__body a:hover { text-decoration-color: var(--vl-brand); }
.article__body ul, .article__body ol {
  padding-left: var(--vl-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--vl-space-2);
}
.article__body ul { list-style: none; padding-left: var(--vl-space-4); }
.article__body ul li { position: relative; padding-left: var(--vl-space-4); }
.article__body ul li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--vl-accent);
  font-family: var(--vl-font-mono);
}
.article__body ol { list-style: decimal; }
.article__body blockquote {
  border-left: 3px solid var(--vl-accent);
  padding: var(--vl-space-3) var(--vl-space-5);
  background: rgba(249, 115, 22, 0.06);
  color: var(--vl-text-secondary);
  font-style: italic;
}
.article__body code {
  font-family: var(--vl-font-mono);
  font-size: 0.86em;
  background: rgba(6, 182, 212, 0.12);
  color: var(--vl-cyan-200);
  padding: 2px 6px;
  border: 1px solid var(--vl-brand-border);
}
.article__body pre {
  font-family: var(--vl-font-mono);
  font-size: 13px;
  line-height: 1.6;
  background: rgba(6, 6, 10, 0.92);
  border: 1px solid var(--vl-border-strong);
  border-left: 3px solid var(--vl-brand);
  padding: var(--vl-space-4);
  overflow-x: auto;
  color: var(--vl-text-secondary);
}
.article__body pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.article__body img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--vl-border-strong);
}
.article__body hr {
  border: none;
  border-top: 1px dashed var(--vl-border-strong);
  margin: var(--vl-space-7) 0;
}

/* Article footer / nav between posts */
.article__foot {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--vl-space-6) var(--vl-space-5) var(--vl-space-9);
  border-top: 1px dashed var(--vl-border-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vl-space-4);
  flex-wrap: wrap;
}
.article__foot .vl-btn {
  font-family: var(--vl-font-pixel);
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
  border: 2px solid var(--vl-brand);
  box-shadow: 4px 4px 0 rgba(6, 182, 212, 0.2);
  transition: transform 0.1s step-end, box-shadow 0.1s step-end;
}
.article__foot .vl-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(6, 182, 212, 0.3);
}
.article__foot-note {
  font-family: var(--vl-font-pixel);
  font-size: 6px;
  color: var(--vl-text-tertiary);
  letter-spacing: 1px;
}

/* ---- VORLESEN (TTS) BUTTON ---- */
.article__tts {
  display: inline-flex;
  align-items: center;
  margin-top: var(--vl-space-5);
  font-family: var(--vl-font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vl-brand);
  background: transparent;
  border: 2px solid var(--vl-brand);
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(6, 182, 212, 0.2);
  transition: transform 0.1s step-end, box-shadow 0.1s step-end,
              background 0.1s step-end, color 0.1s step-end;
}
.article__tts:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(6, 182, 212, 0.3);
}
.article__tts:active { transform: translate(1px, 1px); }
.article__tts--active {
  background: var(--vl-brand);
  color: var(--vl-neutral-950);
  box-shadow: 3px 3px 0 rgba(6, 182, 212, 0.25);
}

@media (max-width: 640px) {
  .blog-card__excerpt { font-size: 14px; }
  .article__body { font-size: 15px; }
  .article__lead { font-size: 16px; }
}

/* ---- MOBILE FEINSCHLIFF (Handy) ---- */
@media (max-width: 560px) {
  .blog-hero { padding-top: calc(56px + var(--vl-space-6)); }
  .blog-list { padding-left: var(--vl-space-3); padding-right: var(--vl-space-3); }
  .blog-card__foot { flex-direction: column; align-items: flex-start; gap: var(--vl-space-3); }
  .blog-card__more { white-space: normal; }
  .article { padding-left: var(--vl-space-4); padding-right: var(--vl-space-4); }
  .article__tts { width: 100%; justify-content: center; }
  .article__foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding-left: var(--vl-space-4);
    padding-right: var(--vl-space-4);
  }
  .article__foot .vl-btn { width: 100%; text-align: center; }
  .article__foot-note { order: -1; }
}


/* ---- Datum & Meta klarer abheben (Farben) ---- */
.blog-card__meta { font-size: 7px; gap: var(--vl-space-3); align-items: center; }
.blog-card__date {
  color: var(--vl-amber-400);
  font-weight: 700;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 4px;
  padding: 2px 6px;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}
.blog-card__read { color: var(--vl-brand); }
.blog-card__catmeta { color: var(--vl-green-400); }