/* ==========================================================================
   actualidad-home.css — teaser "Actualidad" del HOME.
   Frame Figma: node 11:17, fondo blanco, 792px.
   Depende de tokens.css + layout.css. La tarjeta vive en card-post.css.

   Titular "ACTUALIDAD LFI" (ExtraBold fs-40, ROJO) + rejilla de posts (3 col
   desktop). DEBE verse bien con UN SOLO post -> auto-fit acotado para que un
   único item no se estire (misma lógica que actualidad-archive.css).

   ESPACIADOS MEDIDOS (frame 11:17): aire sup 96 / inf 87, titular→rejilla 43.
   Alto 792 como referencia.
   ========================================================================== */

.lfi-actualidad-home {
  background: var(--lfi-white);
  color: var(--lfi-navy);
}
.lfi-actualidad-home .lfi-container {
  padding-top: var(--lfi-actualidad-home-pad-top);       /* 96px (Figma) */
  padding-bottom: var(--lfi-actualidad-home-pad-bottom); /* 87px (Figma) */
}

/* Titular rojo ------------------------------------------------------------ */
.lfi-actualidad-home__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-40);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  color: var(--lfi-red);
  margin-bottom: var(--lfi-actualidad-home-title-gap);   /* 43px título -> rejilla (Figma) */
}

/* Rejilla de posts -------------------------------------------------------
   auto-FILL (no auto-fit): así un único post NO se estira a todo el ancho, se
   queda en su columna (~360px) alineado a la izquierda, como pide el brief
   ("verse bien con un solo artículo"). En móvil el min(100%,…) colapsa a 1
   columna; en desktop se reparten hasta 3 columnas (3×360+2×40 = 1160 < 1224). */
.lfi-actualidad-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lfi-actualidad-home-col-min)), 1fr));
  gap: var(--lfi-gap-grid);   /* 40px */
}

/* ==========================================================================
   DECISIÓN MÓVIL: la rejilla colapsa a 1 columna (minmax -> 100%). Titular
   reducido. Mobile-first: escala al tamaño del Figma en desktop.
   ========================================================================== */
.lfi-actualidad-home__title { font-size: var(--lfi-fs-30); }  /* móvil */

@media (min-width: 768px) {
  .lfi-actualidad-home__title { font-size: var(--lfi-fs-36); }
}
@media (min-width: 1024px) {
  .lfi-actualidad-home__title { font-size: var(--lfi-fs-40); }  /* réplica Figma */
}