/* The Lab Room · Blog, 6 de octubre de 2026 (punto 41 de Mónica; opción A "Revista").
   Hoja de la plantilla `blog-template.php`: el listado del blog y los archivos de categoría. Sale de
   `comun.css` + `opcion-a.css` de la maqueta (Context/capturas-20261005/maquetas/blog/), sin las variantes que no
   se eligieron. Tokens y piezas de `piezas.css`: --ink, --ink-soft, --bone, --card, --eucalyptus, --verde-texto,
   --serif, --sans, --pad, .wrap, .chip, .btn, .sr-only.
   18 oct: tipografía A (Oak) de toda la web (feedback/2026-10-17-dani/DIRECCION-diseno-referencias.md): títulos en
   Zodiak 300, texto en Archivo 300 14,5/1,75 y etiquetas en Archivo 600 11,5 versal +0,16 em, con los tokens de
   design-system.css y su valor de reserva (esta plantilla no carga design-system.css). Solo letra: ni colores ni sitio.

   Medidas a 1440: contenido de 1296 px (72 px de margen a cada lado, el mismo que la cabecera y el pie).
   La destacada, según el ancho:
   - desde 1280 px: la foto a la izquierda (7/10, 907 px a 1440) y el texto en un panel salvia a la derecha (3/10);
   - por debajo: la foto a todo el ancho y debajo el panel salvia con el texto en dos columnas (en una sola en móvil).
     Con el texto al lado, por debajo de 1280 el panel crece más que la foto y deja una tira salvia bajo ella. */

.blog {
  background: var(--bone);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(4.5rem, 8vw, 7.5rem);
}
.blog,
.blog *,
.blog *::before,
.blog *::after { box-sizing: border-box; }
/* El tema pone márgenes y mayúsculas a h1/h2 por su cuenta (y en línea, por debajo de 1024 px). */
.blog :is(h1, h2, p, ul) { margin: 0; padding: 0; }
.blog ul { list-style: none; }
.blog a { color: inherit; text-decoration: none; }
.blog img { display: block; max-width: 100%; }

/* ---------- cabecera ----------
   17 oct (Dani, punto 14): la frase iba colgada a la derecha del título y "parecía un accidente". Ahora va debajo,
   en una columna, a todos los anchos. */
.blog-cab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.9rem, 1.4vw, 1.2rem);
  margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
}
.blog .blog-cab__titulo {
  font-family: var(--serif);
  font-weight: var(--tlr-t-titulo-peso, 300);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--ink);
}
.blog .blog-cab__intro {
  max-width: 60ch;
  font: var(--tlr-t-cuerpo, 300 14.5px/1.75 'Archivo', sans-serif);
  color: var(--ink-soft);
}

/* ---------- índice de temas ---------- */
.blog-temas {
  display: flex;
  align-items: center;
  gap: .8rem 1.4rem;
  margin-bottom: clamp(1.6rem, 2.8vw, 2.4rem);
}
.blog .blog-temas__titulo {
  flex: none;
  font: var(--tlr-t-etiqueta, 600 11.5px/1.3 'Archivo', sans-serif);
  letter-spacing: var(--tlr-t-etiqueta-ls, .16em);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.blog-temas__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-temas .chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .66rem 1.05rem;
  background: var(--bone);
  border: 1px solid rgba(27, 26, 23, .3);
  color: var(--ink);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1;
  transition: background .35s, color .35s, border-color .35s;
}
.blog-temas .chip:hover,
.blog-temas .chip[aria-current] { background: var(--eucalyptus); border-color: var(--eucalyptus); }
.blog-temas .chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- foto ----------
   Sin recortar nunca: la baldosa gris de la casa con la foto entera dentro (contain). Las fotos de hoy son
   todas 16:9 y la llenan exactamente; una vertical o cuadrada que suban mañana queda entera sobre el gris. */
.blog-foto {
  position: relative;
  overflow: hidden;
  background: var(--card);
  aspect-ratio: 16 / 9;
}
.blog-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
/* Entrada sin foto destacada (Amandaland hoy): baldosa gris con el tema en serif cursiva. */
.blog-foto--vacia { display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; }
.blog-foto--vacia span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 301;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.1;
  color: var(--ink);
  opacity: .78;
}

/* ---------- datos, título y enlace ---------- */
.blog .blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  font: var(--tlr-t-etiqueta, 600 11.5px/1.3 'Archivo', sans-serif);
  letter-spacing: var(--tlr-t-etiqueta-ls, .16em);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.blog .blog-meta__tema { color: var(--verde-texto); }
/* Un solo enlace por entrada (el título); su ::after cubre toda la tarjeta. */
.blog-enlace::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.blog-enlace:focus-visible { outline: none; }
.blog-enlace:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 4px; }
.blog :is(h2) { font-family: var(--serif); font-weight: var(--tlr-t-titulo-peso, 300); letter-spacing: -.012em; color: var(--ink); text-transform: none; -webkit-hyphens: none; hyphens: none; text-wrap: balance; }
.blog :is(h2) a { color: inherit; }

