/* ==========================================================================
   BLOG HERO — Blog — DIGART Studio
   Pattern: Blog Hero

   Referencia documental:
     docs/002-information-architecture.md (D-042, entrada "Blog")
     project/03-PRODUCT/P-02-FRONTEND.md (4.2 Contenedores, 6 Dirección de
     Arte, 10 Tipografía, 17 Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-full-width, .l-container). No
   declara valores independientes de color, tipografía, espaciado, tiempo,
   easing, z-index, sombra ni punto de quiebre. Misma estructura ya
   certificada en institutional-hero.css, services-hero.css,
   specialties-hero.css y portfolio-hero.css, reutilizada sin variación
   (Reuse Before Creation, G-03 §3.3).
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   Fondo oscuro editorial (mismo Token de fondo inverso ya usado en el
   Hero y en Call To Action de la Home), necesario además para que el
   Header reutilizado (estado transparent, texto/logo en color inverso)
   se lea con contraste suficiente sobre esta sección. padding-block-start
   generoso evita que el título quede oculto bajo el Header fijo
   (position: fixed, header.css). position: relative + overflow: hidden
   encapsulan los gestos decorativos de gran escala (2) dentro de la
   sección, mismo criterio de apilamiento ya remediado en INC-QA-1
   (.hero__container, position: relative).
   -------------------------------------------------------------------- */
.blog-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-background-inverse);
  padding-block-start: calc(var(--space-8) + var(--space-7));
  padding-block-end: calc(var(--space-8) + var(--space-6));
}

/* --------------------------------------------------------------------
   2. Elements — gestos decorativos de gran escala
   Puramente tipográficos, sin recursos nuevos: ".blog-hero__mark" repite
   en escala grande y opacidad reducida la misma palabra ya aprobada del
   eyebrow; ".blog-hero__marker" es un marcador numérico editorial, mismo
   dispositivo ya certificado en institutional-principles.css
   (".institutional-principles__number"). Ambos aria-hidden (3, Elements
   narrativos) y fuera del flujo (position: absolute) para no desplazar el
   contenido real ni el orden de lectura/tabulación.
   -------------------------------------------------------------------- */
.blog-hero__mark {
  position: absolute;
  z-index: 0;
  top: var(--space-6);
  right: var(--space-6);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-inverse);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.blog-hero__marker {
  position: absolute;
  z-index: 1;
  left: var(--space-6);
  bottom: var(--space-6);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--color-error);
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------
   3. Elements narrativos
   -------------------------------------------------------------------- */
.blog-hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: clamp(48rem, 56vw, var(--breakpoint-wide));
}

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

/* Escala --font-size-hero (mismo token ya usado en services-hero.css,
   ".services-hero__title"): mayor peso que el --font-size-h1 genérico de
   institutional-hero/portfolio-hero, coherente con la jerarquía Hero >
   Destacado (ahora h1, blog-featured.css) > tarjetas del Grid. */
.blog-hero__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-inverse);
}

/* Texto de apoyo/excerpt en el color inverso de menor énfasis (overlay,
   no un tono de texto nuevo): mayor contraste tipográfico frente al
   título sólido, sin declarar un valor de opacidad independiente. */
.blog-hero__support-text,
.blog-hero__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-overlay-inverse);
}

.blog-hero__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-overlay-inverse);
}

/* --------------------------------------------------------------------
   4. Variants — Hero del artículo individual
   ".blog-hero--article" (public/articulo.php) añade excerpt y fila de
   metadatos (3) y agranda el marcador numérico (2) a numeración editorial
   protagonista (ordinal de publicación, Etapa 6), en vez del gesto
   tipográfico de palabra repetida que solo aplica al índice.
   -------------------------------------------------------------------- */
.blog-hero--article .blog-hero__marker {
  font-size: var(--font-size-display);
  opacity: 0.35;
  right: var(--space-6);
  left: auto;
  bottom: auto;
  top: var(--space-6);
}

/* --------------------------------------------------------------------
   5. States
   Sección editorial sin elementos interactivos propios; estado base
   (Default) representado por las reglas de Root, Elements y Variants.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Sin disparador funcional propio: esta página no reproduce la cadena de
   eventos narrativos de la Home (P-03), por lo que el contenido se
   presenta directamente en su estado final, sin movimiento de Aparición
   pendiente de un evento inexistente (mismo criterio ya aplicado en
   institutional-hero.css, services-hero.css, specialties-hero.css y
   portfolio-hero.css).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoints oficiales de tokens.css
   reproducidos en valor literal, mismo criterio que layout.css.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .blog-hero {
    padding-block-start: calc(var(--space-7) + var(--space-6));
  }

  .blog-hero__container {
    max-width: none;
  }

  /* El gesto tipográfico de gran escala compite por espacio con el
     título en columnas reducidas (Tablet/Mobile, remapeo RWD-08 ya
     lineariza el contenido a una sola columna angosta): se retira aquí,
     el marcador numérico permanece como único gesto decorativo. */
  .blog-hero__mark {
    display: none;
  }

  .blog-hero--article .blog-hero__marker {
    top: calc(var(--space-6) + var(--space-7));
    font-size: var(--font-size-h1);
    opacity: 0.3;
  }
}