/* ==========================================================================
   BLOG FEATURED — Blog — DIGART Studio
   Pattern: Blog Featured

   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-5/.l-col-7). No declara valores independientes de color,
   tipografía, espaciado, borde, sombra, tiempo, easing ni punto de
   quiebre. Mismo criterio de área de montaje fotográfico ya certificado
   en services-directory.css y specialties-sectors.css (Reuse Before
   Creation, G-03 §3.3).
   ========================================================================== */

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

/* Amplía el contenedor editorial de esta sección más allá del ancho de
   lectura genérico (--breakpoint-desktop, layout.css): reutiliza el
   token --breakpoint-wide ya declarado en tokens.css (3.7), sin tocar
   Foundations ni layout.css — misma especificidad que ".l-container"
   (una clase), pero cargada después en la cascada (Patterns tras
   Foundations), por lo que prevalece solo dentro de esta sección. */
.blog-featured__container {
  max-width: var(--breakpoint-wide);
}

.blog-featured__row {
  align-items: center;
}

/* --------------------------------------------------------------------
   2. Elements — área de montaje fotográfico
   position: relative encapsula el marcador numérico editorial (Etapa 5)
   sin afectar el flujo del resto de la tarjeta.
   -------------------------------------------------------------------- */
.blog-featured__visual {
  position: relative;
}

/* Aspect-ratio más cuadrada (antes 4/3): mayor presencia vertical de la
   fotografía, más cercana a la proporción del mockup aprobado. */
.blog-featured__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface-subtle);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

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

/* --------------------------------------------------------------------
   3. Elements — contenido
   El marcador editorial ("02") vive dentro del flujo de contenido, junto
   al eyebrow, en vez de flotar sobre la fotografía sin relación textual
   directa (defecto detectado en la validación visual de la primera
   pasada): mismo dispositivo tipográfico que blog-hero/blog-grid, ahora
   leído junto a la categoría como continuación editorial del "01" del
   Hero.
   -------------------------------------------------------------------- */
.blog-featured__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.blog-featured__eyebrow-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.blog-featured__marker {
  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.5;
}

.blog-featured__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-featured__title {
  margin-block: 0;
}

/* Escala h1 (antes h2): la sección destacada, ahora en un contenedor más
   ancho (--breakpoint-wide), gana la jerarquía tipográfica de mayor peso
   del sistema tras el Hero, para leerse como portada editorial y no como
   una tarjeta estándar ampliada. */
.blog-featured__title-link {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

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

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

.blog-featured__meta {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
}

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

/* --------------------------------------------------------------------
   5. States
   Estados de interacción (Hover, Focus) del enlace de título definidos
   junto a su declaración base (3, Elements). El Componente Button
   consume sus propios estados oficiales (button.css).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. 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.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de spans (RWD-08,
   layout.css) ya linealiza .l-col-5/.l-col-7 en una sola columna de
   ancho completo; el marcador, ahora en el flujo normal de contenido (3),
   no requiere ningún ajuste propio en Tablet/Mobile.
   -------------------------------------------------------------------- */