/* ==========================================================================
   BLOG ARTICLE — Blog — DIGART Studio
   Pattern: Blog Article

   Referencia documental:
     docs/002-information-architecture.md (D-042, "Blog")
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 4.3
     Columnas, 10 Tipografía, 17 Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid, .l-col-3,
   .l-col-4). No declara valores independientes de color, tipografía,
   espaciado, borde, sombra ni punto de quiebre. Todo selector queda
   encapsulado bajo ".blog-article": el cuerpo Markdown (h2/h3/p/ul/li/a/
   strong/em) no lleva clases propias (lo genera
   digart_blog_render_markdown() sin tocar la librería), por lo que su
   jerarquía tipográfica se resuelve aquí mediante selectores de elemento
   anidados bajo ".blog-article__body", nunca globales.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.blog-article {
  background-color: var(--color-background-default);
}

/* Contenedores ampliados a --breakpoint-wide (tokens.css, 3.7), mismo
   criterio scoped a Pattern que blog-featured.css/blog-grid.css/
   blog-topics.css: la imagen principal, el índice+cuerpo, la navegación
   y los relacionados comparten un único ancho editorial de referencia. */
.blog-article__media,
.blog-article__container,
.blog-article__nav-container,
.blog-article__related-container {
  max-width: var(--breakpoint-wide);
}

/* --------------------------------------------------------------------
   2. Elements — imagen principal
   Apoyo editorial subordinado al cuerpo de lectura, no un segundo Hero:
   Grid propio de 12 columnas (mismos Tokens de gap que .l-grid) para que
   la imagen comparta el mismo sistema de columnas que el índice+cuerpo
   (Elements — índice y columna de lectura, 3). Ahora con mayor presencia
   (grid-column: 1 / span 10, antes 3 / span 8): dominante pero conserva
   un margen derecho de dos columnas, el mismo margen asimétrico que deja
   la columna de lectura angosta más abajo, de forma que ambos elementos
   comparten un límite derecho coherente. Proporción panorámica y sobria
   (aspect-ratio, sin alto fijo en píxeles) reduce su peso visual en
   Escritorio; object-fit: cover evita deformación frente a los distintos
   recursos nativos del Blog.
   -------------------------------------------------------------------- */
.blog-article__media {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-5);
  margin-block-end: var(--space-8);
}

.blog-article__image {
  display: block;
  width: 100%;
  grid-column: 1 / span 10;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background-color: var(--color-surface-subtle);
}

/* --------------------------------------------------------------------
   3. Elements — índice y columna de lectura
   Grid oficial de 12 columnas (.l-grid). El índice de contenidos, cuando
   existe, es el primer elemento del Grid y usa la utilidad genérica
   .l-col-3 (layout.css) sin desplazamiento propio, ocupando las primeras
   tres columnas. El cuerpo, en cambio, siempre se desplaza a
   "grid-column: 5 / span 6" (shorthand completo, no solo
   grid-column-start: layout.css no declara una utilidad de offset para
   este caso) — tanto si hay índice (columna 4 como respiro entre ambos)
   como si no lo hay (columnas 1-4 quedan vacías a propósito, mismo margen
   izquierdo asimétrico que exhibe la imagen a la derecha, 2). Se retira
   en Responsive (14) para que ambos recuperen el ancho completo en
   Tablet/Mobile.
   -------------------------------------------------------------------- */
.blog-article__body {
  grid-column: 5 / span 6;
  font-family: var(--font-family-primary);
}

/* Ritmo vertical base entre bloques del cuerpo editorial (párrafos,
   encabezados y listas al mismo nivel, tal como los produce
   digart_blog_render_markdown()); los encabezados amplían este
   espaciado por separado (Elements — encabezados). */
.blog-article__body > * + * {
  margin-block-start: var(--space-5);
}

.blog-article__body p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* Primer párrafo del cuerpo: introducción editorial más destacada
   (tamaño y color, nunca convertido en encabezado ni alterando el HTML
   generado). p:first-of-type en vez de :first-child: varias
   publicaciones repiten el título como "# " al inicio del Markdown
   (renderizado como <h2> por digart_blog_render_markdown(), nunca como
   <h1>), por lo que el primer párrafo real no siempre es el primer
   elemento del cuerpo. */
.blog-article__body p:first-of-type {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------
   4. Elements — encabezados
   -------------------------------------------------------------------- */
.blog-article__body h2 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  margin-block-start: var(--space-7);
}

.blog-article__body h3 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  margin-block-start: var(--space-6);
}

