/* ============================================================
   Interlaken® · Componente · CTA de descarga PDF
   Bloque de invitación a descargar portafolios y propuestas en
   PDF. Aparece en páginas de unidad (portafolio Fieldwork,
   portafolio Bridgework, etc.) y en página de recursos.

   Diseño deliberado:
   · Visual diferenciado del CTA primary "Conversemos" — el
     usuario debe distinguir entre conversar (compromiso) y
     descargar (exploración).
   · Sin gating de email: la descarga es directa. Filosofía:
     el PDF es generosidad estratégica, la captura conversional
     la hace el modal de Conversemos. Pedir email para descargar
     genera fricción mal evaluada en B2B consultivo y descarta
     a investigadores/competidores que igual encontrarán formas
     de bajarlo.
   · Información clara del archivo (peso, idioma, fecha de
     actualización) para reducir ansiedad y comunicar cuidado.

   Estructura: icono PDF + body (eyebrow + título + descripción +
   meta) + botón. Layout horizontal en tablet+, vertical en
   mobile.

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

/* ────────────────────────────────────────────────────────────
   1 · Container del CTA
   Bloque tipo card con border definido para diferenciarlo del
   contenido editorial circundante. Tokens locales sobrescritos
   por variante de unidad.
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf {
  --cta-bg:            var(--ilk-bg-2);
  --cta-border:        var(--ilk-border);
  --cta-border-hover:  var(--ilk-orange);
  --cta-text:          var(--ilk-fg-1);
  --cta-text-muted:    var(--ilk-fg-2);
  --cta-icon-bg:       var(--ilk-bg-1);
  --cta-icon-color:    var(--ilk-orange);
  --cta-accent:        var(--ilk-orange);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-5);
  padding: var(--ilk-space-5);
  background: var(--cta-bg);
  border: 1px solid var(--cta-border);
  border-radius: var(--ilk-radius-md);
  transition: border-color var(--ilk-transition),
              box-shadow var(--ilk-transition);
}

@media (min-width: 768px) {
  .ilk-cta-pdf {
    flex-direction: row;
    align-items: center;
    padding: var(--ilk-space-6);
    gap: var(--ilk-space-6);
  }
}

.ilk-cta-pdf:hover,
.ilk-cta-pdf:focus-within {
  border-color: var(--cta-border-hover);
  box-shadow: var(--ilk-shadow-md);
}

/* ────────────────────────────────────────────────────────────
   2 · Ícono PDF — bloque visual a la izquierda
   Cuadrado con esquinas redondeadas, icono SVG inline. El
   color del icono se hereda de --cta-icon-color para variantes.
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta-icon-bg);
  border-radius: var(--ilk-radius-md);
  color: var(--cta-icon-color);
}

@media (min-width: 768px) {
  .ilk-cta-pdf__icon {
    width: 72px;
    height: 72px;
  }
}

.ilk-cta-pdf__icon svg {
  width: 28px;
  height: 28px;
}

@media (min-width: 768px) {
  .ilk-cta-pdf__icon svg {
    width: 36px;
    height: 36px;
  }
}

/* ────────────────────────────────────────────────────────────
   3 · Body — contenido textual
   Stack vertical con eyebrow + título + descripción + meta.
   Toma todo el espacio disponible entre icono y botón.
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-2);
  min-width: 0; /* permite que el body se contraiga sin overflow */
}

.ilk-cta-pdf__eyebrow {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-medium);
  color: var(--cta-text-muted);
  letter-spacing: 0.01em;
  margin: 0;
}

.ilk-cta-pdf__title {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-md);
  font-weight: var(--ilk-fw-medium);
  line-height: var(--ilk-lh-tight);
  letter-spacing: var(--ilk-tracking-tight);
  color: var(--cta-text);
  margin: 0;
}

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

.ilk-cta-pdf__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(--cta-text-muted);
  margin: 0;
  /* Default 2 líneas — el bloque es CTA, no editorial */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Modificador para descripción más extensa cuando se necesita
   contexto adicional sobre el contenido del PDF */
