/* ==========================================================================
   Wots · Chief of Agents — page-blog.css
   /blog (índice de novedades) y /blog/<slug> (nota). Requiere base.css y pages.css.
   Lo genera _tools/blog-build.mjs desde Sanity; este archivo es el único que se edita a mano.

   Reutiliza todo lo que ya existe: .page-header, .block, .card, .card--link, .glowable,
   .badge, .kicker, .lead, .link-arrow y, para el cuerpo de la nota, .prose entera.
   Acá va solo lo que el blog necesita y no estaba: la columna de lectura, la tarjeta con
   imagen arriba, la destacada a dos columnas y el remate de la nota.

   OJO con ::before. .card--link y .glowable definen los dos su ::before en base.css y el
   sitio ya convive con eso (la tarjeta de noticias de la portada usa las dos clases: gana
   .glowable por ir después). Ninguna regla de este archivo toca ::before, para no repetir
   el choque que hubo entre .ind::before y .glowable::before en industrias.
   ========================================================================== */

/* ---- Columna de lectura ----------------------------------------------------
   El sitio no tiene una clase de ancho intermedio (.narrow se usa en tres páginas
   pero NO está definida en ninguna hoja: no hace nada). Acá se define una propia
   con nombre del bloque, para no cambiar de rebote esas tres páginas. */
.bl-col { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---- Índice: la destacada ---- */
.bl-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(16px, 1.6vw, 22px); }
.bl-hero__media { display: block; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
/* mismo motivo que arriba: contenedor, no enlace */
.bl-hero__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bl-hero__body { min-width: 0; padding-right: clamp(0px, 1vw, 12px); }
.bl-hero__t { margin-top: 12px; font-size: var(--fs-h2-sm); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.bl-hero__t a { color: var(--ink); }
/* El enlace del título cubre la tarjeta entera: así el clic funciona en toda la caja
   sin anidar un <a> dentro de otro (la imagen ya va con tabindex="-1" y aria-hidden). */
.bl-hero__t a::after, .bl-card__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Con el enlace estirado el foco del teclado cae en un <a> invisible: el anillo lo dibuja la
   tarjeta. Mismo patrón que .news__card en la portada (home-b.css). */
.bl-hero:focus-within, .bl-card:focus-within { outline: 2px solid var(--green-2); outline-offset: 3px; }
.bl-hero__t a:focus-visible, .bl-card__t a:focus-visible { outline: none; }
.bl-hero__x { margin-top: 12px; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }
.bl-hero__cta { margin-top: 8px; }
@media (max-width: 860px) { .bl-hero { grid-template-columns: 1fr; } .bl-hero__body { padding-right: 0; } }

/* ---- Índice: la reja de tarjetas ---- */
.bl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--grid-gap); }
/* height:100% para que todas las tarjetas de una fila terminen a la misma altura: el <li> lo
   estira la reja, pero la tarjeta de adentro no hereda ese alto sola. Mismo detalle que
   .news__card en la portada. */
.bl-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
/* La imagen va suelta, sin <a> alrededor: un enlace sin texto accesible es una falla de a11y
   (y la caza el QA del sitio). Clicable lo es igual, por el ::after del título. */
.bl-card__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.bl-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 1.8vw, 24px); }
/* En una tarjeta de ~385 px, «PRODUCTO · 4 de septiembre de 2026 · 4 min de lectura» no cabe en
   una línea y parte fea. La fecha va corta acá (la larga queda en la nota) y el separador es un
   punto medio, no un salto. */
.bl-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.bl-card__meta time { font-variant-numeric: tabular-nums; }
.bl-card__meta > span + span:not(.badge)::before, .bl-card__meta time + span::before { content: "·"; margin-right: 10px; color: var(--muted-2); }
.bl-card__t { margin-top: 12px; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.bl-card__t a { color: var(--ink); }
.bl-card__x { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.bl-more { margin-top: 20px; }

/* ---- Índice: remate ---- */
.bl-out { padding: clamp(28px, 4vw, 44px); text-align: center; }
.bl-out .lead { margin: 14px auto 0; }
.bl-out__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
@media (max-width: 560px) { .bl-out__btns { flex-direction: column; } .bl-out__btns > * { width: 100%; } }

/* ---- Nota: cabecera ---- */
.post .page-header h1 { max-width: 22ch; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.post__meta time { font-variant-numeric: tabular-nums; }
.post__by b { color: var(--ink-2); font-weight: 700; }

/* ---- Nota: imagen de apertura ----------------------------------------------
   Va más ancha que la columna de lectura a propósito: es lo único de la nota que
   rompe la columna, y marca el comienzo del cuerpo. */
.post__hero { margin-bottom: clamp(28px, 4vw, 48px); }
/* Sin recorte: la imagen llega ya encajada en 1440×900 desde el generador y conserva su
   proporción real, sea horizontal o vertical. Por eso va centrada y con ancho automático:
   una portada vertical no se estira ni se corta, solo queda más angosta. */
.post__hero img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }

/* ---- Nota: cuerpo ----------------------------------------------------------
   El cuerpo hereda .prose (títulos, listas, citas, enlaces, código, figuras) y acá
   solo se ajusta lo que cambia en una nota: el primer párrafo entra un punto más
   grande, y el ancho lo manda la columna, no el 68ch de .prose. */
.post__body { max-width: none; }
.post__body > p:first-child { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); }
.post__fig { margin-top: 1.8em; }
.post__fig img { display: block; width: 100%; height: auto; }

/* ---- Nota: temas ---- */
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3vw, 40px); }
.post__tags li { padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-xs); color: var(--muted); }

/* ---- Nota: llamada de cierre ---- */
.post__cta { margin-top: clamp(32px, 4vw, 56px); padding: clamp(24px, 3vw, 36px); }
.post__cta h2 { margin-top: 10px; font-size: var(--fs-h2-sm); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.post__cta p + p { margin-top: 10px; }
.post__cta > p:nth-of-type(1) { font-size: var(--fs-body); color: var(--ink-2); }
.post__cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 560px) { .post__cta__btns { flex-direction: column; } .post__cta__btns > * { width: 100%; } }

@media (hover: hover) and (pointer: fine) {
  .bl-hero__t a:hover, .bl-card__t a:hover { color: var(--green-2); }
}