/* ============================================================
   Interlaken® · Componente · Card de producto
   La unidad atómica de los catálogos editoriales:
   · Programas Academy
   · Sabores Fieldwork (Suesca, expediciones, talleres)
   · Escuelas Bridgework (cultura, liderazgo)
   · Intervenciones Groundwork (estrategia, modelo organizacional)
   · Servicios Responsework (bienestar, salud, propósito)
   · Experiencias Campamentos de Aventura

   Estructura: media (foto) arriba + body (texto) abajo + arrow.
   La foto es norma — los productos sin foto son excepción y se
   tratan con un placeholder cromático de su paleta.

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

/* ────────────────────────────────────────────────────────────
   1 · Container del catálogo
   El grid se ajusta al contenido: 1 col mobile, 2 cols tablet,
   3 cols desktop, hasta 4 cols en wide para listados densos.
   El consumidor decide la densidad con --ilk-productos-cols.
   ──────────────────────────────────────────────────────────── */

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

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

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

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

/* Variante densa para listados de muchos productos (ej. catálogo
   completo de sabores Fieldwork) — fuerza 4 columnas en desktop. */
.ilk-productos--densa {
  --ilk-productos-cols: 4;
}

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

.ilk-card-producto {
  --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-eyebrow:      var(--ilk-fg-2);
  --card-accent:       var(--ilk-orange);
  --card-meta-bg:      transparent;

  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-producto:hover,
.ilk-card-producto:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ilk-shadow-md);
  border-color: var(--card-border-hover);
}

/* ────────────────────────────────────────────────────────────
   3 · Media — zona de imagen
   Aspect ratio bloqueado para garantizar grilla pareja entre
   cards de distinta densidad de texto. Por default 4:3 (formato
   editorial cálido); 16:9 disponible vía modificador.
   ──────────────────────────────────────────────────────────── */

.ilk-card-producto__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ilk-gray-light);  /* fallback durante carga */
  margin: 0;
}

.ilk-card-producto--media-wide .ilk-card-producto__media {
  aspect-ratio: 16 / 9;
}

.ilk-card-producto--media-square .ilk-card-producto__media {
  aspect-ratio: 1 / 1;
}

.ilk-card-producto__media img,
.ilk-card-producto__media picture,
.ilk-card-producto__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 de la imagen */
.ilk-card-producto:hover .ilk-card-producto__media img,
.ilk-card-producto:focus-visible .ilk-card-producto__media img {
  transform: scale(1.06);
}

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

/* Badge de unidad opcional sobre la imagen — esquina superior
   izquierda, fondo translúcido, texto blanco. Útil cuando el
   catálogo es transversal (ej. página de casos). */
.ilk-card-producto__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 padding generoso y altura mínima para
   garantizar que cards adyacentes en la grilla queden parejas.
   ──────────────────────────────────────────────────────────── */

.ilk-card-producto__body {
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-3);
  padding: var(--ilk-space-5);
  flex: 1;  /* empuja arrow al pie cuando body es flexible */
}

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

/* Eyebrow — categoría o tipo de producto */
.ilk-card-producto__eyebrow {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-medium);
  color: var(--card-eyebrow);
  letter-spacing: 0.01em;
  margin: 0;
}

/* Titular — nombre del producto */
.ilk-card-producto__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-producto__title {
    font-size: var(--ilk-fs-xl);
  }
}

/* Descriptor — frase breve que explica qué es, para quién y qué resuelve.
   Default a 4 líneas para dar espacio comercial decente. Modificadores
   --clamp-3 / --clamp-6 / --no-clamp ajustan según contexto editorial. */
.ilk-card-producto__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: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Modificadores de truncamiento del descriptor — uso explícito según el
   contexto editorial: grilla densa de listado, featured con explicación
   amplia, página individual sin truncamiento. */
.ilk-card-producto--clamp-3 .ilk-card-producto__desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.ilk-card-producto--clamp-6 .ilk-card-producto__desc {
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

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

/* ────────────────────────────────────────────────────────────
   5 · Meta — banda inferior con datos transaccionales
   Duración, formato, precio, audiencia. Diseñada para escanearse
   rápido. Separador sutil del body cuando hay densidad alta.
   ──────────────────────────────────────────────────────────── */

.ilk-card-producto__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ilk-space-2) var(--ilk-space-3);
  margin-top: auto;
  padding-top: var(--ilk-space-4);
  border-top: 1px solid var(--ilk-border);
}

