/* ==========================================================================
   casos-archive.css — rejilla de casos + botón "VER MÁS CASOS".
   Frame Figma: PÁGINA CASOS DE EXITO, node 11:149. Depende de tokens.css +
   layout.css. El CSS de la propia tarjeta vive en card-caso.css.

   NOTA: Figma MCP rate-limited al maquetar; los paddings verticales y el gap
   rejilla->botón son estimados (marcados PENDIENTE). Grid y botón usan medidas
   del brief + tokens consolidados (gap 40, botón 313×56 radius 13, fs-21).
   ========================================================================== */

.lfi-casos-archive {
  padding-block: var(--lfi-pad-card);   /* móvil (40) */
}
@media (min-width: 1024px) {
  .lfi-casos-archive {
    padding-top: var(--lfi-casos-pad-top);        /* 69 (Figma) */
    padding-bottom: var(--lfi-casos-pad-bottom);  /* 53 (Figma) */
  }
}

/* Rejilla ----------------------------------------------------------------
   auto-fill + min(100%, col-min): en móvil el mínimo colapsa a 100% (1 columna,
   sin desbordes); a partir de tablet caben 2 columnas. AGUANTA N TARJETAS: no
   hay número de columnas fijo, las tarjetas sobrantes se envuelven en filas. */
.lfi-casos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lfi-casos-col-min)), 1fr));
  gap: var(--lfi-gap-grid);   /* 40px, separación entre tarjetas */
}

/* ==========================================================================
   Botón "VER MÁS CASOS" (rojo 313×56, radius 13), centrado.
   get_next_posts_link() imprime un <a> sin clase propia, así que se estiliza
   por descendencia desde el contenedor .lfi-casos-archive__more.
   ========================================================================== */
.lfi-casos-archive__more {
  display: flex;
  justify-content: center;
  margin-top: var(--lfi-gap-heading);  /* 72px, rejilla -> botón */
}

.lfi-casos-archive__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lfi-btn-height);        /* 56px */
  padding-inline: var(--lfi-btn-pad-x);     /* ~54px -> ancho ~313px */
  border: 0;
  border-radius: var(--lfi-radius-btn);     /* 13px */
  background: var(--lfi-red);
  color: var(--lfi-white);                  /* Figma 18:83: texto blanco Regular 21 */
  font-family: var(--lfi-font);
  font-size: var(--lfi-fs-21);
  font-weight: var(--lfi-weight-regular);
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* HOVER: inversión aprobada rojo -> azul (regla 6). El texto blanco funciona
   sobre ambos fondos. */
.lfi-casos-archive__btn:hover,
.lfi-casos-archive__btn:focus-visible {
  background: var(--lfi-navy);
  color: var(--lfi-white);
}

/* Estado vacío (sin casos publicados todavía) ---------------------------- */
.lfi-casos-archive__empty {
  font-size: var(--lfi-fs-21);
  color: var(--lfi-navy);
}