/* ============================================================
   Interlaken® · Componente · Card de instalador
   Las seis cards equi-jerárquicas del bloque "Instaladores
   de capacidades" en la home.

   Cada card consume la paleta de su unidad (frame, mid, accent,
   deep) declarada en tokens.css. El lockup -work va con la
   variante cromática de su paleta (cool, green) o color default.

   Mobile: 2 columnas · Tablet+: 3 columnas (grid 3×2).

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

/* ────────────────────────────────────────────────────────────
   1 · Container del grid de seis cards
   ──────────────────────────────────────────────────────────── */

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

@media (min-width: 768px) {
  .ilk-instaladores {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ilk-space-4);
  }
}

@media (min-width: 1280px) {
  .ilk-instaladores {
    gap: var(--ilk-space-5);
  }
}

/* ────────────────────────────────────────────────────────────
   2 · Card individual — base
   Tokens locales que cada variante de paleta sobrescribe.
   ──────────────────────────────────────────────────────────── */

.ilk-card-instalador {
  --card-bg:          var(--ilk-bg-2);
  --card-border:      var(--ilk-gray-mid);
  --card-border-hover: var(--ilk-orange);
  --card-text:        var(--ilk-fg-1);
  --card-text-muted:  var(--ilk-fg-2);
  --card-accent:      var(--ilk-orange);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-4);
  padding: var(--ilk-space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--ilk-radius-md);
  text-decoration: none;
  color: var(--card-text);
  min-height: 220px;
  overflow: hidden;
  transition: transform var(--ilk-transition),
              box-shadow var(--ilk-transition),
              border-color var(--ilk-transition);
}

@media (min-width: 768px) {
  .ilk-card-instalador {
    padding: var(--ilk-space-6) var(--ilk-space-6) var(--ilk-space-8);
    min-height: 280px;
    gap: var(--ilk-space-5);
  }
}

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

/* ────────────────────────────────────────────────────────────
   3 · Bloque del lockup (parte superior de la card)
   ──────────────────────────────────────────────────────────── */

.ilk-card-instalador__lockup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
}

/* En mobile reducimos el tamaño del lockup para que no domine y para
   que las palabras más largas (groundwork, bridgework, responsework)
   no se corten en el grid de 2 columnas (~165-175px por card). */
.ilk-card-instalador__lockup .ilk-work-lockup {
  --ilk-work-size: 26px;
}

@media (min-width: 480px) {
  .ilk-card-instalador__lockup .ilk-work-lockup {
    --ilk-work-size: 30px;
  }
}

@media (min-width: 768px) {
  .ilk-card-instalador__lockup .ilk-work-lockup {
    --ilk-work-size: 40px;
  }
}

@media (min-width: 1024px) {
  .ilk-card-instalador__lockup .ilk-work-lockup {
    --ilk-work-size: 48px;
  }
}

@media (min-width: 1280px) {
  .ilk-card-instalador__lockup .ilk-work-lockup {
    --ilk-work-size: 52px;
  }
}

/* Responsework — 12 letras, la palabra más larga de la familia.
   Se compensa con un tamaño un escalón menor que el resto en cada
   breakpoint y un letter-spacing un poco más cerrado. El resultado
   visual queda equilibrado con las demás cards porque la masa
   ópica del wordmark se mantiene equivalente. */
.ilk-card-instalador--responsework .ilk-card-instalador__lockup .ilk-work-lockup {
  --ilk-work-size: 22px;
}

@media (min-width: 480px) {
  .ilk-card-instalador--responsework .ilk-card-instalador__lockup .ilk-work-lockup {
    --ilk-work-size: 26px;
  }
}

@media (min-width: 768px) {
  .ilk-card-instalador--responsework .ilk-card-instalador__lockup .ilk-work-lockup {
    --ilk-work-size: 34px;
  }
}

@media (min-width: 1024px) {
  .ilk-card-instalador--responsework .ilk-card-instalador__lockup .ilk-work-lockup {
    --ilk-work-size: 40px;
  }
}

@media (min-width: 1280px) {
  .ilk-card-instalador--responsework .ilk-card-instalador__lockup .ilk-work-lockup {
    --ilk-work-size: 44px;
  }
}

/* Salvaguarda contra cualquier overflow inesperado del wordmark
   en cards estrechas. No corta — el lockup es inline-flex y la
   palabra es nowrap; esto evita que un cálculo borderline empuje
   el layout. */