/* --------------------------------------------------------------------
   5. Elements — listas
   -------------------------------------------------------------------- */
.blog-article__body ul {
  padding-inline-start: var(--space-6);
  list-style: disc;
  color: var(--color-text-secondary);
}

.blog-article__body li {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.blog-article__body li + li {
  margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------
   6. Elements — énfasis en línea (enlaces, negritas, cursivas)
   Enlace en rojo institucional (mismo Token ya usado como color de
   enlace editorial en legal-policy.css, ".legal-policy__link"),
   subrayado permanente como señal visual inequívoca dentro del cuerpo
   del artículo. ":not(.button)" excluye al Componente Button del CTA
   contextual (8, Elements — CTA), que vive dentro de ".blog-article__body"
   y ya resuelve su propio color oficial (button.css, ".button--primary");
   sin la exclusión, este selector (mayor especificidad que ".button--
   primary" por sí solo) pintaba el texto del botón en rojo sobre su
   propio fondo rojo, dejándolo invisible.
   -------------------------------------------------------------------- */
.blog-article__body a:not(.button) {
  color: var(--color-error);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.blog-article__body a:not(.button):hover {
  color: var(--color-interactive-active);
}

.blog-article__body a:not(.button):focus-visible {
  outline: var(--border-width-thick) var(--border-style-solid) var(--color-interactive-focus);
  outline-offset: var(--space-1);
}

.blog-article__body strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

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

/* --------------------------------------------------------------------
   7. Elements — índice de contenidos
   Columna semilateral (.l-col-3, junto al cuerpo, 3) que aparece solo
   cuando el artículo tiene suficientes secciones (public/articulo.php,
   $articuloShowToc). Segunda pasada visual: deja el tratamiento de caja
   con fondo/borde-radius por un acento editorial (borde izquierdo,
   "border-inline-start") y queda fija en pantalla al hacer scroll en
   Desktop (position: sticky, Responsive 14 la desactiva en Tablet/
   Mobile). Numeración con el mismo dispositivo tipográfico ya
   certificado en institutional-principles.css.
   -------------------------------------------------------------------- */
.blog-article__toc-column {
  position: sticky;
  top: calc(var(--space-8) + var(--space-6));
  align-self: start;
}

.blog-article__toc {
  padding-inline-start: var(--space-5);
  border-inline-start: var(--border-width-thick) var(--border-style-solid) var(--color-error);
}

.blog-article__toc-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-block-end: var(--space-4);
}

.blog-article__toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-article__toc-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  color: var(--color-text-secondary);
}

.blog-article__toc-link:hover,
.blog-article__toc-link:focus-visible {
  color: var(--color-error);
}

.blog-article__toc-link:focus-visible {
  outline: var(--border-width-thick) var(--border-style-solid) var(--color-interactive-focus);
  outline-offset: var(--space-1);
}

.blog-article__toc-number {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-error);
}

/* --------------------------------------------------------------------
   8. Elements — CTA contextual
   Componente Button oficial (button.css); tono editorial, no un segundo
   CTA global: el Pattern Call To Action reutilizado más abajo en
   public/articulo.php conserva su propio mensaje sin duplicarse aquí.
   -------------------------------------------------------------------- */
.blog-article__cta {
  margin-block-start: var(--space-8);
  padding: var(--space-6);
  background-color: var(--color-background-subtle);
  border-radius: var(--border-radius-md);
  text-align: center;
}

.blog-article__cta-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  margin-block-end: var(--space-4);
}

/* --------------------------------------------------------------------
   9. Elements — navegación anterior/siguiente/volver
   Segunda pasada visual: recupera el ancho editorial completo (fuera de
   la columna de lectura angosta, Elements 3, mediante su propio
   contenedor .blog-article__nav-container, Root) y pasa de una línea de
   metadatos al pie a dos bloques reales con fondo, borde y tipografía de
   mayor peso — mismo tratamiento de "tarjeta" que .blog-article__cta (8).
   -------------------------------------------------------------------- */
.blog-article__nav-container {
  margin-block-start: var(--space-8);
}

.blog-article__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-4);
}

.blog-article__nav-item--previous,
.blog-article__nav-item--next {
  background-color: var(--color-background-subtle);
  border-radius: var(--border-radius-md);
}

.blog-article__nav-item--next {
  text-align: end;
}

.blog-article__nav-item--index {
  display: flex;
  align-items: center;
}

.blog-article__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-6);
}

.blog-article__nav-item--next .blog-article__nav-link {
  align-items: flex-end;
}