.ilk-cta-pdf--desc-extendida .ilk-cta-pdf__desc {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* ────────────────────────────────────────────────────────────
   4 · Meta del archivo
   Línea informativa con peso, formato, idioma y fecha de
   actualización. Reduce ansiedad pre-descarga.
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ilk-space-2) var(--ilk-space-3);
  margin-top: var(--ilk-space-1);
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-light);
  color: var(--cta-text-muted);
}

.ilk-cta-pdf__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ilk-space-1);
}

/* Separador entre meta-items */
.ilk-cta-pdf__meta-item + .ilk-cta-pdf__meta-item::before {
  content: "·";
  margin-right: var(--ilk-space-2);
  color: var(--ilk-gray-mid);
}

/* ────────────────────────────────────────────────────────────
   5 · Botón de descarga
   Variante distintiva: outline + ícono de descarga, no fondo
   sólido naranja como el CTA primary "Conversemos". Refuerza
   diferenciación jerárquica entre "explorar" y "conversar".
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf__button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ilk-space-2);
  padding: var(--ilk-space-3) var(--ilk-space-5);
  background: transparent;
  border: 1.5px solid var(--cta-accent);
  border-radius: var(--ilk-radius-md);
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-sm);
  font-weight: var(--ilk-fw-medium);
  color: var(--cta-accent);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ilk-transition),
              color var(--ilk-transition),
              border-color var(--ilk-transition);
  white-space: nowrap;
}

.ilk-cta-pdf__button:hover,
.ilk-cta-pdf__button:focus-visible {
  background: var(--cta-accent);
  color: var(--ilk-fg-inverse);
}

.ilk-cta-pdf__button:focus-visible {
  outline: 2px solid var(--cta-accent);
  outline-offset: 3px;
}

.ilk-cta-pdf__button-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* En mobile el botón ocupa el ancho completo */
@media (max-width: 767px) {
  .ilk-cta-pdf__button {
    width: 100%;
    justify-content: center;
    padding: var(--ilk-space-3) var(--ilk-space-5);
  }
}

