/* ============================================================
   Interlaken® · Componente · Card de caso
   La unidad atómica de la biblioteca de casos. Cada card es
   evidencia: cliente real + sector + métrica de impacto +
   unidad ejecutora.

   Diferencias clave con card-producto:
   · Card-producto vende servicio futuro (duración, precio, formato)
   · Card-caso muestra trabajo pasado (sector, año, resultado)
   · El resultado/métrica es elemento prominente — es la prueba
     social que convierte navegantes en leads
   · El badge de unidad aparece siempre (en producto era opcional)

   Estructura: media (foto/placeholder) + body (sector, título,
   resultado, descripción) + arrow.

   Sprint 2.E Lote 2 del rediseño · 25 abril 2026.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1 · Container del listado
   La biblioteca de casos se visualiza en grid responsivo.
   1 col mobile · 2 cols tablet · 3 cols desktop.
   ──────────────────────────────────────────────────────────── */

.ilk-casos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ilk-space-5);
}

@media (min-width: 640px) {
  .ilk-casos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ilk-space-5);
  }
}

@media (min-width: 1024px) {
  .ilk-casos {
    grid-template-columns: repeat(var(--ilk-casos-cols, 3), 1fr);
    gap: var(--ilk-space-6);
  }
}

@media (min-width: 1440px) {
  .ilk-casos {
    gap: var(--ilk-space-8);
  }
}

/* ────────────────────────────────────────────────────────────
   2 · Card individual — base
   Tokens locales sobrescritos por variante de unidad.
   ──────────────────────────────────────────────────────────── */

.ilk-card-caso {
  --card-bg:           var(--ilk-bg-1);
  --card-border:       var(--ilk-border);
  --card-border-hover: var(--ilk-orange);
  --card-text:         var(--ilk-fg-1);
  --card-text-muted:   var(--ilk-fg-2);
  --card-sector:       var(--ilk-fg-2);
  --card-resultado:    var(--ilk-fg-1);
  --card-accent:       var(--ilk-orange);

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--ilk-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--card-text);
  isolation: isolate;
  transition: transform var(--ilk-transition),
              box-shadow var(--ilk-transition),
              border-color var(--ilk-transition);
}

.ilk-card-caso:hover,
.ilk-card-caso:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ilk-shadow-md);
  border-color: var(--card-border-hover);
}

/* ────────────────────────────────────────────────────────────
   3 · Media — zona de imagen
   Aspect ratio 16:9 por default — más editorial que 4:3 porque
   los casos suelen ser fotografía documental amplia (escenas
   de equipo, oficina del cliente, talleres en vivo).
   ──────────────────────────────────────────────────────────── */

.ilk-card-caso__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ilk-gray-light);
  margin: 0;
}

.ilk-card-caso--media-square .ilk-card-caso__media {
  aspect-ratio: 1 / 1;
}

.ilk-card-caso--media-portrait .ilk-card-caso__media {
  aspect-ratio: 3 / 4;
}

.ilk-card-caso__media img,
.ilk-card-caso__media picture,
.ilk-card-caso__media picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ilk-card-media-position, center);
  transition: transform 600ms ease-out;
}

/* Hover: zoom sutil */
.ilk-card-caso:hover .ilk-card-caso__media img,
.ilk-card-caso:focus-visible .ilk-card-caso__media img {
  transform: scale(1.06);
}

/* Placeholder cromático cuando no hay foto */
.ilk-card-caso__media--placeholder {
  background: var(--ilk-card-placeholder, linear-gradient(135deg, #999 0%, #555 100%));
}

/* Badge de unidad — siempre presente en card-caso
   Identifica de un vistazo qué unidad ejecutó el caso. Útil para
   navegación lateral con filtros y para construcción de marca de
   cada unidad. */
.ilk-card-caso__badge {
  position: absolute;
  top: var(--ilk-space-3);
  left: var(--ilk-space-3);
  padding: var(--ilk-space-1) var(--ilk-space-3);
  background: rgba(13, 13, 13, 0.78);
  color: var(--ilk-fg-inverse);
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-medium);
  border-radius: var(--ilk-radius-full);
  letter-spacing: 0.01em;
  z-index: 2;
  backdrop-filter: blur(4px);
}

/* ────────────────────────────────────────────────────────────
   4 · Body — zona de contenido
   Stack vertical con jerarquía clara:
   · sector (eyebrow)
   · título (cliente / descripción del caso)
   · resultado (la métrica destacada)
   · descripción (contexto narrativo)
   ──────────────────────────────────────────────────────────── */

.ilk-card-caso__body {
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-3);
  padding: var(--ilk-space-5);
  flex: 1;
}

