/* ==========================================================================
   1. HERO full-bleed
   Es hijo directo de <main> (sin max-width), así que ocupa el 100% del ancho
   sin trucos de 100vw. Placeholder hasta recibir el asset (ver home.php).
   ========================================================================== */
.lfi-actualidad-hero {
  width: 100%;
  height: var(--lfi-actualidad-hero-h-mobile);
  background: var(--lfi-soft);          /* placeholder navy 5% */
}
.lfi-actualidad-hero__img {            /* clase para el <img> real cuando llegue */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   2. SECCIÓN (título + rejilla + botón)
   ========================================================================== */
.lfi-actualidad-archive {
  /* Ritmo vertical: menor en móvil, completo en desktop (regla 3). */
  padding-block: var(--lfi-gap-grid);   /* 40px móvil */
}

/* Cabecera con el H1 --------------------------------------------------------
   Título "ACTUALIDAD LFI": ExtraBold 40 rojo, mayúsculas. */
.lfi-actualidad-archive__head {
  margin-bottom: var(--lfi-gap-grid);   /* 40px móvil; 72px en desktop */
}
.lfi-actualidad-archive__title {
  font-size: var(--lfi-fs-30);          /* móvil: se reduce; desktop -> 40 */
  font-weight: var(--lfi-weight-extrabold);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-red);
  text-transform: uppercase;
}

/* ==========================================================================
   3. REJILLA DE POSTS
   Mobile-first: 1 columna. La tarjeta ocupa siempre un track (nunca se estira
   a todo el ancho de la fila), así el archivo se ve bien con N = 1..N posts
   (sale a producción con UN solo artículo).
   ========================================================================== */
.lfi-posts-grid {
  display: grid;
  grid-template-columns: 1fr;           /* móvil: 1 columna */
  gap: var(--lfi-gap-grid);             /* 40px */
  align-items: stretch;                 /* iguala la altura de las tarjetas */
}

/* ==========================================================================
   4. BOTÓN "VER MÁS POSTS" (solo si hay página siguiente; ver home.php)
   Rojo 313×56, radius 13. Texto blanco. Centrado bajo la rejilla.
   ========================================================================== */
.lfi-actualidad-archive__more {
  display: flex;
  justify-content: center;
  margin-top: var(--lfi-gap-grid);      /* 40px móvil; 72px desktop */
}
.lfi-actualidad-archive__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lfi-btn-min-w);      /* 313px */
  height: var(--lfi-btn-height);        /* 56px */
  padding-inline: var(--lfi-btn-pad-x); /* 54px */
  border: 0;
  border-radius: var(--lfi-radius-btn); /* 13px */
  background: var(--lfi-red);
  color: var(--lfi-white);                /* Figma: texto blanco Regular 21 */
  font-family: var(--lfi-font);         /* los <button> no heredan la fuente */
  cursor: pointer;
  font-size: var(--lfi-fs-21);
  font-weight: var(--lfi-weight-regular);
  letter-spacing: var(--lfi-ls-tight);
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* HOVER: botón rojo -> azul (regla de interacción aprobada). Texto blanco en
   ambos estados (contraste AA sobre rojo y sobre navy). */
.lfi-actualidad-archive__btn:hover,
.lfi-actualidad-archive__btn:focus-visible {
  background: var(--lfi-navy);
  color: var(--lfi-white);
}

/* Estado vacío ----------------------------------------------------------- */
.lfi-actualidad-archive__empty {
  font-size: var(--lfi-fs-19);
  color: var(--lfi-navy);
}

/* ==========================================================================
   BREAKPOINT 768px — tablet: 2 columnas
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   BREAKPOINT 1024px — desktop (réplica del Figma a 1440): 3 columnas
   ========================================================================== */
@media (min-width: 1024px) {
  .lfi-actualidad-hero { height: var(--lfi-actualidad-hero-h); } /* 602px */

  .lfi-actualidad-archive { padding-block: var(--lfi-gap-heading); } /* 72px */
  .lfi-actualidad-archive__head { margin-bottom: var(--lfi-gap-heading); }
  .lfi-actualidad-archive__title { font-size: var(--lfi-fs-40); }

  .lfi-posts-grid { grid-template-columns: repeat(3, 1fr); }

  .lfi-actualidad-archive__more { margin-top: var(--lfi-gap-heading); }
}