.blog-article__nav-link:focus-visible {
  outline: var(--border-width-thick) var(--border-style-solid) var(--color-interactive-focus);
  outline-offset: calc(var(--space-1) * -1);
}

.blog-article__nav-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-error);
}

.blog-article__nav-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  max-width: 28ch;
}

.blog-article__nav-item--previous:hover .blog-article__nav-title,
.blog-article__nav-item--next:hover .blog-article__nav-title,
.blog-article__nav-link:focus-visible .blog-article__nav-title {
  color: var(--color-error);
}

.blog-article__nav-link--index {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  padding-inline: var(--space-4);
}

.blog-article__nav-link--index:hover,
.blog-article__nav-link--index:focus-visible {
  color: var(--color-error);
}

/* --------------------------------------------------------------------
   10. Elements — artículos relacionados
   Recupera el ancho completo de .l-container (a diferencia de la columna
   de lectura, 3) y el Grid de tarjetas (.l-col-4), mismo criterio visual
   que blog-grid.css: sin declarar un segundo sistema de tarjetas.
   -------------------------------------------------------------------- */
.blog-article__related-container {
  margin-block-start: var(--space-8);
}

.blog-article__related-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-block-end: var(--space-6);
}

.blog-article__related-card {
  background-color: var(--color-background-default);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--elevation-1);
}

.blog-article__related-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-article__related-link:focus-visible {
  outline: var(--border-width-thick) var(--border-style-solid) var(--color-interactive-focus);
  outline-offset: var(--space-1);
}

.blog-article__related-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-subtle);
  overflow: hidden;
}

.blog-article__related-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-article__related-category {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-error);
  margin-block-start: var(--space-4);
  padding-inline: var(--space-4);
}

.blog-article__related-title-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  margin-block-start: var(--space-3);
  padding-inline: var(--space-4);
}

.blog-article__related-link:hover .blog-article__related-title-text,
.blog-article__related-link:focus-visible .blog-article__related-title-text {
  color: var(--color-error);
}

.blog-article__related-meta {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  margin-block-start: var(--space-3);
  padding-inline: var(--space-4);
  padding-block-end: var(--space-4);
}

/* --------------------------------------------------------------------
   11. Variants
   Sección reservada: este Pattern no define variantes.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   12. States
   Sin elementos interactivos propios salvo los enlaces del cuerpo
   editorial, del índice, del CTA, de la navegación y de los relacionados
   (Hover/Focus resueltos junto a cada declaración base, Elements 6-10);
   estado base (Default) representado por el resto de las reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   13. Motion Hooks
   Sin disparador funcional propio: esta página no reproduce la cadena
   de eventos narrativos de la Home (P-03); el contenido se presenta
   directamente en su estado final, mismo criterio ya aplicado en el
   resto de páginas institucionales.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   14. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css. El
   remapeo genérico de .l-col-N (layout.css, 8) ya linealiza .l-col-3
   (índice, Elements 7) y .l-col-4 (artículos relacionados, Elements 10)
   a ancho completo en este punto de quiebre; los desplazamientos propios
   de este Pattern (grid-column: 1 / span 10 en la imagen —Elements 2— y
   5 / span 6 en el cuerpo —Elements 3—) no forman parte de esa utilidad
   genérica y se retiran aquí para que ambos ocupen el ancho disponible
   sin desplazamiento. El índice pierde además su posicionamiento fijo
   (position: sticky, 7): apilado sobre el cuerpo, "seguir a la vista" al
   hacer scroll ya no aporta valor de navegación. La imagen recupera una
   proporción más equilibrada (16:9) que la panorámica de Escritorio. La
   navegación anterior/siguiente/volver (Elements 9), en tres columnas en
   Escritorio, pasa a una sola columna apilada: "anterior" y "siguiente"
   ya no caben con proporción legible una junto a la otra en el ancho
   completo de una columna reducida.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .blog-article__media {
    margin-block-end: var(--space-6);
  }

  .blog-article__image {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }

  .blog-article__toc-column {
    position: static;
    margin-block-end: var(--space-6);
  }

  .blog-article__body {
    grid-column: 1 / -1;
  }

  .blog-article__nav {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .blog-article__nav-item--next {
    text-align: start;
  }

  .blog-article__nav-item--next .blog-article__nav-link {
    align-items: flex-start;
  }

  .blog-article__nav-item--index {
    order: -1;
    text-align: start;
  }

  .blog-article__nav-item--index .blog-article__nav-link {
    padding-block: var(--space-3);
  }
}