/**
 * brand.css
 * Styles for brand pages
 */

/* Back Navigation Pill */
.back-pill {
  position: sticky;
  top: 76px;
  /* Below navbar */
  z-index: 1020;
  background: rgba(17, 18, 20, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem 0;
}

.back-pill .btn {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Breadcrumb Styling */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  font-size: 0.875rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "›";
  color: var(--bs-secondary);
}

.breadcrumb-item a {
  color: var(--bs-light);
}

.breadcrumb-item a:hover {
  color: var(--bs-white);
}

.breadcrumb-item.active {
  color: var(--bs-secondary);
}

/* Coming Soon Badge */
.badge.bg-secondary {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
}

/* Empty State */
#brand-tracks-container .text-center {
  padding: 3rem 1rem;
}

#brand-tracks-container .display-1 {
  font-size: 4rem;
  opacity: 0.5;
}

/* Hero Button States */
.btn-secondary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
  .back-pill {
    top: 56px;
  }

  .back-pill .btn {
    font-size: 0.8125rem;
  }
}