/* ==========================================================================
   post-single.css — artículo de Actualidad (post nativo).
   Plantilla: single.php · Frame Figma: EJEMPLO ACTUALIDAD, node 11:525.

   Depende de tokens.css + base.css + layout.css.
   Mobile-first: base = móvil; se amplía en @media 768 y 1024 (1024 = réplica
   del Figma a 1440). El Figma solo define desktop; las decisiones móviles son
   propias y van documentadas para defenderlas en revisión (regla 5).

   Estructura del frame (regla 1 — Figma):
     hero full-bleed (~600px) → título ExtraBold 35 navy → cuerpo Regular 23
     navy, interlineado 34. Medida de lectura ~1184px.

   NOTA: al maquetar, el MCP de Figma estaba rate-limited (plan Starter). Los
   valores parten de tokens.css, que se extrajo de ESTE mismo frame. Los
   espaciados internos exactos no verificables en pantalla quedan como PENDIENTE.
   ========================================================================== */

/* ==========================================================================
   ARTÍCULO
   ========================================================================== */
.lfi-post {
  color: var(--lfi-navy);
  background: var(--lfi-white);
}

/* ==========================================================================
   HERO — imagen full-bleed (edge-to-edge). El <article> no tiene padding
   lateral, así que el hero ocupa el 100% del ancho de forma natural.
   ========================================================================== */
.lfi-post__hero {
  width: 100%;
  height: var(--lfi-post-hero-h-mobile);
  overflow: hidden;
  background: var(--lfi-soft);   /* fondo neutro mientras carga */
}

.lfi-post__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* recorta a la altura fija sin deformar */
  object-position: center;
}

/* Placeholder cuando el post aún no tiene imagen destacada (PENDIENTE subirla).
   Navy suave con una banda para que sea evidente que falta contenido. */
.lfi-post__hero--placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      var(--lfi-soft),
      var(--lfi-soft) 20px,
      transparent 20px,
      transparent 40px
    ),
    var(--lfi-soft);
}

/* ==========================================================================
   CONTENEDOR DE LECTURA — más estrecho que el genérico (medida de lectura).
   ~1184px = 1440 - 2×128 (--lfi-content-read / --lfi-gutter-wide).
   ========================================================================== */
.lfi-post__inner {
  width: 100%;
  max-width: var(--lfi-content-read);
  margin-inline: auto;
  padding-inline: var(--lfi-gutter);          /* móvil: gutter estándar */
  padding-top: var(--lfi-post-gap-hero-mobile);
  padding-bottom: var(--lfi-gap-heading);
}

/* ==========================================================================
   CABECERA DEL ARTÍCULO
   ========================================================================== */
.lfi-post__head {
  margin-bottom: var(--lfi-post-gap-head-body);
}

.lfi-post__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);   /* ExtraBold 800 */
  font-size: var(--lfi-fs-28);                /* móvil: reduce el 35 de desktop */
  line-height: var(--lfi-lh-display);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

.lfi-post__date {
  display: block;
  margin-top: var(--lfi-post-gap-title-date);
  font-size: var(--lfi-fs-15);
  font-weight: var(--lfi-weight-semibold);
  letter-spacing: var(--lfi-ls-none);
  color: var(--lfi-navy);
}

/* ==========================================================================
   CUERPO — the_content(). Regular 23 navy, interlineado 34 (--lfi-lh-body).
   Se estilizan los elementos que genera WordPress de forma coherente al Figma.
   ========================================================================== */
.lfi-post__content {
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-23);
  line-height: var(--lfi-lh-body);            /* 34/23 */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

/* Ritmo entre bloques: separación homogénea, sin margen en el primero. */
.lfi-post__content > * + * {
  margin-top: var(--lfi-post-block-space);
}

/* Subtítulos del cuerpo (h2/h3). No aparecen en el frame (solo párrafos), así
   que se derivan de la escala del sistema para mantener coherencia. PENDIENTE
   confirmar tamaños si el cliente introduce subtítulos en los artículos. */
