/* ============================================================
   Homepage — the notebook's own landing surface.
   Layers over the nb token layer and notebook-components.css.
   Minimal, editorial, premium: left-aligned column grids rather
   than centred stacks, equal-height cards with deliberate slack
   and a pinned metadata foot, spec-sheet label/value pairs on
   hairlines, and a serif reserved for statement headlines.

   SPACING CONTRACT — three tiers, nothing improvised:
     INTRA   var(--nb-s2)    8px   inside one component
     INTER   var(--nb-s6)   24px   between siblings in a section
     SECTION var(--nb-section-md)  clamp(80px, 10vh, 120px)
             --sm and --lg select the other two rhythms
   Card and row interiors carry their own stated padding tokens.

   Test-enforced discipline (pages/tests_notebook.py):
   · every class starts nb-, every custom property --nb-home-
   · zero raw colors; token font sizes only; no theme forks
   · focus is always a visible ring; outline is never removed
   ============================================================ */

/* ── Shell ────────────────────────────────────────────────── */
.nb-home {
  --nb-home-gutter: var(--nb-s6);
  --nb-home-measure: 1200px;
  --nb-home-card-pad: var(--nb-s6);
  --nb-home-row-pad: var(--nb-s4);
  --nb-home-figure-pad: var(--nb-s6);
  --nb-home-hairline: 1px solid var(--nb-border);
  --nb-home-ring: 2px solid var(--nb-blue);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  contain: layout style;
  color: var(--nb-ink);
  font: var(--nb-type-ui);
}

.nb-home *,
.nb-home *::before,
.nb-home *::after {
  box-sizing: inherit;
  min-width: 0;
}

/* ── Section rhythm ───────────────────────────────────────── */
.nb-home-section {
  width: 100%;
  max-width: var(--nb-home-measure);
  margin-inline: auto;
  padding-inline: var(--nb-home-gutter);
  padding-block: var(--nb-section-md);
}

.nb-home-section--sm { padding-block: var(--nb-section-sm); }
.nb-home-section--lg { padding-block: var(--nb-section-lg); }

.nb-home-section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nb-s3);
  max-width: 62ch;
  margin-bottom: var(--nb-s9);
}

/* ── Statement type ───────────────────────────────────────── */
.nb-home-eyebrow {
  margin: 0;
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-ink);
}

.nb-home-statement {
  margin: 0;
  font: var(--nb-type-editorial);
  color: var(--nb-ink);
  text-wrap: balance;
}

.nb-home-statement--display { font: var(--nb-type-display); }

/* ── Left-aligned column grid ─────────────────────────────── */
.nb-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
  gap: var(--nb-s6);
}

@media (min-width: 900px) {
  .nb-home-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-home-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nb-home-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Equal-height card with a pinned foot ─────────────────── */
.nb-home-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--nb-home-card-pad);
  border: var(--nb-home-hairline);
  border-radius: var(--nb-r-lg);
  background: var(--nb-paper-raised);
  box-shadow: var(--nb-shadow-1);
}

/* The slack: the body absorbs the free space so every card in a
   row ends level and every foot pins to the same baseline. */
.nb-home-card__body {
  flex: 1 1 auto;
  padding-bottom: var(--nb-s6);
}

.nb-home-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nb-s3);
  margin-top: auto;
  padding-top: var(--nb-s4);
  border-top: var(--nb-home-hairline);
}

/* ── Spec-sheet label / value ─────────────────────────────── */
.nb-home-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nb-s4);
}

.nb-home-spec--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nb-s1);
}

.nb-home-spec__label {
  font: var(--nb-type-label);
  color: var(--nb-ink-3);
}

.nb-home-spec__value {
  font: var(--nb-type-ui);
  color: var(--nb-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Hairline ─────────────────────────────────────────────── */
.nb-home-rule {
  margin: 0;
  border: 0;
  border-top: var(--nb-home-hairline);
}

/* ── Hairline-separated list ──────────────────────────────── */
.nb-home-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nb-home-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nb-s4);
  padding-block: var(--nb-home-row-pad);
  border-top: var(--nb-home-hairline);
}

.nb-home-list__row:first-child { border-top: 0; }

