/* ==========================================================================
   Page Nav component sheet
   Shared grid/table styles live in sheet.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variant card wrapper
   -------------------------------------------------------------------------- */
.page-nav-variant-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--background-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Page nav bar
   Sits on background/page — no card surface, no border.
   Horizontal bar, 48px tall.
   -------------------------------------------------------------------------- */
.page-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  height: 48px;
  position: relative;
}

/* --------------------------------------------------------------------------
   Back group — left-aligned
   -------------------------------------------------------------------------- */
.page-nav__back {
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Title — truly centred over the bar; max-width guards against button overlap
   (prev+next group ≈ 112px, 8px padding each side → 240px total clearance)
   -------------------------------------------------------------------------- */
.page-nav__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 240px);
  margin: 0;
  font-family: var(--type-family-semibold), system-ui, sans-serif;
  font-size: var(--type-body-md-size);
  font-weight: 400;
  line-height: var(--type-body-md-line-height);
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Previous / next group — right-aligned
   -------------------------------------------------------------------------- */
.page-nav__prev-next {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Nav link — 48px touch target height extension
   Atom styles live in nav-link.css; page-nav just sets the bounding height.
   -------------------------------------------------------------------------- */
.page-nav__link {
  height: 48px;
}

/* icons-only variant — 48×48px touch targets, no label */
.page-nav__link--icon-only {
  width: 48px;
  justify-content: center;
}