/* ==========================================================================
   Blog Article — CITEM Design System (Blockout Suizo)
   Standalone article layout for long-form content (2000–3000 words).
   Base styles only. Zero @media queries here.
   Breakpoints → blog-article.responsive.css

   Token map (DS2026 canonical):
     --ink        → --c-carbon
     --ink-muted  → rgb(var(--c-carbon-rgb) / 0.50)
     --coral      → --c-coral
     --paper      → --c-paper
     --font-display → --font-heading
     --text-xs    → 0.65rem (sin token canónico — valor semántico)
     --border-structural → var(--border-w-structural) solid var(--c-indigo)
   ========================================================================== */

/* ── Article Shell ──
   max-width 720px: longitud de lectura óptima (65–75ch a 1rem base).
   padding lateral --spacing-md (32px): respira en desktop, se reduce en mobile. */
.blog-article {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
}

/* ── Article Header ── */
.blog-header {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: var(--border-w-structural) solid var(--c-indigo);
}

.blog-kicker {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-coral);
  margin-bottom: var(--spacing-sm);
}

/* DECISIÓN: blog-title NO usa text-transform uppercase del reset global.
   Los títulos de artículos largos en uppercase pierden legibilidad.
   Se sobreescribe explícitamente con none. */
.blog-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  text-transform: none;
  line-height: 1.15;
  color: var(--c-carbon);
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.5px;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  font-size: var(--text-sm);
  color: rgb(var(--c-carbon-rgb) / 0.50);
}

.blog-meta time,
.blog-meta .blog-read-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* ── Article Body ──
   line-height: 1.75 — estándar de lectura para artículos largos (WCAG 1.4.8).
   font-size: --text-base (1.125rem) — ligeramente mayor que cuerpo UI. */
.blog-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--c-carbon);
}

/* Headings dentro del cuerpo: sobreescriben el reset global (uppercase, line-height: 0.95).
   En un artículo de 3000 palabras, uppercase en H2/H3 daña la lectura. */
.blog-body h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  font-weight: 900;
  text-transform: none;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: var(--border-w-structural) solid var(--c-indigo);
  color: var(--c-carbon);
}

.blog-body h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  font-weight: 900;
  text-transform: none;
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--c-carbon);
}

.blog-body p {
  margin-bottom: var(--spacing-md);
}

.blog-body strong {
  color: var(--c-carbon);
  font-weight: 700;
}

.blog-body em {
  font-style: italic;
}

.blog-body ul,
.blog-body ol {
  margin-bottom: var(--spacing-md);
  padding-left: 1.6em;
}

.blog-body li {
  margin-bottom: var(--spacing-xs);
  line-height: 1.6;
}

.blog-body li::marker {
  color: var(--c-coral);
}

/* ── Blockquote — pull quote editorial ──
   border-left con --c-coral: énfasis brutalista sin ornamento.
   background --c-paper crea contraste sutil en texto continuo. */
.blog-body blockquote {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: var(--border-w-accent) solid var(--c-coral);
  background: var(--c-paper);
  font-style: italic;
  color: var(--c-carbon);
}

.blog-body blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Inline Table ──
   Tables de 2 columnas (Estilo / Qué es). Semántica brutalista:
   header negro sobre fondo indigo — contraste AAA. */
.blog-body table {
  width: 100%;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.blog-body th,
.blog-body td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid rgb(var(--c-carbon-rgb) / 0.25);
  text-align: left;
}

.blog-body th {
  font-family: var(--font-heading);
  font-weight: 900;
  background: var(--c-indigo);
  color: var(--c-paper);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
}

/* ── Article Footer — autor + CTA ── */
.blog-footer {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: var(--border-w-structural) solid var(--c-indigo);
}

.blog-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.blog-author-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: var(--border-w-structural) solid var(--c-indigo);
  flex-shrink: 0;
}

.blog-author-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--c-carbon);
}

.blog-author-role {
  font-size: var(--text-sm);
  color: rgb(var(--c-carbon-rgb) / 0.55);
  margin-top: var(--space-xs);
}

/* ── Todos los @media → blog-article.responsive.css ── */