.ilk-card-producto__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ilk-space-1);
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-light);
  color: var(--card-text-muted);
}

/* El primer item con peso medio si funciona como dato principal
   (precio, duración destacada). Aplica con --primary modifier. */
.ilk-card-producto__meta-item--primary {
  font-weight: var(--ilk-fw-medium);
  color: var(--card-text);
}

/* Separador entre items — punto medio sutil */
.ilk-card-producto__meta-item + .ilk-card-producto__meta-item::before {
  content: "·";
  margin-right: var(--ilk-space-2);
  color: var(--ilk-gray-mid);
}

/* ────────────────────────────────────────────────────────────
   6 · Arrow indicator
   En esquina inferior derecha del body, alineado con la línea
   de meta. Discreto pero presente — la card entera es un link.
   ──────────────────────────────────────────────────────────── */

.ilk-card-producto__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-producto__arrow {
    bottom: var(--ilk-space-6);
    right: var(--ilk-space-6);
    font-size: var(--ilk-fs-lg);
  }
}

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

/* Indicador de link externo */
.ilk-card-producto[target="_blank"] .ilk-card-producto__arrow::before {
  content: "↗";
}

.ilk-card-producto[target="_blank"] .ilk-card-producto__arrow {
  font-size: 0;
}

.ilk-card-producto[target="_blank"] .ilk-card-producto__arrow::before {
  font-size: var(--ilk-fs-md);
}

@media (min-width: 768px) {
  .ilk-card-producto[target="_blank"] .ilk-card-producto__arrow::before {
    font-size: var(--ilk-fs-lg);
  }
}

/* ────────────────────────────────────────────────────────────
   7 · Variantes por unidad — cada una hereda su paleta
   El badge y el eyebrow consumen el accent de la unidad para
   identificación rápida en catálogos transversales.
   ──────────────────────────────────────────────────────────── */

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

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

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

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

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

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

/* ────────────────────────────────────────────────────────────
   8 · Variante destacada (featured)
   Para producto principal de una sección — ocupa 2 columnas y
   muestra la imagen al lado en lugar de arriba. Stack vertical
   en mobile.
   ──────────────────────────────────────────────────────────── */

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

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

  /* Body con respiración: padding mayor en general, y padding-inline-start
     extra (40px) para crear aire entre la imagen y el inicio del texto. */
  .ilk-card-producto--featured .ilk-card-producto__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-producto--featured .ilk-card-producto__title {
    font-size: var(--ilk-fs-2xl);
  }

  /* En featured el descriptor tiene espacio amplio: clamp 6 por defecto
     para que el copy comercial respire. */
  .ilk-card-producto--featured .ilk-card-producto__desc {
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }

  /* Arrow desplazada para alinear con el padding mayor */
  .ilk-card-producto--featured .ilk-card-producto__arrow {
    bottom: var(--ilk-space-8);
    right: var(--ilk-space-8);
  }
}

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

/* ────────────────────────────────────────────────────────────
   9 · Variante compacta
   Para barras laterales o módulos relacionados — sin meta y con
   padding reducido. Útil en footers de página de producto
   (ej: "También te puede interesar").
   ──────────────────────────────────────────────────────────── */

.ilk-card-producto--compacta .ilk-card-producto__body {
  padding: var(--ilk-space-4);
  gap: var(--ilk-space-2);
}

.ilk-card-producto--compacta .ilk-card-producto__title {
  font-size: var(--ilk-fs-md);
}

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

.ilk-card-producto--compacta .ilk-card-producto__desc {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ilk-card-producto--compacta .ilk-card-producto__meta {
  display: none;
}

.ilk-card-producto--compacta .ilk-card-producto__arrow {
  bottom: var(--ilk-space-4);
  right: var(--ilk-space-4);
  font-size: var(--ilk-fs-md);
}