@media (min-width: 768px) {
  .ilk-card-caso__body {
    padding: var(--ilk-space-6);
    gap: var(--ilk-space-3);
  }
}

/* Sector — eyebrow con sector y/o año del caso */
.ilk-card-caso__sector {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-medium);
  color: var(--card-sector);
  letter-spacing: 0.01em;
  margin: 0;
}

/* Título — generalmente "Cliente · descripción del caso" */
.ilk-card-caso__title {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-lg);
  font-weight: var(--ilk-fw-medium);
  line-height: var(--ilk-lh-tight);
  letter-spacing: var(--ilk-tracking-tight);
  color: var(--card-text);
  margin: 0;
}

@media (min-width: 768px) {
  .ilk-card-caso__title {
    font-size: var(--ilk-fs-xl);
  }
}

/* Resultado — la métrica destacada
   Tratamiento visual diferenciado: peso medium, color con
   acento de la unidad, line-height tight. Es lo segundo que
   el ojo lee después del título — la prueba social. */
.ilk-card-caso__resultado {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-md);
  font-weight: var(--ilk-fw-medium);
  line-height: var(--ilk-lh-snug);
  color: var(--card-resultado);
  margin: 0;
  padding: var(--ilk-space-3) 0;
  border-top: 1px solid var(--ilk-border);
  border-bottom: 1px solid var(--ilk-border);
}

@media (min-width: 768px) {
  .ilk-card-caso__resultado {
    font-size: var(--ilk-fs-lg);
  }
}

/* Si el resultado tiene una métrica numérica destacada (ej: "+34%"),
   se envuelve en <strong> para acentuarla con el color de la unidad. */
.ilk-card-caso__resultado strong {
  color: var(--card-accent);
  font-weight: var(--ilk-fw-bold);
}

/* Descripción — contexto narrativo del caso
   Default 3 líneas (mismo criterio que card-producto: balance entre
   sustancia comercial y disciplina visual). Modificadores ajustables. */
