/* =========================================================
   BLOG — lo MINIMO para que un articulo largo se pueda leer

   Esto no es diseño: el diseño lo lleva otra persona y esta fuera del encargo.
   Es la reparacion de lo que el reset global de styles.css quita y que un
   cuerpo de post necesita para no salir roto.

   POR QUE EXISTE ESTE FICHERO Y NO SON LINEAS EN styles.css:
   el cierre de la fase s5 uso el md5 de styles.css como evidencia de que la
   migracion a Node no toco ni un byte del CSS publicado. Tocarlo ahora anula
   esa prueba. Aqui va lo del blog, se carga solo en las paginas del blog
   (page.extraCss en src/routes/blog.js) y styles.css sigue intacto.

   EL PROBLEMA CONCRETO: styles.css:46 hace
       ul{ list-style:none; margin:0; padding:0; }
   para el menu y las rejillas. Los 778 cuerpos importados traen 1.393 <ul> y
   8.376 <li> de contenido de verdad: sin viñeta ni sangria salen como parrafos
   pegados y no se entiende cual es la lista. Se restaura DENTRO de .post-body
   y en ningun otro sitio.

   Todo lo de aqui esta acotado a .post-body, .post-* y .blog-*: no puede
   afectar a las 39 paginas.
   ========================================================= */

/* ---------- Cuerpo del articulo ---------- */

/* 70ch es la medida de linea con la que se lee sin perder el renglon. Sin
   limite, en un monitor ancho la linea llega a 1.180 px y cansa. */
.post-body,
.post-head,
.post-cover,
.post-tags {
  max-width: 70ch;
}

.post-head h1 {
  max-width: 22ch;
}

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6C6350;
  margin: 16px 0 0;
}

.post-cover {
  margin: 0;
}

.post-cover img {
  width: 100%;
  height: auto;
}

/* Las listas, que es el motivo de este fichero. */
.post-body ul,
.post-body ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 0.4em; }
.post-body li > ul,
.post-body li > ol { margin-top: 0.4em; }

/* Encabezados de seccion. El h1 lo pone la plantilla, asi que dentro del
   cuerpo el mayor es h2 — el importador degrado a h2 los 368 <h1> que venian
   sueltos en el HTML de WordPress. */
.post-body h2 {
  font-size: 1.5rem;
  margin: 2em 0 0.6em;
}

.post-body h3 {
  font-size: 1.2rem;
  margin: 1.6em 0 0.5em;
}

.post-body h4,
.post-body h5,
.post-body h6 {
  font-size: 1.05rem;
  margin: 1.4em 0 0.4em;
}

.post-body p { margin: 0 0 1.1em; }

.post-body a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-body a:hover { color: var(--clay); }

/* Imagenes del cuerpo: centradas y sin desbordar. Vienen con width y height
   del original —a veces 2560 px— y sin height:auto se deforman al reducirlas. */
.post-body figure {
  margin: 2em 0;
}

.post-body img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-body figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: #6C6350;
  text-align: center;
  margin-top: 10px;
}

.post-body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--teal);
  color: #4A5047;
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4em 0;
}

/* 79 tablas heredadas de WordPress, algunas mas anchas que la columna. Se les
   da scroll propio en vez de dejar que empujen la pagina: una pagina que se
   desplaza en horizontal esta rota en movil. */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.92rem;
  display: block;
  overflow-x: auto;
}

.post-body th,
.post-body td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.post-body th { background: var(--stone-dark); font-weight: 600; }

.post-body iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 2em 0;
}

/* Los cuerpos traen atributos width="100%" y estilos en linea del editor
   viejo. No se limpian en la importacion —cambiaria el marcado sin que nadie
   lo haya pedido— pero no pueden sacar la imagen de su columna. */
.post-body [style*="width"] { max-width: 100%; }

.post-tags {
  margin: 2.5em 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-tags span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6C6350;
  border: 1px solid var(--line);
  padding: 4px 10px;
}

/* ---------- Listado ---------- */

.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-cats a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 7px 14px;
  color: #4A5047;
}

.blog-cats a:hover { border-color: var(--teal); color: var(--teal-deep); }

.blog-cats a[aria-current="page"] {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--white);
}

.blog-cat-n { opacity: 0.6; }

.blog-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
}

/* Los enlaces anterior/siguiente del detalle llevan el TITULO del post, que
   puede ser largo. Sin tope, dos titulos largos parten la fila. */
.blog-pager .btn {
  max-width: 44%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-pager-n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6C6350;
}

/* La tarjeta del listado lleva h2 (jerarquia correcta bajo el h1 de la
   pagina), pero styles.css solo dimensiona .guide-card h3. Sin esto el titulo
   de cada tarjeta sale a 2,6rem y la rejilla revienta. */
.guide-card h2 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .blog-pager { flex-direction: column; align-items: stretch; }
  .blog-pager .btn { max-width: none; text-align: center; }
}