/**
 * Breadcrumb bar — back | trail | action.
 *
 * Matches the building map's bar (Vebses Apartments System, .vas-crumbs): a
 * 64px band of hairline-divided cells. The action cell is as wide as the page's
 * side panel (--deka-crumbs-aside, the apartment page's 40% with its 416px
 * floor), so the page's vertical rule continues up through the bar, and its
 * text starts where the panel's content does.
 */

.deka-crumbs {
  --deka-crumbs-aside: max(26rem, 40%);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--deka-crumbs-aside);
  align-items: stretch;
  min-height: 4rem; /* 64 */
  border-bottom: 1px solid var(--deka-divider-warm);
  background: var(--deka-surface-page);
  font-family: var(--deka-font-body);
  font-size: 0.875rem;
  color: var(--deka-text);
}

.deka-crumbs > * {
  display: flex;
  align-items: center;
  min-width: 0;
}

.deka-crumbs a {
  color: inherit;
  text-decoration: none;
}

.deka-crumbs__back {
  padding: 0 1.5rem 0 var(--deka-gutter);
  font-weight: var(--deka-weight-semibold);
  white-space: nowrap;
}

.deka-crumbs__back::before { content: '\2190\00a0\00a0'; }

.deka-crumbs__trail {
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.5rem 1.5rem;
  border-left: 1px solid var(--deka-divider-warm);
  color: var(--deka-text-muted);
}

.deka-crumbs__trail a:hover {
  color: var(--deka-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.deka-crumbs__sep { color: var(--deka-border-strong); }

.deka-crumbs__current {
  color: var(--deka-text);
  font-weight: var(--deka-weight-semibold);
}

.deka-crumbs__action {
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--deka-space-xl); /* the apartment panel's side padding */
  border-left: 1px solid var(--deka-divider-warm);
  font-weight: var(--deka-weight-semibold);
  white-space: nowrap;
  transition:
    background-color var(--deka-duration-base) var(--deka-ease-out),
    color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-crumbs__action::after { content: '\2192'; }

.deka-crumbs__action:hover {
  background: var(--deka-text);
  color: var(--deka-surface-page);
}

.deka-crumbs a:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: -4px;
}

@media (max-width: 75rem) { /* 1200 — the panel's padding steps down here too */
  .deka-crumbs__action { padding-inline: var(--deka-space-lg); }
}

/* Where the apartment page stacks: back and action on one line, the trail on
   its own line beneath. */
@media (max-width: 60rem) {
  .deka-crumbs {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .deka-crumbs__back { padding: 0.75rem 1rem; }

  .deka-crumbs__action {
    order: 2;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-left: 0;
  }

  .deka-crumbs__trail {
    order: 3;
    grid-column: 1 / -1;
    padding: 0.6rem 1rem;
    border-left: 0;
    border-top: 1px solid var(--deka-divider-warm);
  }
}