/* ============================================================
   Interlaken® · Componente · Breadcrumb
   Navegación contextual jerárquica. Aparece en páginas internas
   (unidad, producto, caso) para ubicar al visitante dentro de
   la arquitectura del sitio.

   Estructura: Home > Unidad > Sección > Página actual.
   El último ítem es la página actual (sin link, marcada con
   aria-current="page" para accesibilidad).

   Mobile-first: en pantallas <640px se muestra solo el padre
   directo con flecha de retorno, evitando wraps que dañen la
   composición editorial.

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

/* ────────────────────────────────────────────────────────────
   1 · Container del breadcrumb
   nav semántico con aria-label en HTML. El nav no tiene estilo
   propio — el padding y el contexto los aporta el wrapper de
   página (típicamente dentro de hero--product o sección de
   bienvenida de página interna).
   ──────────────────────────────────────────────────────────── */

.ilk-breadcrumb {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-light);
  line-height: var(--ilk-lh-snug);
  color: var(--ilk-fg-2);
}

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

/* ────────────────────────────────────────────────────────────
   2 · Lista — semántica con ol para que screen readers
   anuncien el orden jerárquico
   ──────────────────────────────────────────────────────────── */

.ilk-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ilk-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ilk-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ilk-space-2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

/* ────────────────────────────────────────────────────────────
   3 · Links de los crumbs intermedios
   Hover discreto — un breadcrumb no es CTA, es brújula.
   ──────────────────────────────────────────────────────────── */

.ilk-breadcrumb__link {
  color: var(--ilk-fg-2);
  text-decoration: none;
  transition: color var(--ilk-transition);
  text-overflow: ellipsis;
  overflow: hidden;
}

