/* ---- 16g. Page nav (sub-page hub) — PARITY B15 -------------------------
 * The hub cards themselves carry the reference's own Tailwind classes
 * (grid/gap/glass-card/… served from /themes/tailwind.css), so this file only
 * owns what Tailwind can't express: the optional heading this repo's YAMLs
 * author above the hub (the reference block renders no heading of its own),
 * and the empty-state glass card's radius. */

.page-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* The repo's optional hub heading — the reference `text-headline` face, the
   same voice as every panel heading. */
.page-nav-heading {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.014em;
}

/* The no-pages state sits in a bare glass card; `rounded-lg` comes from
   Tailwind, and the app glass-card's default padding is zeroed here (the
   reference's glass-card carries none) so the empty state's own px-6/py-8
   spacing reads as the reference's. */
.page-nav-empty {
  padding: 0;
  border-radius: var(--ta-r-lg);
}

/* The hub card. Element+class so it beats the app glass-card's default
   1.25rem padding (vitrine loads later than this file) and base.css's accent
   link colour — the reference card's text is foreground, not accent, and the
   accent appears only on hover (border tint + text, the reference's
   `hover:border-primary/40` / `group-hover:text-primary`). */
a.page-nav-card.glass-card {
  padding: 1rem;
  /* Grid items default to `min-width: auto`, so a card's nowrap description
     forced the hub wider than the pane on phones (clipped by the app-shell).
     Let the cards shrink to the pane; the truncating inner spans ellipsize. */
  min-width: 0;
  color: inherit;
  /* The reference's `transition-colors duration-[140ms] ease-out` — glass-card
     only transitions bg/border/shadow, not colour. */
  transition: color 0.14s ease, background-color 0.14s ease,
    border-color 0.14s ease, box-shadow 0.14s ease;
}

a.page-nav-card.glass-card:hover {
  border-color: color-mix(in oklab, var(--ta-accent) 40%, transparent);
  color: var(--ta-accent);
}