.ilk-card-instalador__lockup {
  max-width: 100%;
  overflow: hidden;
}

.ilk-card-instalador__lockup .ilk-work-lockup__word {
  max-width: 100%;
}

/* Wordmark alternativo para Campamentos (no es lockup -work) */
.ilk-card-instalador__wordmark {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-lg);
  font-weight: var(--ilk-fw-light);
  letter-spacing: -0.01em;
  color: var(--card-text);
  margin: 0;
  line-height: 1.1;
}

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

/* ────────────────────────────────────────────────────────────
   4 · Tagline (línea principal del propósito del oficio)
   ──────────────────────────────────────────────────────────── */

.ilk-card-instalador__tagline {
  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-text);
  margin: 0;
  margin-top: auto;
}

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

/* ────────────────────────────────────────────────────────────
   5 · Audience (subline secundario)
   ──────────────────────────────────────────────────────────── */

.ilk-card-instalador__audience {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-light);
  color: var(--card-text-muted);
  margin: 0;
  line-height: var(--ilk-lh-snug);
}

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

/* ────────────────────────────────────────────────────────────
   6 · Arrow indicator (esquina inferior derecha)
   ──────────────────────────────────────────────────────────── */

.ilk-card-instalador__arrow {
  position: absolute;
  bottom: var(--ilk-space-5);
  right: var(--ilk-space-5);
  font-size: var(--ilk-fs-lg);
  color: var(--card-accent);
  line-height: 1;
  transition: transform var(--ilk-transition);
}

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

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

/* ────────────────────────────────────────────────────────────
   7 · Indicador de link externo (Campamentos → sitio externo)
   ──────────────────────────────────────────────────────────── */

.ilk-card-instalador[target="_blank"] .ilk-card-instalador__arrow::before {
  content: "↗";
}

.ilk-card-instalador[target="_blank"] .ilk-card-instalador__arrow {
  font-size: 0;  /* oculta la flecha → original; el ↗ del ::before queda */
}

.ilk-card-instalador[target="_blank"] .ilk-card-instalador__arrow::before {
  font-size: var(--ilk-fs-lg);
}

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

/* ────────────────────────────────────────────────────────────
   8 · Variantes por instalador — cada una con su paleta
   Las paletas son tokens declarados en tokens.css y se actualizan
   ahí cuando Claude Design entregue confirmaciones finales.
   ──────────────────────────────────────────────────────────── */

/* Groundwork — paleta madre (gris claro + naranja) */
.ilk-card-instalador--groundwork {
  --card-bg:         var(--ilk-gray-light);
  --card-border:     var(--ilk-gray-mid);
  --card-text-muted: var(--ilk-fg-2);
  --card-accent:     var(--ilk-orange);
}

/* Bridgework — tierra */
.ilk-card-instalador--bridgework {
  --card-bg:         var(--ilk-bridgework-frame);
  --card-border:     var(--ilk-bridgework-soft);
  --card-border-hover: var(--ilk-bridgework-mid);
  --card-text:       var(--ilk-bridgework-deep);
  --card-text-muted: var(--ilk-bridgework-mid);
  --card-accent:     var(--ilk-bridgework-mid);
}

/* Fieldwork — verde Suesca */
.ilk-card-instalador--fieldwork {
  --card-bg:         var(--ilk-fieldwork-frame);
  --card-border:     var(--ilk-fieldwork-soft);
  --card-border-hover: var(--ilk-fieldwork-mid);
  --card-text:       var(--ilk-fieldwork-deep);
  --card-text-muted: var(--ilk-fieldwork-accent);
  --card-accent:     var(--ilk-fieldwork-mid);
}

/* Academy — cool · azul tinta */
.ilk-card-instalador--academy {
  --card-bg:         var(--ilk-academy-frame);
  --card-border:     var(--ilk-academy-soft);
  --card-border-hover: var(--ilk-academy-mid);
  --card-text:       var(--ilk-academy-deep);
  --card-text-muted: var(--ilk-academy-accent);
  --card-accent:     var(--ilk-academy-mid);
}

/* Responsework — paleta madre con calidez */
.ilk-card-instalador--responsework {
  --card-bg:         var(--ilk-gray-light);
  --card-border:     var(--ilk-gray-mid);
  --card-text-muted: var(--ilk-fg-2);
  --card-accent:     var(--ilk-orange);
}