.ilk-breadcrumb__link:hover,
.ilk-breadcrumb__link:focus-visible {
  color: var(--ilk-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────
   4 · Página actual — último crumb
   Sin link, peso medium para distinguir, color principal.
   ──────────────────────────────────────────────────────────── */

.ilk-breadcrumb__item--current,
.ilk-breadcrumb__item[aria-current="page"] {
  color: var(--ilk-fg-1);
  font-weight: var(--ilk-fw-medium);
  text-overflow: ellipsis;
  overflow: hidden;
}

.ilk-breadcrumb__item--current span,
.ilk-breadcrumb__item[aria-current="page"] span {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ────────────────────────────────────────────────────────────
   5 · Separador entre crumbs
   Chevron ligero (›) en lugar de slash — más suave visualmente
   y mejor render con tipografías sans-serif. El separador es
   decorativo, oculto a screen readers.
   ──────────────────────────────────────────────────────────── */

.ilk-breadcrumb__separator {
  display: inline-block;
  color: var(--ilk-gray-mid);
  font-weight: var(--ilk-fw-light);
  user-select: none;
  pointer-events: none;
}

.ilk-breadcrumb__separator::before {
  content: "›";
}

/* Variante con slash — opcional para contextos editoriales más densos */
.ilk-breadcrumb--slash .ilk-breadcrumb__separator::before {
  content: "/";
}

/* ────────────────────────────────────────────────────────────
   6 · Variante mobile-compact
   En mobile, en lugar de mostrar la cadena completa que se
   wrappea fea, se muestra solo el padre directo con flecha de
   retorno. Activación automática vía media query, o forzable
   con la clase --back-only.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
  .ilk-breadcrumb__list {
    flex-wrap: nowrap;
  }

  /* Ocultar todos los crumbs intermedios excepto el penúltimo y el último */
  .ilk-breadcrumb__item:not(:nth-last-child(-n+2)):not(.ilk-breadcrumb__item--keep) {
    display: none;
  }

  /* En el penúltimo crumb (que es el padre directo) anteponer la flecha */
  .ilk-breadcrumb__item:nth-last-child(2) .ilk-breadcrumb__link::before {
    content: "← ";
    margin-right: var(--ilk-space-1);
  }

  /* Ocultar el separador antes del padre y el último */
  .ilk-breadcrumb__item:nth-last-child(2) .ilk-breadcrumb__separator,
  .ilk-breadcrumb__item:nth-last-child(1) .ilk-breadcrumb__separator {
    display: none;
  }

  /* En mobile el último crumb (página actual) suele ya estar en el title del hero,
     así que se oculta para no duplicar — solo queda visible el "← Padre" */
  .ilk-breadcrumb--mobile-back-only .ilk-breadcrumb__item:last-child {
    display: none;
  }
}

/* ────────────────────────────────────────────────────────────
   7 · Variantes cromáticas — sobre fondo oscuro
   Cuando el breadcrumb va dentro de hero--unit (fondo dark con
   foto), todos los textos pasan a blanco translúcido.
   ──────────────────────────────────────────────────────────── */

.ilk-breadcrumb--on-dark {
  color: rgba(255, 255, 255, 0.65);
}

.ilk-breadcrumb--on-dark .ilk-breadcrumb__link {
  color: rgba(255, 255, 255, 0.65);
}

.ilk-breadcrumb--on-dark .ilk-breadcrumb__link:hover,
.ilk-breadcrumb--on-dark .ilk-breadcrumb__link:focus-visible {
  color: var(--ilk-fg-inverse);
  text-decoration-color: var(--ilk-orange);
}

.ilk-breadcrumb--on-dark .ilk-breadcrumb__item--current,
.ilk-breadcrumb--on-dark .ilk-breadcrumb__item[aria-current="page"] {
  color: var(--ilk-fg-inverse);
}

.ilk-breadcrumb--on-dark .ilk-breadcrumb__separator {
  color: rgba(255, 255, 255, 0.35);
}

/* ────────────────────────────────────────────────────────────
   8 · Variantes por unidad — el link de la unidad adopta el
   accent de su paleta DESDE EL ESTADO BASE. Refuerza la
   identidad de la unidad de manera continua, no solo en
   interacción. Peso medium para distinguirlo de los crumbs
   neutros (Casos, Programas, etc.) que mantienen el tono gris.
   Hover agrega underline + intensifica un punto el color.
   ──────────────────────────────────────────────────────────── */

.ilk-breadcrumb__link--groundwork {
  color: var(--ilk-orange);
  font-weight: var(--ilk-fw-medium);
}
.ilk-breadcrumb__link--groundwork:hover,
.ilk-breadcrumb__link--groundwork:focus-visible {
  color: var(--ilk-orange);
  text-decoration-color: var(--ilk-orange);
}

.ilk-breadcrumb__link--bridgework {
  color: var(--ilk-bridgework-mid);
  font-weight: var(--ilk-fw-medium);
}
.ilk-breadcrumb__link--bridgework:hover,
.ilk-breadcrumb__link--bridgework:focus-visible {
  color: var(--ilk-bridgework-deep);
  text-decoration-color: var(--ilk-bridgework-mid);
}

.ilk-breadcrumb__link--fieldwork {
  color: var(--ilk-fieldwork-mid);
  font-weight: var(--ilk-fw-medium);
}
.ilk-breadcrumb__link--fieldwork:hover,
.ilk-breadcrumb__link--fieldwork:focus-visible {
  color: var(--ilk-fieldwork-deep);
  text-decoration-color: var(--ilk-fieldwork-mid);
}

.ilk-breadcrumb__link--academy {
  color: var(--ilk-academy-mid);
  font-weight: var(--ilk-fw-medium);
}
.ilk-breadcrumb__link--academy:hover,
.ilk-breadcrumb__link--academy:focus-visible {
  color: var(--ilk-academy-deep);
  text-decoration-color: var(--ilk-academy-mid);
}

.ilk-breadcrumb__link--responsework {
  color: var(--ilk-orange);
  font-weight: var(--ilk-fw-medium);
}
.ilk-breadcrumb__link--responsework:hover,
.ilk-breadcrumb__link--responsework:focus-visible {
  color: var(--ilk-orange);
  text-decoration-color: var(--ilk-orange);
}

.ilk-breadcrumb__link--campamentos {
  color: var(--ilk-orange);
  font-weight: var(--ilk-fw-medium);
}
.ilk-breadcrumb__link--campamentos:hover,
.ilk-breadcrumb__link--campamentos:focus-visible {
  color: var(--ilk-orange);
  text-decoration-color: var(--ilk-orange);
}

/* En contexto on-dark, el color de unidad debe seguir siendo
   identificable pero un tono más claro para sobrevivir el
   fondo oscuro. Aquí usamos los tokens "soft" o invertimos
   ligeramente la intensidad. */
.ilk-breadcrumb--on-dark .ilk-breadcrumb__link--bridgework {
  color: var(--ilk-bridgework-soft, #c89980);
}

.ilk-breadcrumb--on-dark .ilk-breadcrumb__link--fieldwork {
  color: var(--ilk-fieldwork-soft, #8fb098);
}

.ilk-breadcrumb--on-dark .ilk-breadcrumb__link--academy {
  color: var(--ilk-academy-soft, #8fb5c0);
}

/* ────────────────────────────────────────────────────────────
   9 · Espaciado vertical contextual
   Cuando el breadcrumb se usa standalone en una página de
   producto editorial (sin estar dentro de un hero), aporta
   su propio padding-block superior e inferior. Si va dentro
   de hero, el wrapper del hero ya provee el espaciado y este
   modificador no se aplica.
   ──────────────────────────────────────────────────────────── */

.ilk-breadcrumb--standalone {
  padding-block: var(--ilk-space-4) var(--ilk-space-3);
}

@media (min-width: 768px) {
  .ilk-breadcrumb--standalone {
    padding-block: var(--ilk-space-5) var(--ilk-space-4);
  }
}