.lfi-post__content h2,
.lfi-post__content h3 {
  font-weight: var(--lfi-weight-extrabold);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}
.lfi-post__content h2 { font-size: var(--lfi-fs-31); }
.lfi-post__content h3 { font-size: var(--lfi-fs-28); }

/* Los encabezados piden más aire arriba que el ritmo base. */
.lfi-post__content > h2 + *,
.lfi-post__content > h3 + * {
  margin-top: var(--lfi-post-heading-mb);
}
.lfi-post__content > * + h2,
.lfi-post__content > * + h3 {
  margin-top: var(--lfi-post-heading-mt);
}

/* Énfasis. La cursiva usa Area Normal Italic (cargada en tokens.css). */
.lfi-post__content strong,
.lfi-post__content b { font-weight: var(--lfi-weight-bold); }
.lfi-post__content em,
.lfi-post__content i { font-style: italic; }

/* Listas: viñeta/numeración navy dentro de la medida de lectura. base.css
   resetea list-style, así que aquí se restaura para el contenido editorial. */
.lfi-post__content ul,
.lfi-post__content ol {
  padding-left: 1.4em;
}
.lfi-post__content ul { list-style: disc; }
.lfi-post__content ol { list-style: decimal; }
.lfi-post__content li + li { margin-top: calc(var(--lfi-post-block-space) / 3); }
.lfi-post__content li::marker { color: var(--lfi-red); }

/* Cita destacada: barra roja de marca + cursiva sobre navy. */
.lfi-post__content blockquote {
  padding-left: var(--lfi-pad-card);
  border-left: 4px solid var(--lfi-red);
  font-style: italic;
}

/* Enlaces en el cuerpo: rojo de marca; al hover invierte a navy (regla 6,
   rojo↔azul). Subrayado siempre para legibilidad/accesibilidad del enlace. */
.lfi-post__content a {
  color: var(--lfi-red);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease;
}
.lfi-post__content a:hover,
.lfi-post__content a:focus-visible {
  color: var(--lfi-navy);
}

/* Imágenes dentro del cuerpo: lazy, sin desbordar, esquinas de marca. */
.lfi-post__content img {
  border-radius: var(--lfi-radius-card);
}
.lfi-post__content figure figcaption {
  margin-top: calc(var(--lfi-post-block-space) / 3);
  font-size: var(--lfi-fs-15);
  color: var(--lfi-navy);
  opacity: 0.7;
}

/* Paginación de artículos multipágina (wp_link_pages). */
.lfi-post__pages {
  margin-top: var(--lfi-post-gap-head-body);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em;
  font-size: var(--lfi-fs-19);
}
.lfi-post__pages a { color: var(--lfi-red); transition: color 0.2s ease; }
.lfi-post__pages a:hover,
.lfi-post__pages a:focus-visible { color: var(--lfi-navy); }

/* ==========================================================================
   BREAKPOINT 768px — tablet
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-post__hero { height: var(--lfi-post-hero-h-tablet); }

  .lfi-post__inner {
    padding-inline: var(--lfi-gutter-narrow);
  }

  /* Título hacia su tamaño de diseño. */
  .lfi-post__title { font-size: var(--lfi-fs-31); }
}

/* ==========================================================================
   BREAKPOINT 1024px — desktop (réplica del Figma a 1440)
   ========================================================================== */
@media (min-width: 1024px) {
  /* Hero a su alto real del Figma (~600px). */
  .lfi-post__hero { height: var(--lfi-post-hero-h); }

  /* Medida de lectura y gutter ancho exactos del frame single. */
  .lfi-post__inner {
    padding-inline: var(--lfi-gutter-wide);   /* 128px */
    padding-top: var(--lfi-post-gap-hero);    /* hero → título */
  }

  /* Título ExtraBold 35 (--lfi-fs-36 consolida 35/36/37). */
  .lfi-post__title { font-size: var(--lfi-fs-36); }
}