/*
 * ╔══════════════════════════════════════════════════╗
 * ║  villaGo — Breadcrumbs Component                ║
 * ╚══════════════════════════════════════════════════╝
 */

.y-breadcrumb,
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  color: var(--y-color-text-muted);
  font-size: var(--y-font-s);
  margin-block-end: 12px;
  flex-wrap: wrap;
}

.y-breadcrumb-item a,
.breadcrumb a {
  color: var(--y-color-text-muted);
  transition: color var(--y-transition-fast);
}

.y-breadcrumb-item a:hover,
.breadcrumb a:hover {
  color: var(--y-color-primary);
}

/* ── Separator → points right-to-left in RTL ─────── */
.y-breadcrumb-item:not(:last-child)::after {
  content: '‹';
  display: inline-block;
  margin-inline-start: var(--y-space-s);
  color: var(--y-color-text-muted);
  font-size: 0.75rem;
}

.breadcrumb span:not(.current) {
  color: var(--y-color-text-muted);
}

/* ── Active / current item ───────────────────────── */
.y-breadcrumb-item.active,
.breadcrumb .current {
  color: var(--y-color-text);
  font-weight: var(--y-weight-medium);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════ */

/* ── Large Desktop (lg) ──────────────────────────── */
@media (max-width: 1200px) {}

/* ── Tablet (md) ─────────────────────────────────── */
@media (max-width: 992px) {}

/* ── Mobile Landscape / Large Phone (sm) ─────────── */
@media (max-width: 768px) {
  .y-breadcrumb, .breadcrumb { font-size: 0.75rem; gap: 4px; }
}

/* ── Small Phone (xs) ────────────────────────────── */
@media (max-width: 480px) {
  .y-breadcrumb, .breadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
}