/* ==========================================================================
   card-post.css — TARJETA DE POST (Actualidad).
   Componente reutilizable: archivo Actualidad (home.php) y sección Actualidad
   del home. Marcado en template-parts/cards/card-post.php (NO editable aquí).
   Frame Figma: tarjeta de actualidad (399×521, radius 24, imagen 256).

   Depende de tokens.css + base.css. Mobile-first.
   La altura NO se fija: las tarjetas se igualan por el `stretch` de la rejilla
   contenedora y el pie (VER MÁS + fecha) se ancla abajo con una fila 1fr.

   NOTA: algunas medidas finas no se han podido re-verificar contra el Figma
   (MCP rate-limited). Se usan tokens existentes y los propuestos de abajo.
   ========================================================================== */

/* Tarjeta ----------------------------------------------------------------- */
.lfi-post-card {
  height: 100%;                 /* rellena la altura del track de la rejilla */
}

.lfi-post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--lfi-soft);          /* navy 5% — fondo de tarjeta (tokens) */
  border-radius: var(--lfi-radius-card);/* 24px */
  overflow: hidden;                     /* recorta la imagen a las esquinas */
  color: var(--lfi-navy);
}

/* Imagen ------------------------------------------------------------------ */
.lfi-post-card__media {
  aspect-ratio: 399 / 256;              /* proporción de la miniatura del Figma */
  background: var(--lfi-soft);
}
.lfi-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cuerpo ------------------------------------------------------------------ */
/* Rejilla interna: 2 columnas (contenido | fecha) y 4 filas. La fila del
   extracto (3ª) es 1fr para empujar el pie (VER MÁS + fecha) al fondo. */
.lfi-post-card__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--lfi-card-post-gap);
  row-gap: var(--lfi-card-post-gap);
  padding: var(--lfi-pad-card);         /* 40px (unificado en tokens; el Figma
                                           de actualidad rondaba 33) */
}

/* Etiqueta de categoría — SemiBold 15 rojo, mayúsculas */
.lfi-post-card__cat {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: var(--lfi-fs-15);
  font-weight: var(--lfi-weight-semibold);
  letter-spacing: var(--lfi-ls-none);
  color: var(--lfi-red);
  text-transform: uppercase;
}

/* Título — ExtraBold 19 navy */
.lfi-post-card__title {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--lfi-fs-19);
  font-weight: var(--lfi-weight-extrabold);
  line-height: var(--lfi-lh-snug);      /* 1.16 (22/19 del Figma) */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

/* Extracto — Regular 14. Fila 1fr: ocupa el hueco y ancla el pie abajo. */
.lfi-post-card__excerpt {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: var(--lfi-fs-14);
  font-weight: var(--lfi-weight-regular);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

/* Pie: "VER MÁS" (rojo 17) a la izquierda, fecha (Regular 14) a la derecha. */
.lfi-post-card__more {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  font-size: var(--lfi-fs-17);
  font-weight: var(--lfi-weight-regular);
  color: var(--lfi-red);
  transition: color 0.2s ease;
}

.lfi-post-card__date {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  justify-self: end;
  font-size: var(--lfi-fs-14);
  font-weight: var(--lfi-weight-regular);
  color: var(--lfi-navy);
  white-space: nowrap;
}

/* HOVER: la tarjeta es un enlace. El acento accionable "VER MÁS" invierte
   rojo -> azul (regla de interacción aprobada). */
.lfi-post-card__link:hover .lfi-post-card__more,
.lfi-post-card__link:focus-visible .lfi-post-card__more {
  color: var(--lfi-navy);
}