/* ==========================================================================
   BLOG TOPICS — Blog — DIGART Studio
   Pattern: Blog Topics

   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, 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-4,
   .l-col-8). No declara valores independientes de color, tipografía,
   espaciado, borde, sombra, tiempo, easing ni punto de quiebre. Fondo
   oscuro editorial (mismo Token de fondo inverso ya usado en blog-hero y
   en Call To Action de la Home) para diferenciarse del Grid inmediato
   anterior (fondo subtle) y del Call To Action global siguiente.
   ========================================================================== */

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

/* Mismo criterio de ampliación de contenedor que blog-featured.css/
   blog-grid.css: token --breakpoint-wide (tokens.css, 3.7), scoped a
   este Pattern, alineando su ancho editorial con el resto de la portada. */
.blog-topics__container {
  max-width: var(--breakpoint-wide);
}

/* --------------------------------------------------------------------
   2. Elements — introducción
   -------------------------------------------------------------------- */
.blog-topics__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.blog-topics__eyebrow {
  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);
}

.blog-topics__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-inverse);
}

.blog-topics__all-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-inverse);
  margin-block-start: var(--space-2);
}

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

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

/* --------------------------------------------------------------------
   3. Elements — lista de categorías
   Segunda pasada visual: lista editorial de filas completas (antes,
   cuadrícula 2x2 de cajas con apariencia de botones genéricos), separadas
   por un borde inferior sutil, con numeración ordinal derivada de la
   posición de cada categoría (mismo dispositivo tipográfico que
   blog-hero/blog-featured/blog-article__toc).
   -------------------------------------------------------------------- */
.blog-topics__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  border-block-start: var(--border-width-default) var(--border-style-solid) var(--color-border-strong);
}

.blog-topics__item {
  border-block-end: var(--border-width-default) var(--border-style-solid) var(--color-border-strong);
}

.blog-topics__link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5);
}

.blog-topics__link-number {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--color-error);
  opacity: 0.6;
}

.blog-topics__link-label {
  flex: 1;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-inverse);
}

.blog-topics__link-icon {
  font-size: var(--font-size-h4);
  color: var(--color-text-inverse);
  transition: var(--motion-transition-default);
}

.blog-topics__link:hover .blog-topics__link-label,
.blog-topics__link:focus-visible .blog-topics__link-label,
.blog-topics__link:hover .blog-topics__link-icon,
.blog-topics__link:focus-visible .blog-topics__link-icon {
  color: var(--color-error);
}

.blog-topics__link:hover .blog-topics__link-icon,
.blog-topics__link:focus-visible .blog-topics__link-icon {
  transform: translateX(var(--space-2));
}

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

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

/* --------------------------------------------------------------------
   5. States
   Hover/Focus de los enlaces definidos junto a su declaración base (2, 3).
   -------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de spans (RWD-08,
   layout.css) ya linealiza .l-col-4/.l-col-8 en una sola columna de ancho
   completo; la lista de categorías (3) pasa a una sola columna en ese
   mismo umbral, porque dos columnas de enlaces angostos pierden la
   legibilidad que la cuadrícula ofrece en Desktop.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .blog-topics__list {
    grid-template-columns: 1fr;
  }
}