/* ── Figure row: a tallied ledger, hairlines not gaps ─────────
   Four columns share one rule between them. The band is bounded
   above and below so it reads as a spec sheet, not a card grid.
   Label sits ABOVE the figure; the figure is the loudest thing. ── */
.nb-home-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: var(--nb-s7);
  border-top: var(--nb-home-hairline);
  border-bottom: var(--nb-home-hairline);
}

/* The eyebrow is a sibling of the band, so the INTER tier separates them.
   Without this the eyebrow's box sits flush on the top hairline: .nb-home-eyebrow
   is margin:0 by design and the band carries no margin of its own. */
.nb-home-eyebrow + .nb-home-figures { margin-top: var(--nb-s6); }

.nb-home-figure {
  display: flex;
  flex-direction: column;
  gap: var(--nb-s2);
  padding-inline: var(--nb-home-figure-pad);
  border-left: var(--nb-home-hairline);
}

.nb-home-figure:first-child {
  padding-inline-start: 0;
  border-left: 0;
}

.nb-home-figure__label {
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-ink);
}

/* Grid items stretch, so all four columns share a height. Pushing the value
   to the bottom puts every figure on one baseline even when a label needs two
   lines — which the longest label does below ~1190px. Without this the band
   goes ragged at any width narrower than its own max measure. */
.nb-home-figure__value {
  margin-top: auto;
  font: var(--nb-type-headline);
  color: var(--nb-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Primary action ───────────────────────────────────────── */
.nb-home-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-s2);
  padding: var(--nb-s3) var(--nb-s6);
  border: 1px solid var(--nb-blue);
  border-radius: var(--nb-r-md);
  background: var(--nb-blue);
  color: var(--nb-on-blue);
  font: var(--nb-type-control);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--nb-dur-2) var(--nb-ease),
    border-color var(--nb-dur-2) var(--nb-ease);
}

.nb-home-cta:hover {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
}

.nb-home-cta:focus-visible {
  outline: var(--nb-home-ring);
  outline-offset: 2px;
}

/* ── Quiet text link with a trailing arrow ────────────────── */
.nb-home-link {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-s1);
  border: 0;
  background: none;
  color: var(--nb-blue);
  font: var(--nb-type-control);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--nb-dur-2) var(--nb-ease);
}

.nb-home-link::after {
  content: "\2192";
  transition: transform var(--nb-dur-2) var(--nb-ease);
}

.nb-home-link:hover { color: var(--nb-blue-strong); }
.nb-home-link:hover::after { transform: translateX(var(--nb-s1)); }

.nb-home-link:focus-visible {
  outline: var(--nb-home-ring);
  outline-offset: 2px;
  border-radius: var(--nb-r-sm);
}

/* ── Motion guard: duration-only, content always ships visible ── */
@media (prefers-reduced-motion: reduce) {
  .nb-home-cta,
  .nb-home-link,
  .nb-home-link::after {
    transition: none;
  }
}

/* ── Narrow viewports: tighten the stated padding tokens ──── */
@media (max-width: 720px) {
  .nb-home {
    --nb-home-gutter: var(--nb-s4);
    --nb-home-card-pad: var(--nb-s5);
    --nb-home-row-pad: var(--nb-s3);
  }

  .nb-home-section__head { margin-bottom: var(--nb-s7); }

  /* Four hairline columns cannot survive a phone: fold to 2x2. The
     vertical rule survives between the pair; a horizontal rule
     separates the rows. Nothing is hidden and nothing scrolls. */
  .nb-home-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--nb-s5);
  }

  .nb-home-figure:nth-child(odd) {
    padding-inline-start: 0;
    border-left: 0;
  }

  .nb-home-figure:nth-child(n + 3) {
    padding-block-start: var(--nb-s5);
    border-top: var(--nb-home-hairline);
  }
}

@media (max-width: 460px) {
  /* One column: the same spec sheet rotated, horizontal rules only. */
  .nb-home-figures { grid-template-columns: minmax(0, 1fr); }

  .nb-home-figure {
    padding-inline: 0;
    border-left: 0;
  }

  .nb-home-figure:nth-child(n + 2) {
    padding-block-start: var(--nb-s5);
    border-top: var(--nb-home-hairline);
  }
}