/* Campamentos de Aventura — paleta pendiente, fallback con ámbito propio */
.ilk-card-instalador--campamentos {
  --card-bg:         var(--ilk-bg-2);
  --card-border:     var(--ilk-border);
  --card-text-muted: var(--ilk-fg-2);
  --card-accent:     var(--ilk-orange);
}

/* ────────────────────────────────────────────────────────────
   9 · Variante con foto full-bleed
   Patrón "house of brands" estilo Takami: la card es un mundo
   visual completo, foto del oficio en el sitio + lockup encima
   en alto contraste. Mismo hook arquitectónico que el hero
   pattern B (--ilk-card-bg-image + ::before con gradient).

   Activación: agregar .ilk-card-instalador--with-photo a la
   card y declarar la URL inline:
   style="--ilk-card-bg-image: url('...')"

   El gradient garantiza legibilidad WCAG AA del lockup y los
   textos sobre cualquier foto (incluso de zonas muy claras).
   ──────────────────────────────────────────────────────────── */

.ilk-card-instalador--with-photo {
  --card-bg:           var(--ilk-bg-dark);   /* fallback si la imagen no carga */
  --card-text:         var(--ilk-fg-inverse);
  --card-text-muted:   rgba(255, 255, 255, 0.82);
  --card-border:       transparent;
  --card-border-hover: var(--ilk-orange);
  --card-accent:       var(--ilk-orange);

  background-image:    var(--ilk-card-bg-image, none);
  background-size:     cover;
  background-position: var(--ilk-card-bg-position, center);
  background-repeat:   no-repeat;
  min-height:          280px;
}

@media (min-width: 768px) {
  .ilk-card-instalador--with-photo {
    min-height: 340px;
  }
}

@media (min-width: 1024px) {
  .ilk-card-instalador--with-photo {
    min-height: 380px;
  }
}

/* Gradient overlay — vertical, intensifica al pie donde
   reposa el tagline. Calibrado para sobrevivir fotos claras. */
.ilk-card-instalador--with-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.10) 0%,
    rgba(13, 13, 13, 0.42) 55%,
    rgba(13, 13, 13, 0.86) 100%
  );
  pointer-events: none;
  transition: background var(--ilk-transition);
}

/* Todo el contenido por encima del overlay */
.ilk-card-instalador--with-photo > * {
  position: relative;
  z-index: 1;
}

/* Tagline + audience en blanco con sombra sutil para legibilidad
   sobre fotos con zonas claras */
.ilk-card-instalador--with-photo .ilk-card-instalador__tagline,
.ilk-card-instalador--with-photo .ilk-card-instalador__wordmark {
  color: var(--ilk-fg-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.ilk-card-instalador--with-photo .ilk-card-instalador__audience {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Lockup -work pasa automáticamente a on-dark cuando hay foto.
   Filetes en naranja (alto contraste sobre overlay oscuro). */
.ilk-card-instalador--with-photo .ilk-work-lockup {
  --ilk-work-ink: var(--ilk-fg-inverse);
  --ilk-work-endoso: var(--ilk-fg-inverse);
  --ilk-work-accent-line: var(--ilk-orange);
}

.ilk-card-instalador--with-photo .ilk-work-lockup__word,
.ilk-card-instalador--with-photo .ilk-work-lockup__endoso {
  color: var(--ilk-fg-inverse);
}

/* Arrow blanco con accent al hover */
.ilk-card-instalador--with-photo .ilk-card-instalador__arrow {
  color: var(--ilk-fg-inverse);
}

/* Hover: el overlay se aclara ligeramente arriba para revelar
   más de la foto, manteniendo legibilidad abajo. Zoom sutil del
   fondo refuerza la sensación de "vida" sin distraer. */
.ilk-card-instalador--with-photo {
  background-size: 105%;
  transition: transform var(--ilk-transition),
              box-shadow var(--ilk-transition),
              border-color var(--ilk-transition),
              background-size 600ms ease-out;
}

.ilk-card-instalador--with-photo:hover,
.ilk-card-instalador--with-photo:focus-visible {
  background-size: 112%;
}

.ilk-card-instalador--with-photo:hover::before,
.ilk-card-instalador--with-photo:focus-visible::before {
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.05) 0%,
    rgba(13, 13, 13, 0.32) 55%,
    rgba(13, 13, 13, 0.80) 100%
  );
}