.ilk-card-caso__desc {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-sm);
  font-weight: var(--ilk-fw-light);
  line-height: var(--ilk-lh-relaxed);
  color: var(--card-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ilk-card-caso--clamp-4 .ilk-card-caso__desc {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.ilk-card-caso--clamp-6 .ilk-card-caso__desc {
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

.ilk-card-caso--no-clamp .ilk-card-caso__desc {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* ────────────────────────────────────────────────────────────
   5 · Arrow indicator — esquina inferior derecha
   ──────────────────────────────────────────────────────────── */

.ilk-card-caso__arrow {
  position: absolute;
  bottom: var(--ilk-space-5);
  right: var(--ilk-space-5);
  font-size: var(--ilk-fs-md);
  color: var(--card-accent);
  line-height: 1;
  transition: transform var(--ilk-transition);
  z-index: 2;
}

@media (min-width: 768px) {
  .ilk-card-caso__arrow {
    bottom: var(--ilk-space-6);
    right: var(--ilk-space-6);
    font-size: var(--ilk-fs-lg);
  }
}

.ilk-card-caso:hover .ilk-card-caso__arrow,
.ilk-card-caso:focus-visible .ilk-card-caso__arrow {
  transform: translateX(4px);
}

/* ────────────────────────────────────────────────────────────
   6 · Variantes por unidad — paleta y accent
   El color del badge sigue siendo neutro translúcido para
   coherencia visual con foto. El accent del resultado y el arrow
   sí adopta el color de la unidad.
   ──────────────────────────────────────────────────────────── */

.ilk-card-caso--groundwork {
  --card-sector:    var(--ilk-fg-2);
  --card-accent:    var(--ilk-orange);
}

.ilk-card-caso--bridgework {
  --card-sector:       var(--ilk-bridgework-mid);
  --card-accent:       var(--ilk-bridgework-mid);
  --card-border-hover: var(--ilk-bridgework-mid);
}

.ilk-card-caso--fieldwork {
  --card-sector:       var(--ilk-fieldwork-accent);
  --card-accent:       var(--ilk-fieldwork-mid);
  --card-border-hover: var(--ilk-fieldwork-mid);
}

.ilk-card-caso--academy {
  --card-sector:       var(--ilk-academy-accent);
  --card-accent:       var(--ilk-academy-mid);
  --card-border-hover: var(--ilk-academy-mid);
}

.ilk-card-caso--responsework {
  --card-sector:    var(--ilk-fg-2);
  --card-accent:    var(--ilk-orange);
}

.ilk-card-caso--campamentos {
  --card-sector:    var(--ilk-fg-2);
  --card-accent:    var(--ilk-orange);
}

/* ────────────────────────────────────────────────────────────
   7 · Variante destacada (featured)
   Para el caso del mes o caso insignia de una página de unidad.
   Imagen al lado izquierdo, body con padding generoso, tipografías
   un escalón mayores. En mobile mantiene stack vertical.
   ──────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .ilk-card-caso--featured {
    grid-column: span 2;
    flex-direction: row;
  }

  .ilk-card-caso--featured .ilk-card-caso__media {
    flex: 0 0 50%;
    aspect-ratio: auto;
    min-height: 100%;
  }

  .ilk-card-caso--featured .ilk-card-caso__body {
    flex: 1;
    padding: var(--ilk-space-8) var(--ilk-space-8) var(--ilk-space-8) var(--ilk-space-10);
    gap: var(--ilk-space-4);
  }

  .ilk-card-caso--featured .ilk-card-caso__title {
    font-size: var(--ilk-fs-2xl);
  }

  .ilk-card-caso--featured .ilk-card-caso__resultado {
    font-size: var(--ilk-fs-xl);
    padding: var(--ilk-space-4) 0;
  }

  /* En featured el descriptor tiene más aire */
  .ilk-card-caso--featured .ilk-card-caso__desc {
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }

  .ilk-card-caso--featured .ilk-card-caso__arrow {
    bottom: var(--ilk-space-8);
    right: var(--ilk-space-8);
  }
}

@media (min-width: 1024px) {
  .ilk-card-caso--featured .ilk-card-caso__body {
    padding: var(--ilk-space-10) var(--ilk-space-10) var(--ilk-space-8) var(--ilk-space-12);
  }
}

/* ────────────────────────────────────────────────────────────
   8 · Variante horizontal — listado denso
   Para vista de "tabla" en biblioteca de casos cuando el usuario
   ya filtró y quiere ver más casos por scroll. Imagen al lado
   en formato más compacto.
   ──────────────────────────────────────────────────────────── */

.ilk-card-caso--horizontal {
  flex-direction: row;
  align-items: stretch;
  min-height: 140px;
}

.ilk-card-caso--horizontal .ilk-card-caso__media {
  flex: 0 0 35%;
  aspect-ratio: auto;
}

.ilk-card-caso--horizontal .ilk-card-caso__body {
  padding: var(--ilk-space-4) var(--ilk-space-5);
  gap: var(--ilk-space-2);
}

.ilk-card-caso--horizontal .ilk-card-caso__title {
  font-size: var(--ilk-fs-md);
}

.ilk-card-caso--horizontal .ilk-card-caso__resultado {
  font-size: var(--ilk-fs-sm);
  padding: var(--ilk-space-2) 0;
}

.ilk-card-caso--horizontal .ilk-card-caso__desc {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--ilk-fs-xs);
}

.ilk-card-caso--horizontal .ilk-card-caso__arrow {
  bottom: var(--ilk-space-4);
  right: var(--ilk-space-5);
  font-size: var(--ilk-fs-md);
}

@media (min-width: 768px) {
  .ilk-card-caso--horizontal .ilk-card-caso__media {
    flex: 0 0 30%;
  }

  .ilk-card-caso--horizontal .ilk-card-caso__body {
    padding: var(--ilk-space-5) var(--ilk-space-6);
  }

  .ilk-card-caso--horizontal .ilk-card-caso__title {
    font-size: var(--ilk-fs-lg);
  }
}

/* En grid horizontal ocupa el ancho completo (no entra en columnas) */
.ilk-casos--horizontal {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .ilk-casos--horizontal {
    grid-template-columns: 1fr;
  }
}