/* ────────────────────────────────────────────────────────────
   6 · Variantes por unidad
   El icono y el accent del botón adoptan la paleta de la unidad.
   Sutil pero refuerza identidad cuando el CTA va dentro de la
   página de un instalador específico.
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf--groundwork {
  --cta-icon-color: var(--ilk-orange);
  --cta-accent:     var(--ilk-orange);
  --cta-border-hover: var(--ilk-orange);
}

.ilk-cta-pdf--bridgework {
  --cta-icon-color:     var(--ilk-bridgework-mid);
  --cta-accent:         var(--ilk-bridgework-mid);
  --cta-border-hover:   var(--ilk-bridgework-mid);
}

.ilk-cta-pdf--fieldwork {
  --cta-icon-color:     var(--ilk-fieldwork-mid);
  --cta-accent:         var(--ilk-fieldwork-mid);
  --cta-border-hover:   var(--ilk-fieldwork-mid);
}

.ilk-cta-pdf--academy {
  --cta-icon-color:     var(--ilk-academy-mid);
  --cta-accent:         var(--ilk-academy-mid);
  --cta-border-hover:   var(--ilk-academy-mid);
}

.ilk-cta-pdf--responsework {
  --cta-icon-color: var(--ilk-orange);
  --cta-accent:     var(--ilk-orange);
  --cta-border-hover: var(--ilk-orange);
}

.ilk-cta-pdf--campamentos {
  --cta-icon-color: var(--ilk-orange);
  --cta-accent:     var(--ilk-orange);
  --cta-border-hover: var(--ilk-orange);
}

/* ────────────────────────────────────────────────────────────
   7 · Variante destacada — fondo de paleta de unidad
   Para uso al final de página de unidad o página de producto
   como cierre conversional secundario. Background con la paleta
   "frame" de la unidad para mayor presencia.
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf--destacada {
  --cta-bg: var(--ilk-bg-1);
  border-width: 1.5px;
  padding: var(--ilk-space-6);
}

@media (min-width: 768px) {
  .ilk-cta-pdf--destacada {
    padding: var(--ilk-space-8);
  }
}

.ilk-cta-pdf--destacada.ilk-cta-pdf--bridgework {
  --cta-bg: var(--ilk-bridgework-frame);
  --cta-border: var(--ilk-bridgework-soft);
}

.ilk-cta-pdf--destacada.ilk-cta-pdf--fieldwork {
  --cta-bg: var(--ilk-fieldwork-frame);
  --cta-border: var(--ilk-fieldwork-soft);
}

.ilk-cta-pdf--destacada.ilk-cta-pdf--academy {
  --cta-bg: var(--ilk-academy-frame);
  --cta-border: var(--ilk-academy-soft);
}

.ilk-cta-pdf--destacada .ilk-cta-pdf__icon {
  background: var(--ilk-bg-1);
}

/* ────────────────────────────────────────────────────────────
   8 · Estado draft — recurso pendiente de publicación
   Visible solo en modo preview (lab, staging con ?preview).
   En producción, el JS de Sprint 2.F filtra los recursos con
   is_published: false antes de renderizar — nunca llegan al
   DOM. Pero cuando sí se renderizan en preview, llevan un
   badge "Borrador" inequívoco para que el editor sepa que
   el visitante final NO está viendo este recurso todavía.
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf--draft {
  position: relative;
  border-style: dashed;
  border-color: var(--ilk-gray-mid);
}

.ilk-cta-pdf--draft::before {
  content: "Borrador · no visible en producción";
  position: absolute;
  top: var(--ilk-space-3);
  right: var(--ilk-space-3);
  padding: var(--ilk-space-1) var(--ilk-space-3);
  background: var(--ilk-gray-mid);
  color: var(--ilk-fg-inverse);
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-medium);
  letter-spacing: 0.01em;
  border-radius: var(--ilk-radius-full);
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 768px) {
  .ilk-cta-pdf--draft::before {
    top: var(--ilk-space-4);
    right: var(--ilk-space-4);
  }
}

/* En estado draft el botón se ve con menor afordancia visual
   pero NO deshabilitado — el editor en preview sí puede hacer
   click para validar el flujo de descarga (aunque no haya
   archivo todavía, simplemente no descargará nada). */
.ilk-cta-pdf--draft .ilk-cta-pdf__button {
  opacity: 0.6;
}

/* Si el archivo aún no existe (file_url: null), la fecha
   estimada de publicación se puede mostrar en lugar de la meta
   normal. El JS aplica esta clase en preview cuando publish_
   estimated_date está definido. */
.ilk-cta-pdf__estimated {
  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);
  font-style: italic;
  color: var(--ilk-gray-mid);
  margin-top: var(--ilk-space-1);
}

/* ────────────────────────────────────────────────────────────
   9 · Variante compacta — para sidebars o módulos densos
   Sin descripción ni meta, solo icono + título + botón.
   ──────────────────────────────────────────────────────────── */

.ilk-cta-pdf--compacta {
  padding: var(--ilk-space-4);
  gap: var(--ilk-space-4);
}

.ilk-cta-pdf--compacta .ilk-cta-pdf__icon {
  width: 40px;
  height: 40px;
}

.ilk-cta-pdf--compacta .ilk-cta-pdf__icon svg {
  width: 20px;
  height: 20px;
}

.ilk-cta-pdf--compacta .ilk-cta-pdf__title {
  font-size: var(--ilk-fs-sm);
}

.ilk-cta-pdf--compacta .ilk-cta-pdf__desc,
.ilk-cta-pdf--compacta .ilk-cta-pdf__meta {
  display: none;
}

.ilk-cta-pdf--compacta .ilk-cta-pdf__button {
  padding: var(--ilk-space-2) var(--ilk-space-4);
  font-size: var(--ilk-fs-xs);
}