/* Estilos para el cuerpo de los artículos (markdown renderizado) */

.article-body {
  font-family: var(--serif);
  color: var(--ink);
  max-width: 820px;
  font-size: 19px;
  line-height: 1.62;
  /* CSS Grid gotcha: grid items tienen min-width:auto por defecto, lo que
     permite que el contenido (imágenes 1400px) inflen el track. min-width:0
     fuerza al item a respetar el tamaño del track del grid. */
  min-width: 0;
}

.article-body > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  padding: 0.06em 0.14em 0 0;
  color: var(--mustard-deep);
  font-style: italic;
}

.article-body p {
  margin: 0 0 1.2em;
}

.article-body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 56px 0 20px;
  position: relative;
  padding-left: 22px;
}
.article-body h2::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 8px; height: 8px;
  background: var(--mustard);
  border-radius: 50%;
}

.article-body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 36px 0 14px;
}

.article-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--mustard);
  font-weight: 500;
}
.article-body a:hover { background: rgba(216,147,33,0.12); }

.article-body strong { font-weight: 600; color: var(--ink); }
.article-body em { font-style: italic; color: var(--ink); }

.article-body ul, .article-body ol {
  margin: 0 0 1.4em;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-body ul li, .article-body ol li {
  padding-left: 28px;
  position: relative;
}

.article-body ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 0.7em;
  width: 8px; height: 8px;
  background: var(--mustard-deep);
  border-radius: 50%;
}

.article-body ol {
  counter-reset: olcount;
}
.article-body ol li {
  counter-increment: olcount;
}
.article-body ol li::before {
  content: counter(olcount, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.05em;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mustard-deep);
  font-weight: 500;
}

.article-body blockquote {
  margin: 36px 0 36px -22px;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--mustard);
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.32;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.012em;
}
.article-body blockquote p { margin: 0; }

.article-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: rgba(20,58,85,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink);
}

.article-body hr {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 56px 0;
}

/* === Imágenes y pies de foto =========================================
   Marked.js renderiza `![alt](url)` como <p><img ...></p>.
   Si en el .md la siguiente línea es `*texto en cursiva*`, marked.js la
   convierte en <p><em>texto</em></p>. Detectamos ese caso y le damos
   estilo de pie de foto. */

/* Regla catch-all SIN :has() para máxima compatibilidad. Garantiza que
   ninguna imagen del article-body se desborde del grid track aunque el
   selector más específico de abajo no se aplique (browsers viejos, etc). */
.article-body img {
  max-width: 100%;
  height: auto;
}

.article-body p > img:only-child {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.article-body p:has(> img:only-child) {
  margin: 48px 0 8px;          /* aire arriba, poco abajo para pegar el pie */
  background: var(--cream-soft);
  padding: 0;
}

/* Pie de foto: el primer <p> después del <p><img> que es una sola <em> */
.article-body p:has(> img:only-child) + p > em:only-child {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.article-body p:has(> img:only-child) + p {
  margin: 0 0 36px;
  padding-left: 2px;
  text-indent: 0;
}
/* Si el pie de foto es el primer párrafo después de la imagen, no le
   apliques el dropcap (que va al primer <p> del artículo) */
.article-body p:has(> img:only-child) + p::first-letter {
  all: unset;
}

/* Fallback para navegadores sin :has() — imagen base usable */
@supports not (selector(:has(*))) {
  .article-body img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 48px 0 8px;
  }
  .article-body p > em:only-child {
    display: block;
    font-family: var(--mono);
    font-style: normal;
    font-size: 13px;
    color: var(--muted);
  }
}