/* ==========================================================================
   BLOG GRID — Blog — DIGART Studio
   Pattern: Blog Grid

   Referencia documental:
     docs/002-information-architecture.md (D-042, entrada "Blog")
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 4.3
     Columnas, 8.3 Cards, 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-6). No declara valores independientes de color, tipografía,
   espaciado, borde, sombra, tiempo, easing ni punto de quiebre. Grid de
   tarjetas: Cards se organiza mediante el Grid oficial (13, Cards), sin
   anchos independientes. Retícula uniforme de dos columnas (tercera
   pasada visual): todas las tarjetas comparten el mismo diseño y el
   mismo span (.l-col-6, constante); no existen variantes visuales por
   índice.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.blog-grid {
  padding-block: var(--space-8);
  background-color: var(--color-background-subtle);
}

/* Mismo criterio de ampliación de contenedor que blog-featured.css: token
   --breakpoint-wide (tokens.css, 3.7), scoped a este Pattern. */
.blog-grid__container {
  max-width: var(--breakpoint-wide);
}

/* --------------------------------------------------------------------
   2. Elements — navegación por categorías
   -------------------------------------------------------------------- */
.blog-grid__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.blog-grid__category-link {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: var(--border-width-default) var(--border-style-solid) var(--color-border-default);
  border-radius: var(--border-radius-full);
}

.blog-grid__category-link:hover,
.blog-grid__category-link:focus-visible {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.blog-grid__category-link--active {
  color: var(--color-text-inverse);
  background-color: var(--color-error);
  border-color: var(--color-error);
}

/* --------------------------------------------------------------------
   3. Elements — estado vacío
   -------------------------------------------------------------------- */
.blog-grid__empty {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: clamp(32rem, 44vw, var(--breakpoint-desktop));
}

/* --------------------------------------------------------------------
   4. Elements — Grid de tarjetas
   Diseño único, sin variantes: imagen horizontal dominante arriba,
   categoría, título, excerpt y meta (fecha + tiempo de lectura) debajo,
   misma proporción de imagen, misma jerarquía tipográfica, misma altura
   base y mismo tratamiento de fondo/borde/espaciado en todas las
   tarjetas del listado.
   -------------------------------------------------------------------- */
/* align-self: start anula el estiramiento por defecto de CSS Grid (los
   elementos de una misma fila igualan su altura a la del más alto): con
   diseño uniforme, dos tarjetas de la misma fila ya tienen una altura
   muy similar, pero un título o excerpt más largo en una publicación
   real no debe estirar la imagen de su vecina fuera de su proporción
   (defecto ya detectado y corregido en la pasada visual anterior). */
.blog-grid__card {
  align-self: start;
  background-color: var(--color-background-default);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--elevation-1);
}

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

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

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

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

/* Agrupa categoría, título, excerpt y meta como un único elemento
   flexible debajo de la imagen. */
.blog-grid__card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.blog-grid__card-category {
  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-error);
  margin-block-start: var(--space-4);
  padding-inline: var(--space-4);
}

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

.blog-grid__card-excerpt {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin-block-start: var(--space-2);
  padding-inline: var(--space-4);
}

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

/* --------------------------------------------------------------------
   5. Variants
   Sección reservada: este Pattern ya no define variantes visuales. Las
   cuatro variantes por índice ("dominant"/"horizontal"/"typographic"/
   "compact") de la pasada visual anterior quedaron retiradas; todas las
   tarjetas comparten un único diseño (4, Elements) y un único span
   (.l-col-6, blog-grid.php).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. States
   .blog-grid__category-link--active representa la selección activa del
   filtro; los estados de interacción (Hover, Focus) de los enlaces se
   definen junto a su declaración base (2, Elements).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Motion Hooks
   Sin disparador funcional propio ni JavaScript; el contenido se presenta
   directamente en su estado final.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   8. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de spans (RWD-08,
   layout.css) ya linealiza .l-col-6 en una sola columna de ancho
   completo en Tablet/Mobile: con diseño único y sin span variable, no
   requiere ninguna regla propia adicional (a diferencia de las variantes
   retiradas, 5, que sí necesitaban ajustes específicos por umbral).
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .blog-grid__empty {
    max-width: none;
  }
}