/* ==========================================================================
   card-caso.css — tarjeta de CASO DE ÉXITO (usada en archive-caso_exito.php).
   Marcado: template-parts/cards/card-caso.php. Depende de tokens.css.
   Frame Figma: tarjeta de caso 594×594, radius 24, dentro del frame 11:149.

   Specs del brief: tarjeta 594×594 radius 24 · imagen 310 arriba · título
   ExtraBold 23 uppercase navy · testimonio Regular Italic 21 · "VER MÁS" rojo.

   NOTA: Figma MCP rate-limited al maquetar; el padding interno (--lfi-pad-card)
   y el gap entre bloques de texto se toman de tokens/estimación (marcado). El
   fondo usa --lfi-soft (navy 5%), documentado en tokens como fondo de tarjetas
   de casos.
   ========================================================================== */

.lfi-caso-card {
  background: var(--lfi-soft);
  border-radius: var(--lfi-radius-card);   /* 24px */
  overflow: hidden;
  height: 100%;                            /* iguala altura entre columnas de la rejilla */
}

/* La tarjeta entera es un enlace: se dispone en columna para empujar
   "VER MÁS" al fondo con margin-top:auto. */
.lfi-caso-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--lfi-navy);
}

/* Panel de marca (310 sobre 594, radius solo arriba por el overflow:hidden).
   Los assets de cliente son paneles compuestos (logo sobre su color), así que
   la imagen llena el panel a sangre (object-cover), como el Figma (11:149). El
   texto de respaldo se apila en la misma celda con grid. Mismo patrón que la
   tarjeta del HOME (.lfi-caso-home-card__media). */
.lfi-caso-card__media {
  width: 100%;
  aspect-ratio: 594 / 310;   /* proporción del panel del Figma */
  background: var(--lfi-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lfi-caso-card__logo {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Respaldo sin logo (p. ej. José María Tejera): tipo_operacion como texto. */
.lfi-caso-card__fallback {
  grid-area: 1 / 1;
  padding: var(--lfi-pad-card);
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-23);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  text-align: center;
  color: var(--lfi-navy);
}
.lfi-caso-card__media.is-dark .lfi-caso-card__fallback {
  color: var(--lfi-white);
}

/* Cuerpo ----------------------------------------------------------------- */
.lfi-caso-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--lfi-casos-card-gap);
  padding: var(--lfi-pad-card);   /* 40px */
}

/* Título del caso (tipo_operacion, en mayúsculas) ------------------------ */
.lfi-caso-card__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-23);           /* 23px */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  color: var(--lfi-navy);
}

/* Testimonio (cita, cursiva) --------------------------------------------- */
.lfi-caso-card__quote {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-style: italic;
  font-size: var(--lfi-fs-21);           /* 21px */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

/* Enlace "VER MÁS" (rojo), anclado al fondo de la tarjeta ---------------- */
.lfi-caso-card__more {
  margin-top: auto;
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-23);           /* Figma 16:11: Regular 23, rojo */
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  color: var(--lfi-red);
  transition: color 0.2s ease;
}

/* HOVER: al pasar por la tarjeta, "VER MÁS" invierte rojo -> azul (regla 6). */
.lfi-caso-card__link:hover .lfi-caso-card__more,
.lfi-caso-card__link:focus-visible .lfi-caso-card__more {
  color: var(--lfi-navy);
}