@media (hover: hover) {
  .blog-tarjeta:hover .blog-foto img,
  .blog-destacada:hover .blog-foto img { transform: scale(1.03); }
  .blog-tarjeta:hover .blog-enlace,
  .blog-destacada:hover .blog-enlace { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
}

/* Sin movimiento: la foto no crece. (chrome.css ya deja las transiciones en 150 ms.) */
@media (prefers-reduced-motion: reduce) {
  .blog-foto img { transition: none; }
  .blog-tarjeta:hover .blog-foto img,
  .blog-destacada:hover .blog-foto img { transform: none; }
}

/* ---------- destacada ---------- */
.blog-destacada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--eucalyptus);
}
.blog-destacada__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.25rem 1.75rem;
}
.blog-destacada__cab,
.blog-destacada__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.blog-destacada .blog-meta__tema { color: var(--ink); }
.blog .blog-destacada__titulo {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  line-height: 1.12;
}
.blog .blog-destacada__extracto {
  font: var(--tlr-t-cuerpo, 300 14.5px/1.75 'Archivo', sans-serif);
  color: var(--ink-soft);
}
/* El botón de la casa en tinta sobre el salvia (como .band--spa .btn); es un <span>: la tarjeta ya es un enlace. */
.blog-destacada .btn { margin-top: .6rem; background: var(--ink); border-color: var(--ink); color: var(--bone); }
.blog-destacada:hover .btn { background: var(--verde-texto); border-color: var(--verde-texto); }

/* foto a todo el ancho, texto debajo a dos columnas */
@media (min-width: 900px) {
  .blog-destacada__texto {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.2rem clamp(2rem, 4vw, 4rem);
    align-items: start;
    padding: clamp(1.6rem, 2.6vw, 2.6rem);
  }
  .blog .blog-destacada__titulo { font-size: clamp(1.8rem, 2.7vw, 2.5rem); }
  .blog .blog-destacada__extracto { max-width: 60ch; }
}

/* texto al lado de la foto */
@media (min-width: 1280px) {
  .blog-destacada { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .blog-destacada__texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.4rem, 2.5vw, 2.6rem);
  }
  .blog .blog-destacada__titulo { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
  .blog .blog-destacada__extracto {
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- rejilla ---------- */
.blog-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.4rem, 3.6vw, 3.4rem) clamp(1.2rem, 2.2vw, 2rem);
}
/* Con la destacada encima hay aire; sin ella (páginas 2 y siguientes) la rejilla empieza bajo el índice. */
.blog-destacada + .blog-rejilla { margin-top: clamp(2.6rem, 4.6vw, 4.2rem); }
.blog-tarjeta { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.blog-tarjeta .blog-foto { width: 100%; margin-bottom: .35rem; }
.blog .blog-tarjeta__titulo {
  font-size: clamp(1.3rem, 1.75vw, 1.6rem);
  line-height: 1.18;
}
.blog .blog-tarjeta__extracto {
  font: var(--tlr-t-cuerpo, 300 14.5px/1.75 'Archivo', sans-serif);
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- paginación ----------
   `paginate_links` saca un `ul.page-numbers` con un `li` por página; los círculos son los de la paginación de la tienda
   (44 px, eucalipto en la página actual y al pasar el ratón). */
.blog-paginas { margin-top: clamp(2.6rem, 4.6vw, 4.2rem); }
/* `paginate_links` le pone `page-numbers` también al `ul`: el círculo va solo en los `li > a` y `li > span`. */
.blog-paginas ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .45rem; }
.blog-paginas li .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .7rem;
  border: 1px solid rgba(27, 26, 23, .3);
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background .35s, border-color .35s;
}
.blog-paginas li a.page-numbers:hover,
.blog-paginas li .page-numbers.current { background: var(--eucalyptus); border-color: var(--eucalyptus); }
.blog-paginas li .page-numbers.dots { border-color: transparent; }
.blog-paginas li a.page-numbers:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- sin entradas ---------- */
.blog .blog-vacio { padding-block: clamp(2rem, 5vw, 4rem); font: var(--tlr-t-cuerpo, 300 14.5px/1.75 'Archivo', sans-serif); color: var(--ink-soft); }

/* ---------- tablet y móvil ---------- */
@media (max-width: 1099px) {
  .blog-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* índice en una fila que se desliza (la cabecera ya va en columna a todos los anchos) */
  .blog-temas { flex-direction: column; align-items: stretch; gap: .7rem; }
  .blog-temas__lista {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .blog-temas__lista::-webkit-scrollbar { display: none; }
  .blog-temas .chip { flex: none; scroll-snap-align: start; white-space: nowrap; }
}
@media (max-width: 699px) {
  .blog-rejilla { grid-template-columns: minmax(0, 1fr); }
}