/*
 * Page Header Component
 *
 * Sticky header with backdrop blur effect for page titles, breadcrumbs, and actions.
 * 
 */

/* Header shell - sticky with backdrop blur */
.page-header {
  position: sticky;
  top: 0;
  z-index: 10; /* Ensure header stays above scrolling content */
  background: light-dark(
    color-mix(in oklab, white, transparent 50%),
    black
  );
  backdrop-filter: saturate(180%) blur(8px);
  border-block-end: 1px solid var(--color-border);
  padding-block: var(--size-3) var(--size-3); /* 12px top, 12px bottom */
  margin-block-end: var(--size-6); /* 24px - balanced with spacing above border */
}

/* Inner row - flexbox container for content */
.page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4); /* 16px gap between left and right blocks */
}

/* Left block - breadcrumbs + title */
.page-header__content {
  min-inline-size: 0; /* Allow text truncation if needed */
}

/* Breadcrumbs styling within page header */
.page-header__breadcrumbs {
  color: var(--color-text-subtle);
  font-size: 0.8125rem; /* 13px to match mockup */
  font-weight: var(--font-light); /* 300 - light weight for thinner appearance */
  margin-block-end: var(--size-1); /* 4px bottom margin like mockup */
  gap: var(--size-2); /* 8px consistent gap */
  -webkit-font-smoothing: antialiased;
}

/* Ensure breadcrumb links are light weight */
.page-header__breadcrumbs a {
  font-weight: var(--font-light); /* 300 - light weight to match mockup */
}

/* Lighter separator in page header breadcrumbs */
.page-header__breadcrumbs .crumb-sep {
  color: var(--color-text-subtle); /* Adapts to light/dark mode */
}

/* Title styling */
.page-header__title {
  font-size: var(--text-2xl); /* 24px (close to 26px in mockup) */
  line-height: var(--leading-tight); /* 1.25 (close to 1.3 in mockup) */
  margin: 0 0 var(--size-1_5); /* 0 top, 0 right, 6px bottom (like mockup) */
  font-weight: var(--font-bold); /* 700 */
  letter-spacing: -0.011em; /* Tight spacing per mockup */
}

/* Right block - action buttons */
.page-header__toolbar {
  display: flex;
  align-items: center;
  gap: var(--size-2); /* 8px gap between toolbar items (matches mockup) */
  flex-shrink: 0;
}

/* Responsive: stack toolbar under title on small screens */
@media (width < var(--breakpoint-sm)) { /* 640px */
  .page-header__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--size-3); /* 12px vertical gap when stacked */
  }

  .page-header__toolbar {
    justify-content: flex-end; /* Keep actions right-aligned */
  }
}